Bagikan melalui

Tutorial: Menyiapkan aplikasi web ASP.NET Core yang mengautentikasi pengguna

  • Artikel

Berlaku untuk: Lingkaran hijau dengan simbol tanda centang putih. Penyewa Tenaga Kerja Lingkaran hijau dengan simbol tanda centang putih. Penyewa eksternal (pelajari lebih lanjut)

Dalam tutorial ini, Anda membuat aplikasi web ASP.NET Core dan mengonfigurasinya untuk autentikasi. Ini adalah bagian 1 dari seri yang menunjukkan cara membangun aplikasi web ASP.NET Core dan menyiapkannya untuk autentikasi menggunakan pusat admin Microsoft Entra. Aplikasi ini dapat digunakan untuk karyawan di penyewa tenaga kerja atau untuk pelanggan yang menggunakan penyewa eksternal

Di tutorial ini, Anda akan:

  • Membuat aplikasi web ASP.NET Core
  • Membuat sertifikat yang ditandatangani sendiri
  • Mengonfigurasi pengaturan untuk aplikasi
  • Menentukan pengaturan platform dan URL

Prasyarat

  • Akun Azure dengan langganan aktif. Buat akun secara gratis. Akun ini harus memiliki izin untuk mengelola aplikasi. Gunakan salah satu peran berikut yang diperlukan untuk mendaftarkan aplikasi:
    • Administrator Aplikasi
    • Pengembang Aplikasi
  • Meskipun lingkungan pengembangan terintegrasi (IDE) yang mendukung aplikasi ASP.NET Core dapat digunakan, tutorial ini menggunakan Visual Studio Code. Anda dapat mengunduhnya di sini.
  • Persyaratan minimum .NET 8.0 SDK.
  • Sertifikat pengembang ASP.NET Core. Instalasi dilakukan menggunakan dotnet dev-certs
  • Daftarkan aplikasi baru di pusat admin Microsoft Entra, dikonfigurasi hanya untuk Akun di direktori organisasi ini. Lihat Mendaftarkan aplikasi untuk detail selengkapnya. Rekam nilai berikut dari halaman Gambaran Umum aplikasi untuk digunakan nanti:
    • ID Aplikasi (klien)
    • ID Direktori (Penyewa)
  • Tambahkan URI pengalihan berikut menggunakan konfigurasi platform Web . Lihat Cara menambahkan URI pengalihan di aplikasi Anda untuk detail selengkapnya.
    • URI Pengalihan: https://localhost:5001/signin-oidc
    • URL keluar saluran depan: https://localhost:5001/signout-oidc
  • Untuk tujuan pengembangan, membuat sertifikat yang ditandatangani sendiri. Rujuk ke untuk menambahkan kredensial agar dapat mengunggah sertifikat dan mencatat sertifikat Sidik Jari. Jangan gunakan sertifikat yang ditandatangani sendiri untuk aplikasi produksi. Gunakan otoritas sertifikat tepercaya.

Membuat proyek ASP.NET Core

Di bagian ini, Anda membuat proyek ASP.NET Core di Visual Studio Code.

  1. Buka Visual Studio Code dan pilih Buka File > Folder.... Navigasi ke dan pilih lokasi untuk membuat proyek Anda.

  2. Buka terminal baru dengan memilih Terminal > Terminal Baru.

  3. Masukkan perintah berikut untuk membuat proyek Model View Controller (MVC) ASP.NET Core.

    dotnet new mvc -n identity-client-web-app

Menginstal paket identitas

Aplikasi ini menggunakan Microsoft.Identity.Web dan paket NuGet terkait harus diinstal.

Gunakan cuplikan berikut untuk mengubah ke folder identity-client-web-app baru dan instal paket NuGet yang relevan:

cd identity-client-web-app
dotnet add package Microsoft.Identity.Web.UI

Mengonfigurasi aplikasi untuk autentikasi

Nilai yang dicatat dalam penyiapan aplikasi Anda digunakan untuk mengonfigurasi aplikasi untuk autentikasi. File konfigurasi, appsettings.json, digunakan untuk menyimpan pengaturan aplikasi yang digunakan selama run-time.

Memperbarui file konfigurasi

Di IDE Anda, buka appsettings.json dan ganti konten file dengan cuplikan berikut. Ganti teks dalam tanda kutip dengan nilai yang direkam sebelumnya.

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "TenantId": "Enter_the_Tenant_Id_Here",
    "ClientId": "Enter_the_Application_Id_Here",
    "ClientCertificates": [
      {
        "SourceType": "StoreWithThumbprint",
        "CertificateStorePath": "CurrentUser/My",
        "CertificateThumbprint": "Enter the certificate thumbprint obtained the Microsoft Entra admin center"
      }   
    ],
    "CallbackPath": "/signin-oidc"
  },
    "DownstreamApi": {
      "BaseUrl": "https://graph.microsoft.com/v1.0/",
      "RelativePath": "me",
      "Scopes": [ 
        "user.read" 
      ]
    },
    "Logging": {
      "LogLevel": {
        "Default": "Information",
        "Microsoft.AspNetCore": "Warning"
      }
    },
    "AllowedHosts": "*"
  }
  • Instance - Titik akhir autentikasi. Periksa berbagai titik akhir yang tersedia di awan nasional .
  • TenantId - Pengidentifikasi penyewa tempat aplikasi terdaftar. Ganti teks dalam tanda kutip dengan nilai ID Direktori (tenant) yang direkam sebelumnya dari halaman gambaran umum aplikasi terdaftar.
  • ClientId - Pengidentifikasi aplikasi, juga disebut sebagai klien. Ganti teks dalam tanda kutip dengan nilai ID Aplikasi (klien) yang direkam sebelumnya dari halaman gambaran umum aplikasi terdaftar.
  • ClientCertificates - Sertifikat yang ditandatangani sendiri digunakan untuk autentikasi dalam aplikasi. Ganti teks CertificateThumbprint dengan thumbprint sertifikat yang telah direkam sebelumnya. Jangan gunakan sertifikat yang ditandatangani sendiri untuk aplikasi produksi.
  • CallbackPath - Adalah pengidentifikasi untuk membantu server mengalihkan respons ke aplikasi yang sesuai.
  • DownstreamApi - Adalah pengidentifikasi yang menentukan titik akhir untuk mengakses Microsoft Graph. URI aplikasi dikombinasikan dengan cakupan yang ditentukan. Untuk menentukan konfigurasi untuk aplikasi yang dimiliki oleh organisasi, nilai atribut Scopes sedikit berbeda.

Memperbarui URI pengalihan

Dari prasyarat , URI pengalihan diatur ke https://localhost:5001/signin-oidc. Ini perlu diperbarui dalam pengaturan peluncuran aplikasi. Anda dapat menggunakan URI pengalihan yang dibuat selama penyiapan aplikasi lokal, atau nomor port lain yang tersedia, asalkan cocok dengan URI pengalihan dalam pendaftaran aplikasi.

  1. Di folder Properti, buka file launchSettings.json.

  2. Temukan objek https, dan perbarui nilai applicationURI dengan nomor port yang benar, dalam hal ini, 5001. Garis akan terlihat mirip dengan cuplikan berikut:

    "applicationUrl": "https://localhost:5001;http://localhost:{port}",

Langkah berikutnya