Mengamankan ASP.NET Core Blazor Web App menggunakan ID Microsoft Entra

Artikel ini menjelaskan cara mengamankan Blazor Web App dengan platform identitas Microsoft dengan paket Microsoft Identity Web untuk ID Microsoft Entra menggunakan aplikasi sampel.

Versi artikel ini mencakup penerapan Entra tanpa mengadopsi pola Backend for Frontend (BFF) . Pola BFF berguna untuk membuat permintaan terautentikasi ke layanan eksternal. Ubah pemilih versi artikel menjadi pola BFF jika spesifikasi aplikasi memanggil untuk mengadopsi pola BFF.

Spesifikasi berikut tercakup:

• Blazor Web App menggunakan mode Render otomatis dengan interaktivitas global (InteractiveAuto).
• Proyek server memanggil AddAuthenticationStateSerialization untuk menambahkan penyedia status autentikasi sisi server yang menggunakan PersistentComponentState untuk mengalirkan status autentikasi ke klien. Klien memanggil AddAuthenticationStateDeserialization untuk mendeserialisasi dan menggunakan status autentikasi yang diteruskan oleh server. Keadaan autentikasi tetap selama masa pakai aplikasi WebAssembly.
• Aplikasi ini menggunakan ID Microsoft Entra, berdasarkan paket Microsoft Identity Web.
• Pengelolaan penyegaran token otomatis non-interaktif dilakukan oleh kerangka kerja.
• Aplikasi ini menggunakan abstraksi layanan sisi server dan sisi klien untuk menampilkan data cuaca yang dihasilkan:
  • Saat merender komponen Weather pada server untuk menampilkan data cuaca, komponen tersebut menggunakan ServerWeatherForecaster. Paket Web Microsoft Identity menyediakan API untuk membuat layanan web hilir bernama untuk melakukan panggilan API web. IDownstreamApi disuntikkan ke dalam ServerWeatherForecaster, yang berguna untuk memanggil CallApiForUserAsync guna mendapatkan data cuaca dari API web eksternal (proyek MinimalApiJwt).
  • Ketika komponen Weather dirender pada klien, komponen menggunakan implementasi layanan ClientWeatherForecaster, yang telah dikonfigurasi sebelumnya HttpClient (di file proyek Program klien) untuk melakukan panggilan API web ke API Minimal proyek /weather-forecast server untuk data cuaca. Titik akhir API Minimal mendapatkan data cuaca dari ServerWeatherForecaster kelas dan mengembalikannya ke klien untuk dirender oleh komponen.

Solusi sampel

Solusi sampel terdiri dari proyek-proyek berikut:

• BlazorWebAppEntra: Proyek sisi server dari Blazor Web App, yang berisi contoh titik akhir API Minimal untuk data cuaca.
• BlazorWebAppEntra.Client: Proyek sisi klien dari Blazor Web App.
• MinimalApiJwt: API web backend, berisi contoh titik akhir API Minimal untuk data cuaca.

Akses sampel melalui folder versi terbaru di repositori sampel Blazor dengan tautan berikut. Sampel berada di folder BlazorWebAppEntra untuk .NET 9 atau yang lebih baru.

Mulai solusi dari Aspire/Aspire.AppHost proyek.

Menampilkan atau mengunduh kode sampel (cara mengunduh)

Pendaftaran aplikasi ID Microsoft Entra

Sebaiknya gunakan pendaftaran terpisah untuk aplikasi dan API web, bahkan ketika aplikasi dan API web berada dalam solusi yang sama. Panduan berikut ini adalah untuk BlazorWebAppEntra aplikasi dan MinimalApiJwt API web dari contoh solusi, tetapi panduan yang sama umumnya berlaku untuk pendaftaran berbasis Entra untuk aplikasi dan API web.

Daftarkan API web (MinimalApiJwt) terlebih dahulu sehingga Anda kemudian dapat memberikan akses ke API web saat mendaftarkan aplikasi. ID penyewa dan ID klien API web digunakan untuk mengonfigurasi API web di dalam file Program. Setelah mendaftarkan API web, ekspos API web di Registrasi Aplikasi> Mengekspos API dengan nama cakupan Weather.Get. Rekam URI ID Aplikasi untuk digunakan dalam konfigurasi aplikasi.

Selanjutnya, daftarkan aplikasi (BlazorWebAppEntra) dengan konfigurasi platform Web dengan dua entri di bawah URI Pengalihan: https://localhost/signin-oidc dan https://localhost/signout-callback-oidc (port tidak diperlukan pada URI ini). Atur URL keluar saluran depan ke https://localhost/signout-callback-oidc (port tidak diperlukan). ID penyewa, domain penyewa, dan ID klien aplikasi, bersama dengan alamat dasar API web, URI ID Aplikasi, dan nama cakupan cuaca, digunakan untuk mengonfigurasi aplikasi dalam filenya appsettings.json . Berikan izin API untuk mengakses API web di pendaftaran aplikasi>Izin API. Jika spesifikasi keamanan aplikasi memanggilnya, Anda dapat memberikan persetujuan admin bagi organisasi untuk mengakses API web. Pengguna dan grup yang berwenang ditetapkan ke pendaftaran aplikasi di Pendaftaran aplikasi>aplikasi Enterprise.

Pada konfigurasi pendaftaran aplikasi di portal Entra atau Azure pemberian implisit dan alur hibrid, jangan pilih kotak centang agar titik akhir otorisasi tidak mengembalikan token Akses atau token ID. Handler OpenID Connect secara otomatis meminta token yang sesuai menggunakan kode yang dikembalikan dari titik akhir otorisasi.

Buat rahasia klien di pendaftaran aplikasi di portal Entra atau Microsoft Azure (Kelola>Sertifikat & rahasia>Rahasia klien baru). Simpan rahasia klien Value untuk digunakan pada bagian selanjutnya.

Panduan konfigurasi Entra tambahan untuk pengaturan tertentu disediakan nanti di artikel ini.

Proyek Blazor Web App server-side (BlazorWebAppEntra)

Proyek BlazorWebAppEntra ini adalah proyek sisi server dari Blazor Web App.

Proyek Blazor Web App sisi klien (BlazorWebAppEntra.Client)

Proyek BlazorWebAppEntra.Client ini adalah proyek sisi klien dari Blazor Web App.

Jika pengguna perlu masuk atau keluar selama penyajian sisi klien, pemuatan ulang halaman penuh dimulai.

Proyek backend untuk API web (MinimalApiJwt)

Proyek MinimalApiJwt ini adalah API web backend untuk beberapa proyek frontend. Proyek mengonfigurasi titik akhir API Minimal untuk data cuaca.

File MinimalApiJwt.http dapat digunakan untuk menguji permintaan data cuaca. Perhatikan bahwa MinimalApiJwt proyek harus berjalan untuk menguji titik akhir, dan titik akhir dikodekan secara permanen ke dalam file. Untuk informasi selengkapnya, lihat Menggunakan file .http di Visual Studio 2022.

Proyek ini mencakup paket dan konfigurasi untuk menghasilkan dokumen OpenAPI.

Titik akhir data prakiraan cuaca yang aman ada di file proyek Program :

app.MapGet("/weather-forecast", () =>
{
    var forecast = Enumerable.Range(1, 5).Select(index =>
        new WeatherForecast
        (
            DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            Random.Shared.Next(-20, 55),
            summaries[Random.Shared.Next(summaries.Length)]
        ))
        .ToArray();
    return forecast;
}).RequireAuthorization();

Metode RequireAuthorization ekstensi memerlukan otorisasi untuk definisi rute. Untuk pengontrol apa pun yang Anda tambahkan ke proyek, tambahkan [Authorize] atribut ke pengontrol atau tindakan.

Konfigurasikan proyek API web backend (MinimalApiJwt)

Konfigurasikan proyek dalam JwtBearerOptions dari AddJwtBearer panggilan dalam file MinimalApiJwt proyek Program.

Untuk pendaftaran aplikasi API web, cakupan dikonfigurasi Weather.Get di portal Entra atau Microsoft Azure di Mengekspos API.

Authority menetapkan otoritas untuk melakukan panggilan OIDC.

jwtOptions.Authority = "{AUTHORITY}";

Contoh berikut menggunakan Penyewa ID aaaabbbb-0000-cccc-1111-dddd2222eeee dan nama direktori contoso.

Jika aplikasi terdaftar di tenant ME-ID, otoritas harus cocok dengan issuer (iss) JWT yang dikembalikan oleh penyedia identitas.

jwtOptions.Authority = "https://sts.windows.net/aaaabbbb-0000-cccc-1111-dddd2222eeee";

Jika aplikasi terdaftar di penyewa Microsoft Entra External ID:

jwtOptions.Authority = "https://contoso.ciamlogin.com/aaaabbbb-0000-cccc-1111-dddd2222eeee/v2.0";

Jika aplikasi terdaftar di tenant AAD B2C:

jwtOptions.Authority = "https://login.microsoftonline.com/aaaabbbb-0000-cccc-1111-dddd2222eeee/v2.0";

Note

Azure Active Directory B2C tidak lagi tersedia sebagai layanan untuk pelanggan baru per 1 Mei 2025. Dukungan untuk tenant AAD B2C diberikan kepada pelanggan dengan akun yang dibuat sebelum 1 Mei 2025 hingga tahun 2030. Untuk informasi selengkapnya, lihat Azure AD B2C: Tanya jawab umum (FAQ).

Audience mengatur Audiens untuk setiap token akses JWT yang diterima.

jwtOptions.Audience = "{AUDIENCE}";

Sesuaikan nilai hanya pada jalur URI ID Aplikasi yang telah dikonfigurasi saat menambahkan cakupan Weather.Get di bawah bagian Mengekspos sebuah API di portal Entra atau Azure. Jangan sertakan nama cakupan, "Weather.Get," dalam nilai .

Contoh berikut menggunakan Id Aplikasi (Klien) dari 11112222-bbbb-3333-cccc-4444dddd5555. Contoh ketiga menggunakan domain penyewa .contoso.onmicrosoft.com

contoh penyewa ME-ID:

jwtOptions.Audience = "api://11112222-bbbb-3333-cccc-4444dddd5555";

Penyewa ID Eksternal Microsoft Entra:

jwtOptions.Audience = "11112222-bbbb-3333-cccc-4444dddd5555";

Contoh penyewa AAD B2C:

jwtOptions.Audience = "https://contoso.onmicrosoft.com/11112222-bbbb-3333-cccc-4444dddd5555";

Konfigurasikan proyek server (BlazorWebAppEntra)

AddMicrosoftIdentityWebApp dari Microsoft Identity Web (Microsoft.Identity.Web paket NuGet, dokumentasi API) dikonfigurasi pada file BlazorWebAppEntra proyek Program.

Dapatkan ID aplikasi (klien), domain penyewa (penerbit), dan ID direktori (penyewa) dari pendaftaran aplikasi di portal Entra atau Microsoft Azure. URI ID Aplikasi didapatkan dari pendaftaran API web untuk ruang lingkup Weather.Get. Jangan sertakan nama cakupan saat mengambil URI ID Aplikasi dari portal.

Konfigurasi autentikasi tergantung pada jenis penyewa:

• konfigurasi penyewa ME-ID
• Konfigurasi ID Eksternal Microsoft Entra

konfigurasi penyewa ME-ID

Bagian ini berlaku untuk aplikasi yang terdaftar di id Microsoft Entra atau penyewa Azure AAD B2C.

Dalam file BlazorWebAppEntra proyek Program, berikan nilai untuk placeholder berikut dalam konfigurasi Microsoft Identity Web.

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(msIdentityOptions =>
    {
        msIdentityOptions.CallbackPath = "/signin-oidc";
        msIdentityOptions.ClientId = "{CLIENT ID (BLAZOR APP)}";
        msIdentityOptions.Domain = "{DIRECTORY NAME}.onmicrosoft.com";
        msIdentityOptions.Instance = "https://login.microsoftonline.com/";
        msIdentityOptions.ResponseType = "code";
        msIdentityOptions.TenantId = "{TENANT ID}";
    })
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddDownstreamApi("DownstreamApi", configOptions =>
    {
        configOptions.BaseUrl = "{BASE ADDRESS}";
        configOptions.Scopes = ["{APP ID URI}/Weather.Get"];
    })
    .AddDistributedTokenCaches();

Tempat penampung dalam konfigurasi sebelumnya:

• {CLIENT ID (BLAZOR APP)}: ID aplikasi (klien).
• {DIRECTORY NAME}: Nama direktori domain penyewa (penerbit).
• {TENANT ID}: ID direktori (penyewa atau tenant).
• {BASE ADDRESS}: Alamat dasar API web.
• {APP ID URI}: URI ID Aplikasi untuk cakupan API web. Salah satu format berikut digunakan, di mana {CLIENT ID (WEB API)} tempat penampung adalah Id Klien dari pendaftaran Entra API web, dan {DIRECTORY NAME} tempat penampung adalah nama direktori domain penyewa (penerbit) (misalnya: contoso).
  • format penyewa ME-ID: api://{CLIENT ID (WEB API)}
  • Format penyewa B2C: https://{DIRECTORY NAME}.onmicrosoft.com/{CLIENT ID (WEB API)}

Example:

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(msIdentityOptions =>
    {
        msIdentityOptions.CallbackPath = "/signin-oidc";
        msIdentityOptions.ClientId = "00001111-aaaa-2222-bbbb-3333cccc4444";
        msIdentityOptions.Domain = "contoso.onmicrosoft.com";
        msIdentityOptions.Instance = "https://login.microsoftonline.com/";
        msIdentityOptions.ResponseType = "code";
        msIdentityOptions.TenantId = "aaaabbbb-0000-cccc-1111-dddd2222eeee";
    })
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddDownstreamApi("DownstreamApi", configOptions =>
    {
        configOptions.BaseUrl = "https://localhost:7277";
        configOptions.Scopes = ["api://11112222-bbbb-3333-cccc-4444dddd5555/Weather.Get"];
    })
    .AddDistributedTokenCaches();

Konfigurasi ID Eksternal Microsoft Entra

Bagian ini berlaku untuk aplikasi yang terdaftar di penyewa MICROSOFT Entra External ID.

Dalam file BlazorWebAppEntra proyek Program, berikan nilai untuk placeholder berikut dalam konfigurasi Microsoft Identity Web.

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(msIdentityOptions =>
    {
        msIdentityOptions.CallbackPath = "/signin-oidc";
        msIdentityOptions.Authority = "https://{DIRECTORY NAME}.ciamlogin.com/{TENANT ID}/v2.0";
        msIdentityOptions.ClientId = "{CLIENT ID (BLAZOR APP)}";
        msIdentityOptions.ResponseType = "code";
    })
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddDownstreamApi("DownstreamApi", configOptions =>
    {
        configOptions.BaseUrl = "{BASE ADDRESS}";
        configOptions.Scopes = ["{APP ID URI}/Weather.Get"];
    })
    .AddDistributedTokenCaches();

Tempat penampung dalam konfigurasi sebelumnya:

• {DIRECTORY NAME}: Nama direktori domain penyewa (penerbit).
• {CLIENT ID (BLAZOR APP)}: ID aplikasi (klien).
• {BASE ADDRESS}: Alamat dasar API web.
• {APP ID URI}: URI ID Aplikasi untuk cakupan API web. Salah satu format berikut digunakan, di mana {CLIENT ID (WEB API)} tempat penampung adalah Id Klien dari pendaftaran Entra API web, dan {DIRECTORY NAME} tempat penampung adalah nama direktori domain penyewa (penerbit) (misalnya: contoso).
  • ME-ID atau format penyewa Microsoft Entra External ID: api://{CLIENT ID (WEB API)}
  • Format penyewa B2C: https://{DIRECTORY NAME}.onmicrosoft.com/{CLIENT ID (WEB API)}

Example:

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(msIdentityOptions =>
    {
        msIdentityOptions.CallbackPath = "/signin-oidc";
        msIdentityOptions.Authority = "https://contoso.ciamlogin.com/aaaabbbb-0000-cccc-1111-dddd2222eeee/v2.0";
        msIdentityOptions.ClientId = "00001111-aaaa-2222-bbbb-3333cccc4444";
        msIdentityOptions.ResponseType = "code";
    })
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddDownstreamApi("DownstreamApi", configOptions =>
    {
        configOptions.BaseUrl = "https://localhost:7277";
        configOptions.Scopes = ["api://11112222-bbbb-3333-cccc-4444dddd5555/Weather.Get"];
    })
    .AddDistributedTokenCaches();

Jalur panggilan balik (CallbackPath) harus cocok dengan URI pengalihan (jalur panggilan balik masuk) yang dikonfigurasi saat mendaftarkan aplikasi di Entra atau portal Azure. Jalur dikonfigurasi di bilah Autentikasi pendaftaran aplikasi. Nilai default dari CallbackPath adalah /signin-oidc untuk URI pengalihan terdaftar https://localhost/signin-oidc (port tidak diperlukan).

SignedOutCallbackPath adalah jalur permintaan yang dicegat oleh handler OpenID Connect dalam jalur dasar aplikasi, tempat agen pengguna pertama kali dikembalikan setelah keluar dari Entra. Aplikasi sampel tidak menetapkan nilai untuk jalur karena nilai default "/signout-callback-oidc" digunakan. Setelah mencegat permintaan, handler OpenID Connect mengalihkan ke SignedOutRedirectUri atau RedirectUri, jika ditentukan.

Warning

Jangan menyimpan rahasia aplikasi, string koneksi, kredensial, kata sandi, nomor identifikasi pribadi (PIN), kode C#/.NET privat, atau kunci/token privat dalam kode sisi klien, yang selalu tidak aman. Di lingkungan pengujian/penahapan dan produksi, kode sisi Blazor server dan API web harus menggunakan alur autentikasi aman yang menghindari mempertahankan kredensial dalam kode proyek atau file konfigurasi. Di luar pengujian pengembangan lokal, sebaiknya hindari penggunaan variabel lingkungan untuk menyimpan data sensitif, karena variabel lingkungan bukanlah pendekatan yang paling aman. Untuk pengujian pengembangan lokal, alat Secret Manager direkomendasikan untuk mengamankan data sensitif. Untuk informasi selengkapnya, lihat Mempertahankan data dan kredensial sensitif dengan aman.

Versi artikel ini membahas penerapan Entra menggunakan pola Backend for Frontend (BFF). Ubah pemilih versi artikel menjadi pola Non-BFF jika spesifikasi aplikasi tidak mengharuskan untuk mengadopsi pola BFF.

Spesifikasi berikut tercakup:

• Blazor Web App menggunakan mode Render otomatis dengan interaktivitas global (InteractiveAuto).
• Proyek server memanggil AddAuthenticationStateSerialization untuk menambahkan penyedia status autentikasi sisi server yang menggunakan PersistentComponentState untuk mengalirkan status autentikasi ke klien. Klien memanggil AddAuthenticationStateDeserialization untuk mendeserialisasi dan menggunakan status autentikasi yang diteruskan oleh server. Keadaan autentikasi tetap selama masa pakai aplikasi WebAssembly.
• Aplikasi ini menggunakan ID Microsoft Entra, berdasarkan paket Microsoft Identity Web.
• Pengelolaan penyegaran token otomatis non-interaktif dilakukan oleh kerangka kerja.
• Pola desain Backend for Frontend (BFF) diadopsi menggunakan Aspire untuk penemuan layanan dan YARP untuk memproksi permintaan ke titik akhir prakiraan cuaca pada aplikasi backend.
  • API web backend menggunakan autentikasi pembawa JWT untuk memvalidasi token JWT yang disimpan saat masuk.
  • Aspire meningkatkan pengalaman membangun aplikasi cloud-native .NET. Ini menyediakan serangkaian alat dan pola yang konsisten dengan pandangan tertentu untuk membangun dan menjalankan aplikasi terdistribusi.
  • YARP (Yet Another Reverse Proxy) adalah pustaka yang digunakan untuk membuat server proksi terbalik.
• Aplikasi ini menggunakan abstraksi layanan sisi server dan sisi klien untuk menampilkan data cuaca yang dihasilkan.
  • Saat merender komponen Weather pada server untuk menampilkan data cuaca, komponen tersebut menggunakan ServerWeatherForecaster. Paket Web Microsoft Identity menyediakan API untuk membuat layanan web hilir bernama untuk melakukan panggilan API web. IDownstreamApi disuntikkan ke dalam ServerWeatherForecaster, yang berguna untuk memanggil CallApiForUserAsync guna mendapatkan data cuaca dari API web eksternal (proyek MinimalApiJwt).
  • Ketika komponen Weather dirender pada klien, komponen menggunakan implementasi layanan ClientWeatherForecaster, yang telah dikonfigurasi sebelumnya HttpClient (di file proyek Program klien) untuk melakukan panggilan API web ke API Minimal proyek /weather-forecast server untuk data cuaca. Titik akhir API Minimal mendapatkan token akses untuk pengguna dengan memanggil GetAccessTokenForUserAsync. Seiring dengan cakupan yang benar, panggilan proksi terbalik dilakukan ke API web eksternal (MinimalApiJwt proyek) untuk mendapatkan dan mengembalikan data cuaca ke klien untuk dirender oleh komponen.

Prerequisites

Aspire memerlukan Visual Studio versi 17.10 atau yang lebih baru.

Selain itu, lihat bagian Prasyarat dari Quickstart: Bangun solusi pertama Aspire Anda.

Solusi sampel

Solusi sampel terdiri dari proyek-proyek berikut:

• Aspire:
  • Aspire.AppHost: Digunakan untuk mengelola masalah orkestrasi tingkat tinggi aplikasi.
  • Aspire.ServiceDefaults: Berisi konfigurasi aplikasi default Aspire yang dapat diperluas dan disesuaikan sesuai kebutuhan.
• MinimalApiJwt: API web backend, berisi contoh titik akhir API Minimal untuk data cuaca.
• BlazorWebAppEntra: Proyek sisi server dari Blazor Web App.
• BlazorWebAppEntra.Client: Proyek sisi klien dari Blazor Web App.

Akses sampel melalui folder versi terbaru di repositori sampel Blazor dengan tautan berikut. Sampel berada di folder BlazorWebAppEntraBff untuk .NET 9 atau yang lebih baru.

Menampilkan atau mengunduh kode sampel (cara mengunduh)

Pendaftaran aplikasi ID Microsoft Entra

Sebaiknya gunakan pendaftaran terpisah untuk aplikasi dan API web, bahkan ketika aplikasi dan API web berada dalam solusi yang sama. Panduan berikut ini adalah untuk BlazorWebAppEntra aplikasi dan MinimalApiJwt API web dari contoh solusi, tetapi panduan yang sama umumnya berlaku untuk pendaftaran berbasis Entra untuk aplikasi dan API web.

Daftarkan API web (MinimalApiJwt) terlebih dahulu sehingga Anda kemudian dapat memberikan akses ke API web saat mendaftarkan aplikasi. ID penyewa dan ID klien API web digunakan untuk mengonfigurasi API web di dalam file Program. Setelah mendaftarkan API web, ekspos API web di Registrasi Aplikasi> Mengekspos API dengan nama cakupan Weather.Get. Rekam URI ID Aplikasi untuk digunakan dalam konfigurasi aplikasi.

Selanjutnya, daftarkan aplikasi (BlazorWebAppEntra) dengan konfigurasi platform Web dengan dua entri di bawah URI Pengalihan: https://localhost/signin-oidc dan https://localhost/signout-callback-oidc (port tidak diperlukan pada URI ini). ID penyewa, domain penyewa, dan ID klien aplikasi, bersama dengan alamat dasar API web, URI ID Aplikasi, dan nama cakupan cuaca, digunakan untuk mengonfigurasi aplikasi dalam filenya appsettings.json . Berikan izin API untuk mengakses API web di pendaftaran aplikasi>Izin API. Jika spesifikasi keamanan aplikasi memanggilnya, Anda dapat memberikan persetujuan admin bagi organisasi untuk mengakses API web. Pengguna dan grup yang berwenang ditetapkan ke pendaftaran aplikasi di Pendaftaran aplikasi>aplikasi Enterprise.

Pada konfigurasi pendaftaran aplikasi di portal Entra atau Azure pemberian implisit dan alur hibrid, jangan pilih kotak centang agar titik akhir otorisasi tidak mengembalikan token Akses atau token ID. Handler OpenID Connect secara otomatis meminta token yang sesuai menggunakan kode yang dikembalikan dari titik akhir otorisasi.

Buat rahasia klien di pendaftaran aplikasi di portal Entra atau Microsoft Azure (Kelola>Sertifikat & rahasia>Rahasia klien baru). Simpan rahasia klien Value untuk digunakan pada bagian selanjutnya.

Panduan konfigurasi Entra tambahan untuk pengaturan tertentu disediakan nanti di artikel ini.

Aspire Proyek

Untuk informasi lebih lanjut tentang penggunaan dan detail tentang proyek dan aplikasi sampel, lihat dokumentasi .

Konfirmasikan bahwa Anda telah memenuhi prasyarat untuk Aspire. Untuk informasi selengkapnya, lihat bagian Prasyarat pada Panduan Memulai: Membangun solusi pertama Aspire Anda.

Aplikasi sampel hanya mengonfigurasi profil peluncuran HTTP yang tidak aman (http) untuk digunakan selama pengujian pengembangan. Untuk informasi selengkapnya, termasuk contoh profil pengaturan peluncuran yang tidak aman dan aman, lihat Mengizinkan transportasi yang tidak aman dalam Aspire (Aspire dokumentasi).

Proyek Blazor Web App server-side (BlazorWebAppEntra)

Proyek BlazorWebAppEntra ini adalah proyek sisi server dari Blazor Web App.

Proyek Blazor Web App sisi klien (BlazorWebAppEntra.Client)

Proyek BlazorWebAppEntra.Client ini adalah proyek sisi klien dari Blazor Web App.

Jika pengguna perlu masuk atau keluar selama penyajian sisi klien, pemuatan ulang halaman penuh dimulai.

Proyek backend untuk API web (MinimalApiJwt)

Proyek MinimalApiJwt ini adalah API web backend untuk beberapa proyek frontend. Proyek mengonfigurasi titik akhir API Minimal untuk data cuaca. Permintaan dari Blazor Web App proyek sisi server (BlazorWebAppEntra) diproksikan ke MinimalApiJwt proyek.

File MinimalApiJwt.http dapat digunakan untuk menguji permintaan data cuaca. Perhatikan bahwa MinimalApiJwt proyek harus berjalan untuk menguji titik akhir, dan titik akhir dikodekan secara permanen ke dalam file. Untuk informasi selengkapnya, lihat Menggunakan file .http di Visual Studio 2022.

Proyek ini mencakup paket dan konfigurasi untuk menghasilkan dokumen OpenAPI.

Titik akhir data prakiraan cuaca yang aman ada di file proyek Program :

app.MapGet("/weather-forecast", () =>
{
    var forecast = Enumerable.Range(1, 5).Select(index =>
        new WeatherForecast
        (
            DateOnly.FromDateTime(DateTime.Now.AddDays(index)),
            Random.Shared.Next(-20, 55),
            summaries[Random.Shared.Next(summaries.Length)]
        ))
        .ToArray();
    return forecast;
}).RequireAuthorization();

Metode RequireAuthorization ekstensi memerlukan otorisasi untuk definisi rute. Untuk pengontrol apa pun yang Anda tambahkan ke proyek, tambahkan [Authorize] atribut ke pengontrol atau tindakan.

Konfigurasikan proyek API web backend (MinimalApiJwt)

Konfigurasikan proyek MinimalApiJwt dalam JwtBearerOptions panggilan AddJwtBearer di file Program proyek.

Untuk pendaftaran aplikasi API web, cakupan dikonfigurasi Weather.Get di portal Entra atau Microsoft Azure di Mengekspos API.

Authority menetapkan otoritas untuk melakukan panggilan OIDC.

jwtOptions.Authority = "{AUTHORITY}";

Contoh berikut menggunakan ID Penyewa aaaabbbb-0000-cccc-1111-dddd2222eeee dan nama direktori contoso.

Jika aplikasi terdaftar di tenant ME-ID, otoritas harus cocok dengan issuer (iss) JWT yang dikembalikan oleh penyedia identitas.

jwtOptions.Authority = "https://sts.windows.net/aaaabbbb-0000-cccc-1111-dddd2222eeee";

Jika aplikasi terdaftar di penyewa Microsoft Entra External ID:

jwtOptions.Authority = "https://contoso.ciamlogin.com/aaaabbbb-0000-cccc-1111-dddd2222eeee/v2.0";

Jika aplikasi terdaftar di tenant AAD B2C:

jwtOptions.Authority = "https://login.microsoftonline.com/aaaabbbb-0000-cccc-1111-dddd2222eeee/v2.0";

Note

Azure Active Directory B2C tidak lagi tersedia sebagai layanan untuk pelanggan baru per 1 Mei 2025. Penyewa AAD B2C didukung untuk pelanggan yang memiliki akun yang dibuat sebelum 1 Mei 2025, dan dukungan ini berlanjut hingga tahun 2030. Untuk informasi selengkapnya, lihat Azure AD B2C: Tanya jawab umum (FAQ).

Audience mengatur Audiens untuk setiap token akses JWT yang diterima.

jwtOptions.Audience = "{AUDIENCE}";

Sesuaikan nilai hanya pada jalur URI ID Aplikasi yang telah dikonfigurasi saat menambahkan cakupan Weather.Get di bawah bagian Mengekspos sebuah API di portal Entra atau Azure. Jangan sertakan nama cakupan, "Weather.Get," dalam nilai .

Contoh berikut menggunakan Id Aplikasi (Klien) dari 11112222-bbbb-3333-cccc-4444dddd5555. Contoh ketiga menggunakan domain penyewa .contoso.onmicrosoft.com

contoh penyewa ME-ID:

jwtOptions.Audience = "api://11112222-bbbb-3333-cccc-4444dddd5555";

Microsoft Entra External ID tenant:

jwtOptions.Audience = "11112222-bbbb-3333-cccc-4444dddd5555";

Contoh penyewa AAD B2C:

jwtOptions.Audience = "https://contoso.onmicrosoft.com/11112222-bbbb-3333-cccc-4444dddd5555";

Konfigurasikan proyek server (BlazorWebAppEntra)

AddMicrosoftIdentityWebApp dari Microsoft Identity Web (Microsoft.Identity.Web paket NuGet, dokumentasi API) dikonfigurasi pada file BlazorWebAppEntra proyek Program.

Dapatkan ID aplikasi (klien), domain penyewa (penerbit), dan ID direktori (penyewa) dari pendaftaran aplikasi di portal Entra atau Microsoft Azure. URI ID Aplikasi didapatkan dari pendaftaran API web untuk ruang lingkup Weather.Get. Jangan sertakan nama cakupan saat mengambil URI ID Aplikasi dari portal.

Konfigurasi autentikasi tergantung pada jenis penyewa:

• konfigurasi penyewa ME-ID
• Konfigurasi ID Eksternal Microsoft Entra

konfigurasi penyewa ME-ID

Bagian ini berlaku untuk aplikasi yang terdaftar di id Microsoft Entra atau penyewa Azure AAD B2C.

Dalam file BlazorWebAppEntra proyek Program, berikan nilai untuk placeholder berikut dalam konfigurasi Microsoft Identity Web.

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(msIdentityOptions =>
    {
        msIdentityOptions.CallbackPath = "/signin-oidc";
        msIdentityOptions.ClientId = "{CLIENT ID (BLAZOR APP)}";
        msIdentityOptions.Domain = "{DIRECTORY NAME}.onmicrosoft.com";
        msIdentityOptions.Instance = "https://login.microsoftonline.com/";
        msIdentityOptions.ResponseType = "code";
        msIdentityOptions.TenantId = "{TENANT ID}";
    })
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddDownstreamApi("DownstreamApi", configOptions =>
    {
        configOptions.BaseUrl = "{BASE ADDRESS}";
        configOptions.Scopes = ["{APP ID URI}/Weather.Get"];
    })
    .AddDistributedTokenCaches();

Berikan cakupan API hilir yang sama ke transformator permintaan:

List<string> scopes = ["{APP ID URI}/Weather.Get"];

Tempat penampung dalam konfigurasi sebelumnya:

• {CLIENT ID (BLAZOR APP)}: ID aplikasi (klien).
• {DIRECTORY NAME}: Nama direktori domain penyewa (penerbit).
• {TENANT ID}: ID direktori (penyewa atau tenant).
• {BASE ADDRESS}: Alamat dasar API web.
• {APP ID URI}: URI ID Aplikasi untuk cakupan API web. Salah satu format berikut digunakan, di mana {CLIENT ID (WEB API)} tempat penampung adalah Id Klien dari pendaftaran Entra API web, dan {DIRECTORY NAME} tempat penampung adalah nama direktori domain penyewa (penerbit) (misalnya: contoso).
  • format penyewa ME-ID: api://{CLIENT ID (WEB API)}
  • Format penyewa B2C: https://{DIRECTORY NAME}.onmicrosoft.com/{CLIENT ID (WEB API)}

Example:

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(msIdentityOptions =>
    {
        msIdentityOptions.CallbackPath = "/signin-oidc";
        msIdentityOptions.ClientId = "00001111-aaaa-2222-bbbb-3333cccc4444";
        msIdentityOptions.Domain = "contoso.onmicrosoft.com";
        msIdentityOptions.Instance = "https://login.microsoftonline.com/";
        msIdentityOptions.ResponseType = "code";
        msIdentityOptions.TenantId = "aaaabbbb-0000-cccc-1111-dddd2222eeee";
    })
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddDownstreamApi("DownstreamApi", configOptions =>
    {
        configOptions.BaseUrl = "https://localhost:7277";
        configOptions.Scopes = 
            ["api://11112222-bbbb-3333-cccc-4444dddd5555/Weather.Get"];
    })
    .AddDistributedTokenCaches();

Example:

List<string> scopes = ["api://11112222-bbbb-3333-cccc-4444dddd5555/Weather.Get"];

Konfigurasi Eksternal ID Microsoft Entra

Bagian ini berlaku untuk aplikasi yang terdaftar di penyewa MICROSOFT Entra External ID.

Dalam file BlazorWebAppEntra proyek Program, berikan nilai untuk placeholder berikut dalam konfigurasi Microsoft Identity Web.

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(msIdentityOptions =>
    {
        msIdentityOptions.CallbackPath = "/signin-oidc";
        msIdentityOptions.Authority = "https://{DIRECTORY NAME}.ciamlogin.com/{TENANT ID}/v2.0";
        msIdentityOptions.ClientId = "{CLIENT ID (BLAZOR APP)}";
        msIdentityOptions.ResponseType = "code";
    })
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddDownstreamApi("DownstreamApi", configOptions =>
    {
        configOptions.BaseUrl = "{BASE ADDRESS}";
        configOptions.Scopes = ["{APP ID URI}/Weather.Get"];
    })
    .AddDistributedTokenCaches();

Berikan cakupan API hilir yang sama ke transformator permintaan:

List<string> scopes = ["{APP ID URI}/Weather.Get"];

Tempat penampung dalam konfigurasi sebelumnya:

• {DIRECTORY NAME}: Nama direktori domain penyewa (penerbit).
• {CLIENT ID (BLAZOR APP)}: ID aplikasi (klien).
• {BASE ADDRESS}: Alamat dasar API web.
• {APP ID URI}: URI ID Aplikasi untuk cakupan API web. Salah satu format berikut digunakan, di mana {CLIENT ID (WEB API)} tempat penampung adalah Id Klien dari pendaftaran Entra API web, dan {DIRECTORY NAME} tempat penampung adalah nama direktori domain penyewa (penerbit) (misalnya: contoso).
  • ME-ID atau format penyewa Microsoft Entra External ID: api://{CLIENT ID (WEB API)}
  • Format penyewa B2C: https://{DIRECTORY NAME}.onmicrosoft.com/{CLIENT ID (WEB API)}

Example:

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApp(msIdentityOptions =>
    {
        msIdentityOptions.CallbackPath = "/signin-oidc";
        msIdentityOptions.Authority = "https://contoso.ciamlogin.com/aaaabbbb-0000-cccc-1111-dddd2222eeee/v2.0";
        msIdentityOptions.ClientId = "00001111-aaaa-2222-bbbb-3333cccc4444";
        msIdentityOptions.ResponseType = "code";
    })
    .EnableTokenAcquisitionToCallDownstreamApi()
    .AddDownstreamApi("DownstreamApi", configOptions =>
    {
        configOptions.BaseUrl = "https://localhost:7277";
        configOptions.Scopes = ["api://11112222-bbbb-3333-cccc-4444dddd5555/Weather.Get"];
    })
    .AddDistributedTokenCaches();

Example:

List<string> scopes = ["api://11112222-bbbb-3333-cccc-4444dddd5555/Weather.Get"];

Warning

Aplikasi produksi harus menggunakan penyedia cache token terdistribusi produksi. Jika tidak, aplikasi mungkin memiliki performa yang buruk dalam beberapa skenario. Untuk informasi selengkapnya, lihat bagian Menggunakan penyedia cache token terdistribusi produksi .

Jalur panggilan balik (CallbackPath) harus cocok dengan URI pengalihan (jalur panggilan balik masuk) yang dikonfigurasi saat mendaftarkan aplikasi di Entra atau portal Azure. Jalur dikonfigurasi di bilah Autentikasi pendaftaran aplikasi. Nilai default dari CallbackPath adalah /signin-oidc untuk URI pengalihan terdaftar https://localhost/signin-oidc (port tidak diperlukan).

SignedOutCallbackPath adalah jalur permintaan yang dicegat oleh handler OpenID Connect dalam jalur dasar aplikasi, tempat agen pengguna pertama kali dikembalikan setelah keluar dari Entra. Aplikasi sampel tidak menetapkan nilai untuk jalur karena nilai default "/signout-callback-oidc" digunakan. Setelah mencegat permintaan, handler OpenID Connect mengalihkan ke SignedOutRedirectUri atau RedirectUri, jika ditentukan.

Warning

Jangan menyimpan rahasia aplikasi, string koneksi, kredensial, kata sandi, nomor identifikasi pribadi (PIN), kode C#/.NET privat, atau kunci/token privat dalam kode sisi klien, yang selalu tidak aman. Di lingkungan pengujian/penahapan dan produksi, kode sisi Blazor server dan API web harus menggunakan alur autentikasi aman yang menghindari mempertahankan kredensial dalam kode proyek atau file konfigurasi. Di luar pengujian pengembangan lokal, sebaiknya hindari penggunaan variabel lingkungan untuk menyimpan data sensitif, karena variabel lingkungan bukanlah pendekatan yang paling aman. Untuk pengujian pengembangan lokal, alat Secret Manager direkomendasikan untuk mengamankan data sensitif. Untuk informasi selengkapnya, lihat Mempertahankan data dan kredensial sensitif dengan aman.

Menetapkan rahasia klien

Bagian ini hanya berlaku untuk proyek server dari Blazor Web App.

Gunakan salah satu atau kedua pendekatan berikut untuk menyediakan rahasia klien ke aplikasi:

• Alat Secret Manager: Alat Secret Manager menyimpan data pribadi di komputer lokal dan hanya digunakan selama pengembangan lokal.
• Azure Key Vault: Anda dapat menyimpan rahasia klien di brankas kunci untuk digunakan di lingkungan apa pun, termasuk untuk lingkungan Pengembangan saat bekerja secara lokal. Beberapa pengembang lebih suka menggunakan penyimpanan kunci untuk penahapan serta penyebaran produksi dan menggunakan alat Secret Manager untuk pengembangan lokal.

Kami sangat menyarankan Agar Anda menghindari penyimpanan rahasia klien dalam kode proyek atau file konfigurasi. Gunakan alur autentikasi aman, seperti salah satu atau kedua pendekatan di bagian ini.

Alat Secret Manager

Alat Secret Manager dapat menyimpan rahasia klien aplikasi server di bawah kunci AzureAd:ClientSecretkonfigurasi .

Aplikasi Blazor server belum diinisialisasi untuk alat Secret Manager. Gunakan shell perintah, seperti shell perintah Developer PowerShell di Visual Studio, untuk menjalankan perintah berikut. Sebelum menjalankan perintah, ubah direktori dengan cd perintah ke direktori proyek server. Perintah menetapkan pengidentifikasi rahasia pengguna (<UserSecretsId>) dalam file proyek aplikasi server, yang digunakan secara internal oleh alat untuk melacak rahasia untuk aplikasi:

dotnet user-secrets init

Jalankan perintah berikut untuk mengatur rahasia klien. {SECRET} placeholder adalah rahasia klien yang diperoleh dari pendaftaran aplikasi Entra.

dotnet user-secrets set "AzureAd:ClientSecret" "{SECRET}"

Jika menggunakan Visual Studio, Anda dapat mengonfirmasi bahwa rahasia diatur dengan mengklik kanan proyek server di Penjelajah Solusi dan memilih Kelola Rahasia Pengguna.

Azure Key Vault

Azure Key Vault menyediakan pendekatan yang aman untuk memberikan rahasia klien aplikasi ke aplikasi.

Untuk membuat Brankas Kunci dan mengatur rahasia klien, lihat Tentang rahasia Azure Key Vault (dokumentasi Azure), yang menghubungkan sumber daya untuk mulai menggunakan Azure Key Vault. Untuk menerapkan kode di bagian ini, catat URI brankas kunci dan nama rahasia dari Azure saat Anda membuat brankas kunci dan rahasia. Untuk contoh di bagian ini, nama rahasianya adalah "BlazorWebAppEntraClientSecret."

Saat membuat brankas kunci di portal Entra atau Microsoft Azure:

• Konfigurasikan brankas kunci untuk menggunakan kontrol akses berbasis peran Azure (RABC). Jika Anda tidak beroperasi di Azure Virtual Network, termasuk untuk pengembangan dan pengujian lokal, konfirmasikan bahwa akses publik pada langkah Jaringandiaktifkan (diperiksa). Mengaktifkan akses publik hanya mengekspos titik akhir brankas kunci. Akun terautentikasi masih diperlukan untuk akses.

• Buat Azure Managed Identity (atau tambahkan peran ke Managed Identity yang ada yang ingin Anda gunakan) dengan peran Pengguna Rahasia Key Vault. Tetapkan Manajer Identity ke Azure App Service yang menghosting penyebaran: Pengaturan>Identity>Pengguna yang Ditugaskan>Tambahkan.

  Note

  Jika Anda juga berencana menjalankan aplikasi secara lokal dengan pengguna yang berwenang untuk akses brankas kunci menggunakan Azure CLI atau Autentikasi Layanan Azure Visual Studio, tambahkan akun pengguna Azure pengembang Anda di Access Control (IAM) dengan peran Pengguna Rahasia Key Vault . Jika Anda ingin menggunakan Azure CLI melalui Visual Studio, jalankan az login perintah dari panel Developer PowerShell dan ikuti perintah untuk mengautentikasi dengan penyewa.

Untuk menerapkan kode di bagian ini, rekam URI brankas kunci (misalnya: "https://contoso.vault.azure.net/", garis miring di akhir diperlukan) dan nama rahasia (misalnya: "BlazorWebAppEntraClientSecret") dari Azure saat Anda membuat brankas kunci dan rahasia.

Important

Rahasia di key vault dibuat dengan tanggal kedaluwarsa. Pastikan untuk melacak kapan rahasia di Azure Key Vault akan kedaluwarsa dan membuat secret baru untuk aplikasi sebelum tanggal tersebut berlalu.

Tambahkan kelas AzureHelper berikut ke proyek server. Metode GetKeyVaultSecret mengambil kembali rahasia dari brankas kunci. Sesuaikan namespace (BlazorSample.Helpers) agar sesuai dengan skema namespace proyek Anda.

Helpers/AzureHelper.cs:

using Azure.Core;
using Azure.Security.KeyVault.Secrets;

namespace BlazorWebAppEntra.Helpers;

public static class AzureHelper
{
    public static string GetKeyVaultSecret(string vaultUri, 
        TokenCredential credential, string secretName)
    {
        var client = new SecretClient(new Uri(vaultUri), credential);
        var secret = client.GetSecretAsync(secretName).Result;

        return secret.Value.Value;
    }
}

Note

Contoh sebelumnya menggunakan DefaultAzureCredential untuk menyederhanakan autentikasi saat mengembangkan aplikasi yang disebarkan ke Azure dengan menggabungkan kredensial yang digunakan di lingkungan hosting Azure dengan kredensial yang digunakan dalam pengembangan lokal. Ketika pindah ke produksi, alternatif adalah pilihan yang lebih baik, seperti ManagedIdentityCredential. Untuk informasi selengkapnya, lihat Mengautentikasi aplikasi .NET yang dihosting Azure ke sumber daya Azure menggunakan identitas terkelola yang ditetapkan sistem.

Di mana layanan terdaftar dalam file proyek Program server, dapatkan dan terapkan rahasia klien menggunakan kode berikut:

TokenCredential? credential;

if (builder.Environment.IsProduction())
{
    credential = new ManagedIdentityCredential("{MANAGED IDENTITY CLIENT ID}");
}
else
{
    // Local development and testing only
    DefaultAzureCredentialOptions options = new()
    {
        // Specify the tenant ID to use the dev credentials when running the app locally
        // in Visual Studio.
        VisualStudioTenantId = "{TENANT ID}",
        SharedTokenCacheTenantId = "{TENANT ID}"
    };

    credential = new DefaultAzureCredential(options);
}

Di mana MicrosoftIdentityOptions diatur, panggil GetKeyVaultSecret untuk menerima dan menetapkan rahasia klien aplikasi:

msIdentityOptions.ClientSecret = AzureHelper.GetKeyVaultSecret("{VAULT URI}", 
    credential, "{SECRET NAME}");

{MANAGED IDENTITY CLIENT ID}: ID Klien Terkelola Azure Identity (GUID).

{TENANT ID}: ID direktori (penyewa atau tenant). Contoh: aaaabbbb-0000-cccc-1111-dddd2222eeee

{VAULT URI}: URI kubah kunci. Sertakan garis miring di akhir URI. Contoh: https://contoso.vault.azure.net/

{SECRET NAME}: Nama rahasia. Contoh: BlazorWebAppEntraClientSecret

Konfigurasi digunakan untuk memfasilitasi penyediaan brankas kunci khusus dan nama rahasia berdasarkan file konfigurasi lingkungan aplikasi. Misalnya, Anda dapat menyediakan nilai konfigurasi yang berbeda untuk appsettings.Development.json dalam pengembangan, appsettings.Staging.json saat penahapan, dan appsettings.Production.json untuk penyebaran produksi. Untuk informasi selengkapnya, lihat konfigurasi ASP.NET CoreBlazor.

Hanya melakukan serialisasi klaim nama dan klaim peran

Dalam file Program, setiap klaim dijadikan serial dengan mengatur SerializeAllClaims ke true. Jika Anda hanya ingin nama dan klaim peran diserialisasikan untuk CSR, hapus opsi tersebut atau atur ke false.

Pasok konfigurasi dengan penyedia konfigurasi JSON (pengaturan aplikasi)

Contoh proyek solusi mengonfigurasi autentikasi penerima untuk Microsoft Identity Web dan JWT dalam berkas mereka Program untuk memungkinkan penemuan pengaturan konfigurasi menggunakan pelengkapan otomatis C#. Aplikasi profesional biasanya menggunakan penyedia konfigurasi untuk mengonfigurasi opsi OIDC, seperti penyedia konfigurasi JSON default. Penyedia konfigurasi JSON memuat konfigurasi dari file pengaturan aplikasi appsettings.json/appsettings.{ENVIRONMENT}.json, di mana {ENVIRONMENT} tempat penampung adalah lingkungan berjalan aplikasi. Ikuti panduan di bagian ini untuk menggunakan file pengaturan aplikasi untuk konfigurasi.

Dalam file pengaturan aplikasi (appsettings.json) BlazorWebAppEntra proyek, tambahkan konfigurasi JSON berikut:

{
  "AzureAd": {
    "CallbackPath": "/signin-oidc",
    "ClientId": "{CLIENT ID (BLAZOR APP)}",
    "Domain": "{DIRECTORY NAME}.onmicrosoft.com",
    "Instance": "https://login.microsoftonline.com/",
    "ResponseType": "code",
    "TenantId": "{TENANT ID}"
  },
  "DownstreamApi": {
    "BaseUrl": "{BASE ADDRESS}",
    "Scopes": ["{APP ID URI}/Weather.Get"]
  }
}

Perbarui placeholder dalam konfigurasi sebelumnya agar sesuai dengan nilai yang digunakan aplikasi dalam file Program.

• {CLIENT ID (BLAZOR APP)}: ID aplikasi (klien).
• {DIRECTORY NAME}: Nama direktori domain penyewa (penerbit).
• {TENANT ID}: ID direktori (penyewa atau tenant).
• {BASE ADDRESS}: Alamat dasar API web.
• {APP ID URI}: URI ID Aplikasi untuk cakupan API web. Salah satu format berikut digunakan, di mana {CLIENT ID (WEB API)} tempat penampung adalah Id Klien dari pendaftaran Entra API web, dan {DIRECTORY NAME} tempat penampung adalah nama direktori domain penyewa (penerbit) (misalnya: contoso).
  • format penyewa ME-ID: api://{CLIENT ID (WEB API)}
  • Format penyewa B2C: https://{DIRECTORY NAME}.onmicrosoft.com/{CLIENT ID (WEB API)}

Example:

"AzureAd": {
  "CallbackPath": "/signin-oidc",
  "ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
  "Domain": "contoso.onmicrosoft.com",
  "Instance": "https://login.microsoftonline.com/",
  "ResponseType": "code",
  "TenantId": "aaaabbbb-0000-cccc-1111-dddd2222eeee"
},
"DownstreamApi": {
  "BaseUrl": "https://localhost:7277",
  "Scopes": ["api://11112222-bbbb-3333-cccc-4444dddd5555/Weather.Get"]
}

Perbarui nilai lain dalam konfigurasi sebelumnya agar sesuai dengan nilai kustom/non-default yang digunakan dalam file Program.

Konfigurasi secara otomatis diambil oleh pembuat autentikasi.

Buat perubahan berikut dalam Program file:

builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
-   .AddMicrosoftIdentityWebApp(msIdentityOptions =>
-   {
-       msIdentityOptions.CallbackPath = "...";
-       msIdentityOptions.ClientId = "...";
-       msIdentityOptions.Domain = "...";
-       msIdentityOptions.Instance = "...";
-       msIdentityOptions.ResponseType = "...";
-       msIdentityOptions.TenantId = "...";
-   })
+   .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureAd"))
    .EnableTokenAcquisitionToCallDownstreamApi()
-   .AddDownstreamApi("DownstreamApi", configOptions =>
-   {
-       configOptions.BaseUrl = "...";
-       configOptions.Scopes = ["..."];
-   })
+   .AddDownstreamApi("DownstreamApi", builder.Configuration.GetSection("DownstreamApi"))
    .AddDistributedTokenCaches();

- List<string> scopes = ["{APP ID URI}/Weather.Get"];
- var accessToken = await tokenAcquisition.GetAccessTokenForUserAsync(scopes);
+ var configuration = transformContext.HttpContext.RequestServices.GetRequiredService<IConfiguration>();
+ var scopes = configuration.GetSection("DownstreamApi:Scopes").Get<IEnumerable<string>>();
+ var accessToken = await tokenAcquisition.GetAccessTokenForUserAsync(scopes ??
+     throw new InvalidOperationException("No downstream API scopes!"));

Note

Aplikasi produksi harus menggunakan penyedia cache token terdistribusi produksi. Jika tidak, aplikasi mungkin memiliki performa yang buruk dalam beberapa skenario. Untuk informasi selengkapnya, lihat bagian Menggunakan penyedia cache token terdistribusi produksi .

MinimalApiJwt Dalam proyek, tambahkan konfigurasi pengaturan aplikasi berikut ke appsettings.json file:

"Authentication": {
  "Schemes": {
    "Bearer": {
      "Authority": "https://sts.windows.net/{TENANT ID (WEB API)}",
      "ValidAudiences": ["{APP ID URI (WEB API)}"]
    }
  }
},

Perbarui placeholder dalam konfigurasi sebelumnya agar sesuai dengan nilai yang digunakan aplikasi dalam file Program.

• {TENANT ID (WEB API)}: ID Penyewa API web.
• {APP ID URI (WEB API)}: URI ID Aplikasi dari API web.

Format otoritas mengadopsi pola berikut:

• Jenis penyewa ME-ID: https://sts.windows.net/{TENANT ID}
• ID Eksternal Microsoft Entra: https://{DIRECTORY NAME}.ciamlogin.com/{TENANT ID}/v2.0
• Jenis penyewa B2C: https://login.microsoftonline.com/{TENANT ID}/v2.0

Format audiens mengadopsi pola berikut ({CLIENT ID} adalah Id Klien dari API web; {DIRECTORY NAME} adalah nama direktori, misalnya, contoso):

• Jenis penyewa ME-ID: api://{CLIENT ID}
• ID Eksternal Microsoft Entra: {CLIENT ID}
• Jenis penyewa B2C: https://{DIRECTORY NAME}.onmicrosoft.com/{CLIENT ID}

Konfigurasi secara otomatis diambil oleh pembangun autentikasi pembawa JWT.

Hapus baris berikut dari Program file:

- jwtOptions.Authority = "...";
- jwtOptions.Audience = "...";

Untuk informasi selengkapnya tentang konfigurasi, lihat sumber daya berikut ini:

• Konfigurasi pada di ASP.NET Core
• Konfigurasi ASP.NET Core Blazor

Menggunakan penyedia cache token terdistribusi produksi

Token cache terdistribusi dalam memori dibuat saat memanggil AddDistributedTokenCaches untuk memastikan bahwa ada implementasi dasar yang tersedia untuk penyimpanan token terdistribusi.

Aplikasi web produksi dan API web harus menggunakan cache token terdistribusi produksi (misalnya: Redis, Microsoft SQL Server, Microsoft Azure Cosmos DB).

Note

Untuk pengembangan dan pengujian lokal pada satu komputer, Anda dapat menggunakan cache token dalam memori alih-alih cache token terdistribusi:

builder.Services.AddInMemoryTokenCaches();

Kemudian dalam periode pengembangan dan pengujian, adopsi penyedia cache token terdistribusi produksi.

AddDistributedMemoryCache menambahkan implementasi IDistributedCache default untuk menyimpan item cache di memori, yang digunakan oleh Microsoft Identity Web untuk penyimpanan cache token.

Cache token terdistribusi dikonfigurasi oleh MsalDistributedTokenCacheAdapterOptions:

• Untuk tujuan penelusuran kesalahan dalam pengembangan, Anda dapat menonaktifkan cache L1 dengan mengatur DisableL1Cache ke true. Pastikan untuk mengatur ulang kembali ke false untuk produksi.
• Atur ukuran maksimum cache L1 Anda dengan L1CacheOptions.SizeLimit untuk mencegah cache overrunning memori server. Nilai defaultnya adalah 500 MB.
• Dalam pengembangan untuk tujuan penelusuran kesalahan, Anda dapat menonaktifkan enkripsi token saat tidak aktif dengan mengatur Encrypt ke false, yang merupakan nilai default. Pastikan untuk mengatur ulang kembali ke true untuk produksi.
• Atur pengeluaran token dari cache dengan SlidingExpiration. Nilai defaultnya adalah 1 jam.
• Untuk informasi selengkapnya, termasuk panduan tentang panggilan balik untuk kegagalan cache L2 (OnL2CacheFailure) dan penulisan cache L2 asinkron (EnableAsyncL2Write), lihat MsalDistributedTokenCacheAdapterOptions dan Serialisasi cache token: Cache token terdistribusi.

builder.Services.AddDistributedMemoryCache();

builder.Services.Configure<MsalDistributedTokenCacheAdapterOptions>(
    options => 
    {
      // The following lines that are commented out reflect
      // default values. We recommend overriding the default
      // value of Encrypt to encrypt tokens at rest.

      //options.DisableL1Cache = false;
      //options.L1CacheOptions.SizeLimit = 500 * 1024 * 1024;
      options.Encrypt = true;
      //options.SlidingExpiration = TimeSpan.FromHours(1);
    });

AddDistributedMemoryCache memerlukan referensi paket ke Microsoft.Extensions.Caching.Memory paket NuGet.

Note

Untuk panduan tentang menambahkan paket ke aplikasi .NET, lihat artikel di bagian Menginstal dan mengelola paket di Alur kerja konsumsi paket (dokumentasi NuGet). Konfirmasikan versi paket yang benar di NuGet.org.

Untuk mengonfigurasi penyedia cache terdistribusi untuk produksi, lihat Cache terdistribusi di ASP.NET Core.

Warning

Selalu ganti cache token terdistribusi dalam memori dengan penyedia cache token nyata saat menyebarkan aplikasi ke lingkungan produksi. Jika Anda gagal mengadopsi penyedia cache token terdistribusi produksi, aplikasi mungkin mengalami penurunan performa secara signifikan.

Untuk informasi selengkapnya, lihat Serialisasi cache token: Cache terdistribusi. Namun, contoh kode yang ditampilkan tidak berlaku untuk aplikasi ASP.NET Core, yang mengonfigurasi cache terdistribusi melalui AddDistributedMemoryCache, bukan AddDistributedTokenCache.

Gunakan cincin kunci Perlindungan Data bersama dalam produksi sehingga instans aplikasi di seluruh server di farm web dapat mendekripsi token saat MsalDistributedTokenCacheAdapterOptions.Encrypt diatur ke true.

Note

Untuk pengembangan awal dan pengujian lokal pada satu komputer, Anda dapat mengatur Encrypt ke false dan mengonfigurasi ring kunci Perlindungan Data bersama nanti.

options.Encrypt = false;

Kemudian dalam periode pengembangan dan pengujian, aktifkan enkripsi token dan adopsi cincin kunci Perlindungan Data bersama.

Contoh berikut menunjukkan cara menggunakan Azure Blob Storage dan Azure Key Vault (PersistKeysToAzureBlobStorage/ProtectKeysWithAzureKeyVault) untuk cincin kunci bersama. Konfigurasi layanan adalah skenario kasus dasar untuk tujuan demonstrasi. Sebelum menyebarkan aplikasi produksi, biasakan diri Anda dengan layanan Azure dan adopsi praktik terbaik menggunakan kumpulan dokumentasi khusus layanan Azure, yang ditautkan di akhir bagian ini.

Konfirmasikan keberadaan paket berikut dalam proyek Blazor Web Appserver dari :

• Azure.Extensions.AspNetCore.DataProtection.Blobs
• Azure.Extensions.AspNetCore.DataProtection.Keys

Note

Untuk panduan tentang menambahkan paket ke aplikasi .NET, lihat artikel di bagian Menginstal dan mengelola paket di Alur kerja konsumsi paket (dokumentasi NuGet). Konfirmasikan versi paket yang benar di NuGet.org.

Note

Sebelum melanjutkan langkah-langkah berikut, konfirmasikan bahwa aplikasi terdaftar di Microsoft Entra.

Kode berikut biasanya diterapkan pada saat yang sama saat penyedia cache token terdistribusi produksi diterapkan. Opsi lain, baik dalam Azure maupun di luar Azure, tersedia untuk mengelola kunci perlindungan data di beberapa instans aplikasi, tetapi aplikasi sampel menunjukkan cara menggunakan layanan Azure.

Konfigurasikan Azure Blob Storage untuk mempertahankan kunci perlindungan data. Ikuti panduan di Penyedia penyimpanan utama di ASP.NET Core.

Konfigurasikan Azure Key Vault untuk mengenkripsi kunci perlindungan data saat tidak aktif. Ikuti panduan dalam Mengonfigurasi ASP.NET Perlindungan Data Inti.

Gunakan kode berikut dalam Program file tempat layanan terdaftar:

TokenCredential? credential;

if (builder.Environment.IsProduction())
{
    credential = new ManagedIdentityCredential("{MANAGED IDENTITY CLIENT ID}");
}
else
{
    // Local development and testing only
    DefaultAzureCredentialOptions options = new()
    {
        // Specify the tenant ID to use the dev credentials when running the app locally
        // in Visual Studio.
        VisualStudioTenantId = "{TENANT ID}",
        SharedTokenCacheTenantId = "{TENANT ID}"
    };

    credential = new DefaultAzureCredential(options);
}

builder.Services.AddDataProtection()
    .SetApplicationName("BlazorWebAppEntra")
    .PersistKeysToAzureBlobStorage(new Uri("{BLOB URI}"), credential)
    .ProtectKeysWithAzureKeyVault(new Uri("{KEY IDENTIFIER}"), credential);

Anda dapat meneruskan nama aplikasi apa pun ke SetApplicationName. Cukup konfirmasikan bahwa semua penyebaran aplikasi menggunakan nilai yang sama.

{MANAGED IDENTITY CLIENT ID}: ID Klien Terkelola Azure Identity (GUID).

{TENANT ID}: ID Penyewa.

{BLOB URI}: URI penuh ke file kunci. URI dihasilkan oleh Azure Storage saat Anda membuat file kunci. Jangan gunakan SAS.

{KEY IDENTIFIER}: Pengidentifikasi kunci Azure Key Vault yang digunakan untuk enkripsi kunci. Kebijakan akses memungkinkan aplikasi mengakses brankas kunci dengan Getizin , Unwrap Key, dan Wrap Key . Versi kunci diperoleh dari kunci di portal Entra atau Microsoft Azure setelah dibuat. Jika Anda mengaktifkan rotasi otomatis kunci brankas kunci, pastikan Anda menggunakan pengidentifikasi kunci tanpa versi dalam konfigurasi brankas kunci aplikasi, di mana tidak ada GUID kunci yang ditempatkan di akhir pengidentifikasi (misalnya: https://contoso.vault.azure.net/keys/data-protection).

Note

Di lingkungan non-Produksi, contoh sebelumnya menggunakan DefaultAzureCredential untuk menyederhanakan autentikasi sambil mengembangkan aplikasi yang disebarkan ke Azure dengan menggabungkan kredensial yang digunakan di lingkungan hosting Azure dengan kredensial yang digunakan dalam pengembangan lokal. Untuk informasi selengkapnya, lihat Mengautentikasi aplikasi .NET yang dihosting Azure ke sumber daya Azure menggunakan identitas terkelola yang ditetapkan sistem.

Atau, Anda dapat mengonfigurasi aplikasi untuk menyediakan nilai dari file pengaturan aplikasi menggunakan Penyedia Konfigurasi JSON. Tambahkan yang berikut ini ke file pengaturan aplikasi:

"DistributedTokenCache": {
  "DisableL1Cache": false,
  "L1CacheSizeLimit": 524288000,
  "Encrypt": true,
  "SlidingExpirationInHours": 1
},
"DataProtection": {
  "BlobUri": "{BLOB URI}",
  "KeyIdentifier": "{KEY IDENTIFIER}"
}

Contoh DataProtection bagian:

"DataProtection": {
  "BlobUri": "https://contoso.blob.core.windows.net/data-protection/keys.xml",
  "KeyIdentifier": "https://contoso.vault.azure.net/keys/data-protection"
}

Note

Pengidentifikasi kunci dalam contoh sebelumnya tidak memiliki versi. Tidak ada versi kunci GUID di akhir pengidentifikasi. Ini sangat penting jika Anda memilih untuk mengonfigurasi rotasi kunci otomatis untuk kunci. Untuk informasi selengkapnya, lihat Mengonfigurasi rotasi otomatis kunci kriptografi di Azure Key Vault: Kebijakan rotasi kunci.

Buat perubahan berikut dalam Program file:

builder.Services.Configure<MsalDistributedTokenCacheAdapterOptions>(
    options =>
    {
+       var config = builder.Configuration.GetSection("DistributedTokenCache");

-       options.DisableL1Cache = false;
+       options.DisableL1Cache = config.GetValue<bool>("DisableL1Cache");

-       options.L1CacheOptions.SizeLimit = 500 * 1024 * 1024;
+       options.L1CacheOptions.SizeLimit = config.GetValue<long>("L1CacheSizeLimit");

-       options.Encrypt = true;
+       options.Encrypt = config.GetValue<bool>("Encrypt");

-       options.SlidingExpiration = TimeSpan.FromHours(1);
+       options.SlidingExpiration = 
+           TimeSpan.FromHours(config.GetValue<int>("SlidingExpirationInHours"));
    });

- builder.Services.AddDataProtection()
-     .SetApplicationName("BlazorWebAppEntra")
-     .PersistKeysToAzureBlobStorage(new Uri("{BLOB URI}"), credential)
-     .ProtectKeysWithAzureKeyVault(new Uri("{KEY IDENTIFIER}"), credential);

Tambahkan kode berikut di mana layanan dikonfigurasi dalam Program file:

var config = builder.Configuration.GetSection("DataProtection");

builder.Services.AddDataProtection()
    .SetApplicationName("BlazorWebAppEntra")
    .PersistKeysToAzureBlobStorage(
        new Uri(config.GetValue<string>("BlobUri") ??
        throw new Exception("Missing Blob URI")),
        credential)
    .ProtectKeysWithAzureKeyVault(
        new Uri(config.GetValue<string>("KeyIdentifier") ?? 
        throw new Exception("Missing Key Identifier")), 
        credential);

Untuk informasi selengkapnya tentang menggunakan cincin kunci Perlindungan Data bersama dan penyedia penyimpanan utama, lihat sumber daya berikut ini:

• Penyedia penyimpanan utama di ASP.NET Core
• Mengonfigurasi ASP.NET Core Data Protection
• Menggunakan Azure SDK untuk .NET di aplikasi ASP.NET Core
• Host ASP.NET Core di farm web: Perlindungan Data
• Mengonfigurasi ASP.NET Core Data Protection
• Penyedia penyimpanan utama di ASP.NET Core
• Dokumentasi Azure Key Vault
• Dokumentasi Azure Storage
• Menyediakan akses ke kunci Key Vault, sertifikat, dan rahasia dengan kontrol akses berbasis peran Azure

Awalan Destinasi Penerusan YARP

Penerus Blazor Web App YARP proyek server, tempat token akses pengguna dilampirkan ke MinimalApiJwt panggilan API web, menentukan awalan https://weatherapitujuan . Nilai ini cocok dengan nama proyek yang diteruskan AddProject ke Program dalam file Aspire.AppHost proyek.

Penerus dalam Blazor Web App proyek server (BlazorWebAppEntra):

app.MapForwarder("/weather-forecast", "https://weatherapi", transformBuilder =>
{
    ...
}).RequireAuthorization();

Nama proyek yang sesuai dalam file Program pada proyek App Host Aspire (Aspire.AppHost):

var weatherApi = builder.AddProject<Projects.MinimalApiJwt>("weatherapi");

Tidak perlu mengubah prefix tujuan penerus YARP saat memindahkan Blazor Web App ke lingkungan produksi. Paket Microsoft Identity Web Downstream API menggunakan URI dasar yang diteruskan melalui konfigurasi untuk melakukan panggilan API web dari ServerWeatherForecaster, bukan awalan tujuan penerus YARP. Dalam produksi, pengalih YARP hanya mengubah permintaan, menambahkan token akses pengguna.

Mengalihkan ke halaman beranda saat keluar

Komponen LogInOrOut (Layout/LogInOrOut.razor) mengatur bidang tersembunyi untuk URL pengembalian (ReturnUrl) ke URL saat ini (currentURL). Saat pengguna keluar dari aplikasi, IdP mengembalikan pengguna ke halaman tempat mereka keluar. Jika pengguna keluar dari halaman aman, mereka dikembalikan ke halaman aman yang sama dan dikirim kembali melalui proses autentikasi. Alur autentikasi ini wajar ketika pengguna perlu mengubah akun secara teratur.

Atau, gunakan komponen LogInOrOut berikut, yang tidak menyediakan URL pengembalian saat keluar.

Layout/LogInOrOut.razor:

<div class="nav-item px-3">
    <AuthorizeView>
        <Authorized>
            <form action="authentication/logout" method="post">
                <AntiforgeryToken />
                <button type="submit" class="nav-link">
                    <span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true">
                    </span> Logout
                </button>
            </form>
        </Authorized>
        <NotAuthorized>
            <a class="nav-link" href="authentication/login">
                <span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span>
                Login
            </a>
        </NotAuthorized>
    </AuthorizeView>
</div>

Keamanan data cuaca

Untuk informasi selengkapnya tentang cara aplikasi ini mengamankan data cuacanya, lihat Mengamankan data dengan Blazor Web Apppenyajian Otomatis Interaktif.

Troubleshoot

Logging

Aplikasi server adalah aplikasi ASP.NET Core standar. Lihat panduan pengelogan ASP.NET Core untuk mengaktifkan tingkat pengelogan yang lebih rendah di aplikasi server.

Untuk mengaktifkan pengelogan debug atau pelacakan untuk Blazor WebAssembly autentikasi, lihat bagian Pengelogan autentikasi klien pada pengelogan ASP.NET Core Blazor dengan pengaturan pemilih versi artikel ke ASP.NET Core di .NET 7 atau yang lebih baru.

Kesalahan umum

• Debugger berhenti pada saat pengecualian terjadi selama proses logout dengan Microsoft Entra External ID.

  Pengecualian yang berikut menghentikan debugger Visual Studio selama logout dengan Microsoft Entra External ID:

  Uncaught TypeError TypeError: Failed to execute 'postMessage' on 'Window': The provided value cannot be converted to a sequence.

  

  Pengecualian dilemparkan dari kode Entra JavaScript, jadi ini bukan masalah dengan ASP.NET Core. Pengecualian tidak memengaruhi fungsionalitas aplikasi dalam produksi, sehingga pengecualian dapat diabaikan selama pengujian pengembangan lokal.

• Kesalahan konfigurasi aplikasi atau Identity Penyedia (IP)

  Kesalahan yang paling umum disebabkan oleh konfigurasi yang salah. Berikut ini adalah beberapa contohnya:

  • Bergantung pada persyaratan skenario, Otoritas, Instans, ID Penyewa, DOMAIN Penyewa, ID Klien, atau URI Pengalihan yang hilang atau salah mencegah aplikasi mengautentikasi klien.
  • Cakupan permintaan yang salah mencegah klien mengakses titik akhir API web server.
  • Izin API server yang salah atau hilang mencegah klien mengakses titik akhir API web server.
  • Menjalankan aplikasi di port yang berbeda dari yang dikonfigurasikan dalam URI pengalihan pada pendaftaran aplikasi IP. Perhatikan bahwa port tidak diperlukan untuk ID Microsoft Entra dan aplikasi yang berjalan di localhost alamat pengujian pengembangan. Namun, untuk alamat non-localhost, konfigurasi port aplikasi dan port tempat aplikasi berjalan harus cocok.

  Cakupan konfigurasi dalam artikel ini menunjukkan contoh konfigurasi yang benar. Periksa konfigurasi dengan hati-hati mencari kesalahan konfigurasi aplikasi dan IP.

  Jika konfigurasi terlihat benar

  • Menganalisis log aplikasi.

  • Periksa lalu lintas jaringan antara aplikasi klien dan IP atau aplikasi server dengan alat pengembang browser. Seringkali, pesan kesalahan yang tepat atau pesan dengan petunjuk tentang apa yang menyebabkan masalah dikembalikan ke klien oleh IP atau aplikasi server setelah membuat permintaan. Panduan alat pengembang terdapat dalam artikel-artikel berikut:

    • Google Chrome (dokumentasi Google)
    • Microsoft Edge
    • Mozilla Firefox (dokumentasi Mozilla)

  Tim dokumentasi menanggapi umpan balik dokumen dan bug dalam artikel (buka masalah dari bagian Umpan balik halaman ini ) tetapi tidak dapat memberikan dukungan produk. Beberapa forum dukungan publik tersedia untuk membantu memecahkan masalah aplikasi. Kami merekomendasikan hal-hal berikut:

  • Stack Overflow (tag: blazor)
  • Tim ASP.NET Core di Slack
  • Blazor Gitter

  Forum sebelumnya tidak dimiliki atau dikendalikan oleh Microsoft.

  Untuk laporan bug kerangka kerja non-keamanan, non-sensitif, dan non-rahasia yang dapat direproduksi, ajukan masalah ke unit produk ASP.NET Core. Jangan buka masalah dengan unit produk sampai Anda menyelidiki penyebab masalah secara menyeluruh dan tidak dapat menyelesaikannya sendiri dan dengan bantuan komunitas di forum dukungan publik. Unit produk tidak dapat memecahkan masalah aplikasi individual yang rusak karena kesalahan konfigurasi sederhana atau kasus penggunaan yang melibatkan layanan pihak ketiga. Jika laporan bersifat sensitif atau rahasia atau menggambarkan potensi kelemahan keamanan dalam produk yang dapat dieksploitasi oleh penyidik cyber, lihat Melaporkan masalah keamanan dan bug (dotnet/aspnetcore repositori GitHub).

• Pengguna yang tidak sah untuk ME-ID

  info: Otorisasi Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] gagal. Persyaratan ini tidak terpenuhi: DenyAnonymousAuthorizationRequirement: Memerlukan pengguna yang diautentikasi.

  Kesalahan saat login dari ME-ID:

  • Kesalahan: unauthorized_client
  • Deskripsi: AADB2C90058: The provided application is not configured to allow public clients.

  Untuk mengatasi masalah ini:

  1. Di portal Microsoft Azure, akses manifes aplikasi.
  2. Atur atribut keallowPublicClientnull atau true.

Cookie dan data situs

Cookie dan data situs dapat bertahan di seluruh pembaruan aplikasi dan mengganggu pengujian dan pemecahan masalah. Hapus hal berikut saat membuat perubahan kode aplikasi, perubahan akun pengguna dengan penyedia, atau perubahan konfigurasi aplikasi penyedia:

• Cookie masuk pengguna
• Cookie aplikasi
• Data situs yang di-cache dan disimpan

Salah satu pendekatan untuk mencegah cookie dan data situs yang masih ada mengganggu pengujian dan pemecahan masalah adalah dengan:

• Konfigurasikan browser
  • Gunakan browser untuk pengujian yang dapat Anda konfigurasi untuk menghapus semua cookie dan data situs setiap kali browser ditutup.
  • Pastikan browser ditutup secara manual atau oleh IDE untuk setiap perubahan pada aplikasi, pengguna uji, atau konfigurasi penyedia.
• Gunakan perintah khusus untuk membuka browser dalam mode InPrivate atau mode Penyamaran di Visual Studio.
  • Buka kotak dialog Telusuri Dengan dari tombol Jalankan Visual Studio.
  • Pilih tombol Tambahkan .
  • Berikan jalur ke browser Anda di bidang Program . Jalur yang dapat dieksekusi berikut adalah lokasi penginstalan umum untuk Windows 10. Jika browser Anda diinstal di lokasi yang berbeda atau Anda tidak menggunakan Windows 10, berikan jalur ke program browser tersebut.
    • Microsoft Edge: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
    • Google Chrome: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
    • Mozilla Firefox: C:\Program Files\Mozilla Firefox\firefox.exe
  • Di bidang Argumen, berikan opsi baris perintah yang digunakan browser untuk membuka dalam mode InPrivate atau mode Penyamaran. Beberapa browser memerlukan URL aplikasi.
    • Microsoft Edge: Gunakan -inprivate.
    • Google Chrome: Gunakan --incognito --new-window {URL}, di mana {URL} placeholder adalah URL untuk dibuka (misalnya, https://localhost:5001).
    • Mozilla Firefox: Gunakan -private -url {URL}, yang tempat penampung {URL} adalah URL untuk dibuka (misalnya, https://localhost:5001).
  • Berikan nama di bidang Nama yang mudah diingat. Contohnya,Firefox Auth Testing.
  • Pilih tombol OK .
  • Untuk menghindari harus memilih profil browser untuk setiap iterasi pengujian dengan aplikasi, atur profil sebagai default dengan tombol Atur sebagai Default .
  • Pastikan bahwa IDE menutup browser setiap kali ada perubahan pada aplikasi, pengguna uji, atau konfigurasi penyedia.

Peningkatan aplikasi

Aplikasi yang berfungsi mungkin gagal segera setelah meningkatkan .NET SDK pada komputer pengembangan atau mengubah versi paket dalam aplikasi. Dalam beberapa kasus, paket yang tidak melekat dapat merusak aplikasi saat melakukan peningkatan besar. Sebagian besar masalah ini dapat diperbaiki dengan mengikuti instruksi berikut:

1. Hapus cache paket NuGet sistem lokal dengan mengeksekusi dotnet nuget locals all --clear di shell perintah.
2. Hapus folder proyek bin dan obj.
3. Pulihkan dan bangun ulang proyek.
4. Hapus semua file di folder penyebaran di server sebelum menyebarkan ulang aplikasi.

Note

Penggunaan versi paket yang tidak kompatibel dengan kerangka kerja target aplikasi tidak didukung. Untuk informasi tentang paket, gunakan Galeri NuGet.

Memulai solusi dari proyek yang benar

Blazor Web Apps:

• Untuk salah satu sampel pola Backend-for-Frontend (BFF), solusi dimulai dari Aspire/Aspire.AppHost proyek.
• Untuk salah satu contoh pola yang bukan BFF, mulai solusi dari proyek server.

Blazor Server:

Mulai solusi dari proyek server.

Memeriksa pengguna

Komponen berikut UserClaims dapat digunakan langsung di aplikasi atau berfungsi sebagai dasar untuk penyesuaian lebih lanjut.

UserClaims.razor:

@page "/user-claims"
@using System.Security.Claims
@using Microsoft.AspNetCore.Authorization
@attribute [Authorize]

<PageTitle>User Claims</PageTitle>

<h1>User Claims</h1>

@if (claims.Any())
{
    <ul>
        @foreach (var claim in claims)
        {
            <li><b>@claim.Type:</b> @claim.Value</li>
        }
    </ul>
}

@code {
    private IEnumerable<Claim> claims = Enumerable.Empty<Claim>();

    [CascadingParameter]
    private Task<AuthenticationState>? AuthState { get; set; }

    protected override async Task OnInitializedAsync()
    {
        if (AuthState == null)
        {
            return;
        }

        var authState = await AuthState;
        claims = authState.User.Claims;
    }
}

Sumber daya tambahan

• Memanggil API web dari aplikasi ASP.NET Core Blazor : Platform identitas Microsoft untuk panggilan API web
• Dokumentasi platform identitas Microsoft
• Dokumentasi API Web | Platform identitas Microsoft
• API web yang memanggil API web: Memanggil API: Opsi 2: Memanggil API web hilir dengan kelas pembantu
• AzureAD/microsoft-identity-web Repositori GitHub: Panduan bermanfaat tentang menerapkan Microsoft Identity Web untuk ID Microsoft Entra dan Azure Active Directory B2C untuk aplikasi ASP.NET Core, termasuk tautan ke aplikasi sampel dan dokumentasi Azure terkait. Saat ini, Blazor Web Apptidak ditangani secara eksplisit oleh dokumentasi Azure, tetapi penyiapan dan konfigurasi Blazor Web App untuk ME-ID dan hosting Azure sama dengan untuk aplikasi web ASP.NET Core apa pun.
• AuthenticationStateProvider layanan
• Mengelola status autentikasi dalam Blazor Web Apps
• Abstraksi layanan dalam Blazor Web Apps