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

Berlaku untuk: Penyewa tenaga kerja Penyewa eksternal (Lingkaran hijau dengan simbol tanda centang putih yang menunjukkan konten berikut berlaku untuk penyewa eksternal.) (Green circle with a white check mark symbol that indicates the following content applies to external tenants.pelajari selengkapnya)

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

Aplikasi web yang memasukkan pengguna dengan menggunakan platform identitas Microsoft dikonfigurasi melalui file konfigurasi, appsettings.json. Di ASP.NET Core, ia harus menentukan nilai berikut:

Setting Description
Instance Titik akhir autentikasi untuk menjalankan aplikasi Anda di cloud nasional. Gunakan salah satu dari:
- https://login.microsoftonline.com/ (Cloud publik Azure)
- https://login.microsoftonline.us/ (Azure Pemerintah AS)
- https://login.microsoftonline.de/ (Microsoft Entra Jerman)
- https://login.partner.microsoftonline.cn/ (Microsoft Entra Tiongkok dioperasikan oleh 21Vianet)
TenantId Pengidentifikasi penyewa (tenant) tempat aplikasi didaftarkan. Disarankan: gunakan ID penyewa dari pendaftaran aplikasi. Alternatif:
- organizations (akun kerja atau sekolah apa pun)
- common (akun pribadi kantor/sekolah atau Microsoft)
- consumers (Hanya akun pribadi Microsoft).
ClientId Pengidentifikasi aplikasi (klien) yang diperoleh dari pendaftaran aplikasi.
CertificateThumbprint Thumbprint sertifikat yang diunggah di pusat admin Microsoft Entra (lihat tambahkan kredensial).
CallbackPath Jalur yang digunakan untuk mengalihkan respons; atur ke /signin-oidc untuk tutorial ini.
DownstreamApi Pengidentifikasi yang menentukan titik akhir untuk mengakses Microsoft Graph. Gabungkan URI aplikasi dengan cakupan yang diperlukan (misalnya, user.read).

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": "*"
  }

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

  • Last updated on