Mengamankan aplikasi ASP.NET Core Blazor WebAssembly yang dihosting dengan Azure Active Directory B2C
Artikel ini menjelaskan cara membuat solusi yang dihosting Blazor WebAssembly yang menggunakan Azure Active Directory (AAD) B2C untuk autentikasi.
Untuk cakupan skenario keamanan tambahan setelah membaca artikel ini, lihat skenario keamanan tambahan ASP.NET CoreBlazor WebAssembly.
Panduan
Sub bagian dari panduan menjelaskan cara:
- Membuat penyewa di Azure
- Mendaftarkan aplikasi API server di Azure
- Mendaftarkan aplikasi klien di Azure
- Blazor Membuat aplikasi
- Mengubah skema cakupan token akses default
- Menjalankan aplikasi
Membuat penyewa di Azure
Ikuti panduan dalam Tutorial: Membuat penyewa Azure Active Directory B2C untuk membuat penyewa AAD B2C.
Sebelum melanjutkan panduan artikel ini, konfirmasikan bahwa Anda telah memilih direktori yang benar untuk penyewa AAD B2C.
Mendaftarkan aplikasi API server di Azure
Daftarkan aplikasi AAD B2C untuk aplikasi API Server:
- Navigasi ke Azure AD B2C di portal Azure. Pilih Pendaftaran aplikasi di bar samping. Pilih tombol Pendaftaran baru.
- Berikan Nama untuk aplikasi (misalnya, Blazor Server AAD B2C).
- Untuk Jenis akun yang didukung, pilih opsi multi-penyewa: Akun di penyedia identitas atau direktori organisasi apa pun (untuk mengautentikasi pengguna dengan alur pengguna)
- Aplikasi API Server tidak memerlukan URI Pengalihan dalam skenario ini, jadi biarkan daftar dropdown Pilih platform tidak dipilih dan jangan masukkan URI pengalihan.
- Konfirmasikan bahwa Izin>Memberikan persetujuan admin untuk izin openid dan offline_access dipilih.
- Pilih Daftarkan.
Catat informasi berikut:
- ID Aplikasi aplikasi API Server (klien) (misalnya,
41451fa7-82d9-4673-8fa5-69eff5a761fd
) - Instans AAD B2C (misalnya,
https://contoso.b2clogin.com/
, yang mencakup garis miring berikutnya). Instans adalah skema dan host pendaftaran aplikasi Azure B2C, yang dapat ditemukan dengan membuka jendela Titik Akhir dari halaman Pendaftaran aplikasi di portal Azure. - Domain Primer/Penerbit/Penyewa (misalnya,
contoso.onmicrosoft.com
): Domain tersedia sebagai domain Penerbit di bilah Branding portal Azure untuk aplikasi terdaftar.
Pilih Ekspos API dari bar samping dan ikuti langkah-langkah berikut:
- Pilih Tambahkan cakupan.
- Klik Simpan dan lanjutkan.
- Berikan nama Cakupan (misalnya,
API.Access
). - Berikan nama tampilan persetujuan Admin (misalnya,
Access API
). - Berikan deskripsi persetujuan Admin (misalnya,
Allows the app to access server app API endpoints.
). - Konfirmasikan bahwa Status diatur ke Diaktifkan.
- Pilih Tambahkan cakupan.
Catat informasi berikut:
- GUID URI ID Aplikasi (misalnya, rekaman
41451fa7-82d9-4673-8fa5-69eff5a761fd
darihttps://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd
) - Nama cakupan (misalnya,
API.Access
)
Mendaftarkan aplikasi klien di Azure
Daftarkan aplikasi AAD B2C untuk aplikasi Klien:
- Navigasi ke Azure AD B2C di portal Azure. Pilih Pendaftaran aplikasi di bar samping. Pilih tombol Pendaftaran baru.
- Berikan Nama untuk aplikasi (misalnya, Blazor Klien AAD B2C).
- Untuk Jenis akun yang didukung, pilih opsi multi-penyewa: Akun di penyedia identitas atau direktori organisasi apa pun (untuk mengautentikasi pengguna dengan alur pengguna)
- Atur daftar dropdown URI Pengalihan ke Aplikasi halaman tunggal (SPA) dan berikan nilai URI pengalihan .
https://localhost/authentication/login-callback
Jika Anda mengetahui URI pengalihan produksi untuk host default Azure (misalnya,azurewebsites.net
) atau host domain kustom (misalnya,contoso.com
), Anda juga dapat menambahkan URI pengalihan produksi pada saat yang sama saat Anda menyediakanlocalhost
URI pengalihan. Pastikan untuk menyertakan nomor port untuk non-port:443
dalam URI pengalihan produksi apa pun yang Anda tambahkan. - Konfirmasikan bahwa Izin>Memberikan persetujuan admin untuk izin openid dan offline_access dipilih.
- Pilih Daftarkan.
Catatan
Menyediakan nomor port untuk localhost
URI pengalihan AAD B2C tidak diperlukan. Untuk informasi selengkapnya, lihat Mengalihkan pembatasan dan batasan URI (URL balasan): Pengecualian localhost (Dokumentasi Entra).
Rekam ID Aplikasi aplikasi Klien (klien) (misalnya, 4369008b-21fa-427c-abaa-9b53bf58e538
).
Dalam konfigurasi>Platform Autentikasi>Aplikasi halaman tunggal:
- Konfirmasikan URI
https://localhost/authentication/login-callback
pengalihan ada. - Di bagian Pemberian implisit, pastikan bahwa kotak centang untuk token Akses dan token ID tidak dipilih. Pemberian implisit tidak disarankan untuk Blazor aplikasi menggunakan MSAL v2.0 atau yang lebih baru. Untuk informasi selengkapnya, lihat Mengamankan ASP.NET Core Blazor WebAssembly.
- Default yang tersisa untuk aplikasi dapat diterima untuk pengalaman ini.
- Pilih tombol Simpan jika Anda membuat perubahan.
Dalam izin API dari bar samping:
- Pilih Tambahkan izin diikuti oleh API Saya.
- Pilih aplikasi API Server dari kolom Nama (misalnya, Blazor Server AAD B2C). Anda harus menjadi pemilik pendaftaran aplikasi (dan pendaftaran aplikasi API jika merupakan aplikasi terpisah) untuk melihat API di area API Saya di portal Azure. Untuk informasi selengkapnya, lihat Menetapkan pemilik aplikasi (dokumentasi Microsoft Entra).
- Buka daftar API jika belum dibuka.
- Aktifkan akses ke API (misalnya,
API.Access
) dengan kotak centang. - Pilih Tambahkan izin.
- Pilih tombol Berikan persetujuan admin untuk {TENANT NAME} . Pilih Ya untuk mengonfirmasi.
Penting
Jika Anda tidak memiliki otoritas untuk memberikan persetujuan admin kepada penyewa di langkah terakhir konfigurasi izin API karena persetujuan untuk menggunakan aplikasi didelegasikan kepada pengguna, maka Anda harus mengambil langkah-langkah tambahan berikut:
- Aplikasi harus menggunakan domain penerbit tepercaya.
Server
Dalam konfigurasi aplikasi di portal Azure, pilih Ekspos API. Di bawah Aplikasi klien resmi, pilih tombol untuk Menambahkan aplikasi klien.Client
Tambahkan ID Aplikasi (klien) aplikasi (misalnya,4369008b-21fa-427c-abaa-9b53bf58e538
).
Kembali ke Azure AD B2C di portal Azure. Pilih Alur pengguna dan gunakan panduan berikut: Buat alur pengguna pendaftaran dan masuk. Minimal, pilih Klaim aplikasi untuk alur pengguna pendaftaran/masuk lalu kotak centang atribut pengguna Nama Tampilan untuk mengisi context.User.Identity?.Name
context.User.Identity.Name
/di LoginDisplay
komponen ().Shared/LoginDisplay.razor
Rekam nama alur pengguna pendaftaran dan masuk yang dibuat untuk aplikasi (misalnya, B2C_1_signupsignin1
).
Blazor Membuat aplikasi
Ganti tempat penampung dalam perintah berikut dengan informasi yang direkam sebelumnya dan jalankan perintah dalam shell perintah:
dotnet new blazorwasm -au IndividualB2C --aad-b2c-instance "{AAD B2C INSTANCE}" --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI GUID}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {PROJECT NAME} -ssp "{SIGN UP OR SIGN IN POLICY}"
Peringatan
Hindari menggunakan tanda hubung (-
) dalam nama {PROJECT NAME}
aplikasi yang merusak pembentukan pengidentifikasi aplikasi OIDC. Logika dalam Blazor WebAssembly templat proyek menggunakan nama proyek untuk pengidentifikasi aplikasi OIDC dalam konfigurasi solusi. Kasus Pascal (BlazorSample
) atau garis bawah (Blazor_Sample
) adalah alternatif yang dapat diterima. Untuk informasi selengkapnya, lihat Garis putus dalam nama proyek yang dihosting Blazor WebAssembly merusak keamanan OIDC (dotnet/aspnetcore #35337).
Placeholder | Nama portal Microsoft Azure | Contoh |
---|---|---|
{AAD B2C INSTANCE} |
Instans | https://contoso.b2clogin.com/ (termasuk garis miring berikutnya) |
{PROJECT NAME} |
— | BlazorSample |
{CLIENT APP CLIENT ID} |
ID aplikasi (klien) untuk Client aplikasi | 4369008b-21fa-427c-abaa-9b53bf58e538 |
{DEFAULT SCOPE} |
Nama cakupan | API.Access |
{SERVER API APP CLIENT ID} |
ID aplikasi (klien) untuk Server aplikasi | 41451fa7-82d9-4673-8fa5-69eff5a761fd |
{SERVER API APP ID URI GUID} |
GUID URI ID Aplikasi | 41451fa7-82d9-4673-8fa5-69eff5a761fd (GUID ONLY, secara default cocok dengan {SERVER API APP CLIENT ID} ) |
{SIGN UP OR SIGN IN POLICY} |
Alur pengguna pendaftaran/masuk | B2C_1_signupsignin1 |
{TENANT DOMAIN} |
Domain Primer/Penerbit/Penyewa | contoso.onmicrosoft.com |
Lokasi output yang ditentukan dengan -o|--output
opsi membuat folder proyek jika tidak ada dan menjadi bagian dari nama proyek. Hindari menggunakan garis putus (-
) dalam nama aplikasi yang merusak pembentukan pengidentifikasi aplikasi OIDC (lihat PERINGATAN sebelumnya).
Menjalankan aplikasi
Jalankan aplikasi dari Server
proyek. Saat menggunakan Visual Studio, baik:
Pilih panah dropdown di samping tombol Jalankan . Buka Konfigurasikan Proyek Startup dari daftar dropdown. Pilih opsi Proyek startup tunggal. Konfirmasi atau ubah proyek untuk proyek startup ke
Server
proyek.Konfirmasikan bahwa proyek disorot
Server
di Penjelajah Solusi sebelum Anda memulai aplikasi dengan salah satu pendekatan berikut:- Pilih tombol Jalankan.
- Gunakan Debug>Mulai Debugging dari menu.
- Tekan F5.
Dalam shell perintah, navigasikan ke
Server
folder proyek solusi. Jalankandotnet watch
perintah (ataudotnet run
).
Kebijakan kustom
Pustaka Autentikasi Microsoft (Microsoft.Authentication.WebAssembly.Msal, paket NuGet) tidak mendukung kebijakan kustom AAD B2C secara default.
Mengkonfigurasi User.Identity.Name
Panduan di bagian ini mencakup pengisian User.Identity.Name
opsional dengan nilai dari name
klaim.
Secara default, Server API aplikasi diisi User.Identity.Name
dengan nilai dari http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name
jenis klaim (misalnya, 2d64b3da-d9d5-42c6-9352-53d8df33d770@contoso.onmicrosoft.com
).
Untuk mengonfigurasi aplikasi untuk menerima nilai dari name
jenis klaim:
Tambahkan namespace layanan untuk Microsoft.AspNetCore.Authentication.JwtBearer ke
Program
file:using Microsoft.AspNetCore.Authentication.JwtBearer;
Konfigurasikan TokenValidationParameters.NameClaimType dari JwtBearerOptions dalam
Program
file:builder.Services.Configure<JwtBearerOptions>( JwtBearerDefaults.AuthenticationScheme, options => { options.TokenValidationParameters.NameClaimType = "name"; });
Bagian dari solusi
Bagian ini menjelaskan bagian solusi yang dihasilkan dari Blazor WebAssembly templat proyek dan menjelaskan bagaimana solusi Client dan Server proyek dikonfigurasi untuk referensi. Tidak ada panduan khusus untuk diikuti di bagian ini untuk aplikasi kerja dasar jika Anda membuat aplikasi menggunakan panduan di bagian Penelusuran . Panduan di bagian ini berguna untuk memperbarui aplikasi untuk mengautentikasi dan mengotorisasi pengguna. Namun, pendekatan alternatif untuk memperbarui aplikasi adalah membuat aplikasi baru dari panduan di bagian Penelusuran dan memindahkan komponen, kelas, dan sumber daya aplikasi ke aplikasi baru.
appsettings.json
konfigurasi
Bagian ini berkaitan dengan aplikasi solusi Server .
File appsettings.json
berisi opsi untuk mengonfigurasi handler pembawa JWT yang digunakan untuk memvalidasi token akses:
{
"AzureAdB2C": {
"Instance": "https://{TENANT}.b2clogin.com/",
"ClientId": "{SERVER API APP CLIENT ID}",
"Domain": "{TENANT DOMAIN}",
"Scopes": "{DEFAULT SCOPE}",
"SignUpSignInPolicyId": "{SIGN UP OR SIGN IN POLICY}"
}
}
Contoh:
{
"AzureAdB2C": {
"Instance": "https://contoso.b2clogin.com/",
"ClientId": "41451fa7-82d9-4673-8fa5-69eff5a761fd",
"Domain": "contoso.onmicrosoft.com",
"Scopes": "API.Access",
"SignUpSignInPolicyId": "B2C_1_signupsignin1",
}
}
Paket autentikasi
Bagian ini berkaitan dengan aplikasi solusi Server .
Dukungan untuk mengautentikasi dan mengotorisasi panggilan ke API web ASP.NET Core dengan Platform Microsoft Identity disediakan oleh Microsoft.Identity.Web
paket.
Catatan
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.
Aplikasi Server solusi yang dihosting Blazor yang dibuat dari Blazor WebAssembly templat menyertakan Microsoft.Identity.Web.UI
paket secara default. Paket menambahkan UI untuk autentikasi pengguna di aplikasi web dan tidak digunakan oleh Blazor kerangka kerja. Server Jika aplikasi tidak akan digunakan untuk mengautentikasi pengguna secara langsung, aman untuk menghapus referensi paket dari Server file proyek aplikasi.
Dukungan layanan autentikasi
Bagian ini berkaitan dengan aplikasi solusi Server .
Metode ini AddAuthentication
menyiapkan layanan autentikasi dalam aplikasi dan mengonfigurasi handler Pembawa JWT sebagai metode autentikasi default. Metode ini AddMicrosoftIdentityWebApi mengonfigurasi layanan untuk melindungi API web dengan Microsoft Identity Platform v2.0. Metode ini mengharapkan AzureAdB2C
bagian dalam konfigurasi aplikasi dengan pengaturan yang diperlukan untuk menginisialisasi opsi autentikasi.
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
.AddMicrosoftIdentityWebApi(Configuration.GetSection("AzureAdB2C"));
Catatan
Ketika skema autentikasi tunggal terdaftar, skema autentikasi secara otomatis digunakan sebagai skema default aplikasi, dan tidak perlu menyatakan skema ke AddAuthentication atau melalui AuthenticationOptions. Untuk informasi selengkapnya, lihat Gambaran Umum Autentikasi Inti ASP.NET dan pengumuman ASP.NET Core (aspnet/Pengumuman #490).
UseAuthentication dan UseAuthorization pastikan bahwa:
- Aplikasi ini mencoba mengurai dan memvalidasi token pada permintaan masuk.
- Setiap permintaan yang mencoba mengakses sumber daya yang dilindungi tanpa kredensial yang tepat gagal.
app.UseAuthorization();
WeatherForecast pengendali
Bagian ini berkaitan dengan aplikasi solusi Server .
Pengontrol WeatherForecast
(Controllers/WeatherForecastController.cs
) mengekspos API yang dilindungi dengan [Authorize]
atribut yang diterapkan ke pengontrol. Penting untuk dipahami bahwa:
- Atribut
[Authorize]
dalam pengontrol API ini adalah satu-satunya hal yang melindungi API ini dari akses yang tidak sah. - Atribut
[Authorize]
yang Blazor WebAssembly digunakan dalam aplikasi hanya berfungsi sebagai petunjuk untuk aplikasi bahwa pengguna harus diotorisasi agar aplikasi berfungsi dengan benar.
[Authorize]
[ApiController]
[Route("[controller]")]
[RequiredScope(RequiredScopesConfigurationKey = "AzureAdB2C:Scopes")]
public class WeatherForecastController : ControllerBase
{
[HttpGet]
public IEnumerable<WeatherForecast> Get()
{
...
}
}
wwwroot/appsettings.json
konfigurasi
Bagian ini berkaitan dengan aplikasi solusi Client .
Konfigurasi disediakan oleh wwwroot/appsettings.json
file:
{
"AzureAdB2C": {
"Authority": "{AAD B2C INSTANCE}{TENANT DOMAIN}/{SIGN UP OR SIGN IN POLICY}",
"ClientId": "{CLIENT APP CLIENT ID}",
"ValidateAuthority": false
}
}
Dalam konfigurasi sebelumnya, {AAD B2C INSTANCE}
menyertakan garis miring berikutnya.
Contoh:
{
"AzureAdB2C": {
"Authority": "https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_signupsignin1",
"ClientId": "4369008b-21fa-427c-abaa-9b53bf58e538",
"ValidateAuthority": false
}
}
Paket autentikasi
Bagian ini berkaitan dengan aplikasi solusi Client .
Saat aplikasi dibuat untuk menggunakan Akun B2C Individual (IndividualB2C
), aplikasi secara otomatis menerima referensi paket untuk Pustaka Autentikasi Microsoft (Microsoft.Authentication.WebAssembly.Msal
). Paket ini menyediakan sekumpulan primitif yang membantu aplikasi mengautentikasi pengguna dan mendapatkan token untuk memanggil API yang dilindungi.
Jika menambahkan autentikasi ke aplikasi, tambahkan Microsoft.Authentication.WebAssembly.Msal
paket secara manual ke aplikasi.
Catatan
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.
Paket Microsoft.Authentication.WebAssembly.Msal
secara transitif menambahkan Microsoft.AspNetCore.Components.WebAssembly.Authentication
paket ke aplikasi.
Dukungan layanan autentikasi
Bagian ini berkaitan dengan aplikasi solusi Client .
Dukungan untuk HttpClient instans ditambahkan yang menyertakan token akses saat membuat permintaan ke proyek server.
Dalam file Program
:
builder.Services.AddHttpClient("{PROJECT NAME}.ServerAPI", client =>
client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
.AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
.CreateClient("{PROJECT NAME}.ServerAPI"));
Tempat {PROJECT NAME}
penampung adalah nama proyek pada pembuatan solusi. Misalnya, memberikan nama BlazorSample
proyek menghasilkan nama HttpClient BlazorSample.ServerAPI
.
Dukungan untuk mengautentikasi pengguna terdaftar dalam kontainer layanan dengan AddMsalAuthentication metode ekstensi yang disediakan oleh Microsoft.Authentication.WebAssembly.Msal
paket. Metode ini menyiapkan layanan yang diperlukan agar aplikasi berinteraksi dengan Identity Penyedia (IP).
Dalam file Program
:
builder.Services.AddMsalAuthentication(options =>
{
builder.Configuration.Bind("AzureAdB2C", options.ProviderOptions.Authentication);
options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});
{SCOPE URI}
adalah cakupan token akses default (misalnya, https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd/API.Access
atau URI kustom yang Anda konfigurasikan di portal Azure).
Metode ini AddMsalAuthentication menerima panggilan balik untuk mengonfigurasi parameter yang diperlukan untuk mengautentikasi aplikasi. Nilai yang diperlukan untuk mengonfigurasi aplikasi dapat diperoleh dari konfigurasi Azure Portal AAD saat Anda mendaftarkan aplikasi.
Cakupan token akses
Bagian ini berkaitan dengan aplikasi solusi Client .
Cakupan token akses default mewakili daftar cakupan token akses yaitu:
- Disertakan secara default dalam permintaan masuk.
- Digunakan untuk menyediakan token akses segera setelah autentikasi.
Semua cakupan harus termasuk dalam aplikasi yang sama sesuai aturan ID Microsoft Entra. Cakupan tambahan dapat ditambahkan untuk aplikasi API tambahan sesuai kebutuhan:
builder.Services.AddMsalAuthentication(options =>
{
...
options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});
Tentukan cakupan tambahan dengan AdditionalScopesToConsent
:
options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");
Catatan
AdditionalScopesToConsent tidak dapat menyediakan izin pengguna yang didelegasikan untuk Microsoft Graph melalui UI persetujuan ID Microsoft Entra saat pengguna pertama kali menggunakan aplikasi yang terdaftar di Microsoft Azure. Untuk informasi selengkapnya, lihat Menggunakan Graph API dengan ASP.NET Core Blazor WebAssembly.
Contoh cakupan token akses default:
options.ProviderOptions.DefaultAccessTokenScopes.Add(
"https://contoso.onmicrosoft.com/41451fa7-82d9-4673-8fa5-69eff5a761fd/API.Access");
Untuk informasi selengkapnya, lihat bagian berikut dari artikel Skenario tambahan:
Mode masuk
Bagian ini berkaitan dengan aplikasi solusi Client .
Kerangka kerja default ke mode masuk pop-up dan kembali ke mode masuk pengalihan jika pop-up tidak dapat dibuka. Konfigurasikan MSAL untuk menggunakan mode masuk pengalihan dengan mengatur LoginMode
properti ke redirect
MsalProviderOptions :
builder.Services.AddMsalAuthentication(options =>
{
...
options.ProviderOptions.LoginMode = "redirect";
});
Pengaturan default adalah popup
, dan nilai string tidak peka huruf besar/kecil.
Mengimpor file
Bagian ini berkaitan dengan aplikasi solusi Client .
Namespace Microsoft.AspNetCore.Components.Authorization tersedia di seluruh aplikasi melalui _Imports.razor
file:
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using {APPLICATION ASSEMBLY}
@using {APPLICATION ASSEMBLY}.Shared
Halaman indeks
Bagian ini berkaitan dengan aplikasi solusi Client .
Halaman Indeks (wwwroot/index.html
) menyertakan skrip yang menentukan AuthenticationService
di JavaScript. AuthenticationService
menangani detail tingkat rendah protokol OIDC. Aplikasi secara internal memanggil metode yang ditentukan dalam skrip untuk melakukan operasi autentikasi.
<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>
Komponen aplikasi
Bagian ini berkaitan dengan aplikasi solusi Client .
Komponen App
(App.razor
) mirip dengan komponen yang App
ditemukan di Blazor Server aplikasi:
- Komponen CascadingAuthenticationState mengelola mengekspos AuthenticationState ke aplikasi lainnya.
- Komponen AuthorizeRouteView memastikan bahwa pengguna saat ini berwenang untuk mengakses halaman tertentu atau merender
RedirectToLogin
komponen. - Komponen
RedirectToLogin
mengelola pengalihan pengguna yang tidak sah ke halaman masuk.
Karena perubahan dalam kerangka kerja di seluruh rilis ASP.NET Core, Razor markup untuk App
komponen (App.razor
) tidak ditampilkan di bagian ini. Untuk memeriksa markup komponen untuk rilis tertentu, gunakan salah satu pendekatan berikut:
Buat aplikasi yang disediakan untuk autentikasi dari templat proyek default Blazor WebAssembly untuk versi ASP.NET Core yang ingin Anda gunakan.
App
Periksa komponen (App.razor
) di aplikasi yang dihasilkan.App
Periksa komponen (App.razor
) di sumber referensi. Pilih versi dari pemilih cabang, dan cari komponen diProjectTemplates
folder repositori karena telah dipindahkan selama bertahun-tahun.Catatan
Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).
Komponen RedirectToLogin
Bagian ini berkaitan dengan aplikasi solusi Client .
Komponen RedirectToLogin
(RedirectToLogin.razor
):
- Mengelola pengalihan pengguna yang tidak sah ke halaman masuk.
- URL saat ini yang coba diakses pengguna dipertahankan oleh sehingga mereka dapat dikembalikan ke halaman tersebut jika autentikasi berhasil menggunakan:
- Status riwayat navigasi di ASP.NET Core di .NET 7 atau yang lebih baru.
- String kueri di ASP.NET Core di .NET 6 atau yang lebih lama.
RedirectToLogin
Periksa komponen dalam sumber referensi. Lokasi komponen berubah dari waktu ke waktu, jadi gunakan alat pencarian GitHub untuk menemukan komponen.
Catatan
Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).
Komponen LoginDisplay
Bagian ini berkaitan dengan aplikasi solusi Client .
Komponen LoginDisplay
(LoginDisplay.razor
) dirender dalam MainLayout
komponen (MainLayout.razor
) dan mengelola perilaku berikut:
- Untuk pengguna terautentikasi:
- Menampilkan nama pengguna saat ini.
- Menawarkan tautan ke halaman profil pengguna di ASP.NET Core Identity.
- Menawarkan tombol untuk keluar dari aplikasi.
- Untuk pengguna anonim:
- Menawarkan opsi untuk mendaftar.
- Menawarkan opsi untuk masuk.
Karena perubahan dalam kerangka kerja di seluruh rilis ASP.NET Core, Razor markup untuk LoginDisplay
komponen tidak ditampilkan di bagian ini. Untuk memeriksa markup komponen untuk rilis tertentu, gunakan salah satu pendekatan berikut:
Buat aplikasi yang disediakan untuk autentikasi dari templat proyek default Blazor WebAssembly untuk versi ASP.NET Core yang ingin Anda gunakan.
LoginDisplay
Periksa komponen di aplikasi yang dihasilkan.LoginDisplay
Periksa komponen dalam sumber referensi. Lokasi komponen berubah dari waktu ke waktu, jadi gunakan alat pencarian GitHub untuk menemukan komponen. Konten templat untukHosted
sama dengantrue
yang digunakan.Catatan
Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag rilis tertentu, gunakan daftar dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).
Komponen autentikasi
Bagian ini berkaitan dengan aplikasi solusi Client .
Halaman yang dihasilkan oleh Authentication
komponen (Pages/Authentication.razor
) menentukan rute yang diperlukan untuk menangani tahap autentikasi yang berbeda.
Komponen RemoteAuthenticatorView :
- Disediakan oleh
Microsoft.AspNetCore.Components.WebAssembly.Authentication
paket. - Mengelola melakukan tindakan yang sesuai pada setiap tahap autentikasi.
@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />
@code {
[Parameter]
public string? Action { get; set; }
}
Catatan
Jenis referensi nullable (NRTs) dan .NET compiler null-state static analysis didukung di ASP.NET Core di .NET 6 atau yang lebih baru. Sebelum rilis ASP.NET Core di .NET 6, string
jenis muncul tanpa penunjukan jenis null (?
).
Komponen FetchData
Bagian ini berkaitan dengan aplikasi solusi Client .
Komponen FetchData
menunjukkan cara:
- Menyediakan token akses.
- Gunakan token akses untuk memanggil API sumber daya yang dilindungi di aplikasi Server .
Arahan @attribute [Authorize]
menunjukkan sistem Blazor WebAssembly otorisasi bahwa pengguna harus diotorisasi untuk mengunjungi komponen ini. Kehadiran atribut di Client
aplikasi tidak mencegah API di server dipanggil tanpa kredensial yang tepat. Aplikasi ini Server
juga harus digunakan [Authorize]
pada titik akhir yang sesuai untuk melindunginya dengan benar.
IAccessTokenProvider.RequestAccessToken mengurus permintaan token akses yang dapat ditambahkan ke permintaan untuk memanggil API. Jika token di-cache atau layanan dapat menyediakan token akses baru tanpa interaksi pengguna, permintaan token berhasil. Jika tidak, permintaan token gagal dengan AccessTokenNotAvailableException, yang tertangkap dalam try-catch
pernyataan.
Untuk mendapatkan token aktual untuk disertakan dalam permintaan, aplikasi harus memeriksa apakah permintaan berhasil dengan memanggil tokenResult.TryGetToken(out var token)
.
Jika permintaan berhasil, variabel token diisi dengan token akses. Properti AccessToken.Value token mengekspos string harfiah untuk disertakan Authorization
dalam header permintaan.
Jika permintaan gagal karena token tidak dapat disediakan tanpa interaksi pengguna:
- ASP.NET Core di .NET 7 atau yang lebih baru: Aplikasi menavigasi untuk
AccessTokenResult.InteractiveRequestUrl
menggunakan yang diberikanAccessTokenResult.InteractionOptions
untuk memungkinkan refresh token akses. - ASP.NET Core di .NET 6 atau yang lebih lama: Hasil token berisi URL pengalihan. Menavigasi ke URL ini membawa pengguna ke halaman masuk dan kembali ke halaman saat ini setelah autentikasi berhasil.
@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using {APP NAMESPACE}.Shared
@attribute [Authorize]
@inject HttpClient Http
...
@code {
private WeatherForecast[] forecasts;
protected override async Task OnInitializedAsync()
{
try
{
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
}
catch (AccessTokenNotAvailableException exception)
{
exception.Redirect();
}
}
}
Pecahkan masalah
Pencatatan
Untuk mengaktifkan pencatatan log debug atau pelacakan untuk Blazor WebAssembly autentikasi, lihat bagian Pengelogan autentikasi sisi klien ASP.NET Pengelogan core Blazor dengan pemilih versi artikel diatur ke ASP.NET Core 7.0 atau yang lebih baru.
Kesalahan umum
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 dikonfigurasi di URI Pengalihan pendaftaran aplikasi IP. Perhatikan bahwa port tidak diperlukan untuk ID Microsoft Entra dan aplikasi yang berjalan di
localhost
alamat pengujian pengembangan, tetapi konfigurasi port aplikasi dan port tempat aplikasi berjalan harus cocok untuk non-alamatlocalhost
.
Bagian konfigurasi dari panduan artikel ini menunjukkan contoh konfigurasi yang benar. Periksa dengan cermat setiap bagian artikel yang mencari kesalahan konfigurasi aplikasi dan IP.
Jika konfigurasi muncul dengan 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. Alat pengembang panduan ditemukan dalam artikel berikut:
- Google Chrome (dokumentasi Google)
- Microsoft Edge
- Mozilla Firefox (dokumentasi Mozilla)
Untuk rilis Blazor tempat JSON Web Token (JWT) digunakan, dekode konten token yang digunakan untuk mengautentikasi klien atau mengakses API web server, tergantung di mana masalah terjadi. Untuk informasi selengkapnya, lihat Memeriksa konten JSON Web Token (JWT).
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:
Forum sebelumnya tidak dimiliki atau dikendalikan oleh Microsoft.
Untuk laporan bug kerangka kerja non-keamanan, non-sensitif, dan non-rahasia yang dapat direproduksi, buka masalah dengan 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 penyerang, lihat Melaporkan masalah keamanan dan bug (
dotnet/aspnetcore
repositori GitHub).Klien yang tidak sah untuk ME-ID
info: Otorisasi Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] gagal. Persyaratan ini tidak terpenuhi: DenyAnonymousAuthorizationRequirement: Memerlukan pengguna yang diautentikasi.
Kesalahan panggilan balik masuk dari ME-ID:
- Kesalahan:
unauthorized_client
- Deskripsi:
AADB2C90058: The provided application is not configured to allow public clients.
Untuk mengatasi masalah ini:
- Kesalahan:
Cookies dan data situs
Cookiedata s dan 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:
- Rincian masuk cookiepengguna
- Aplikasi cookies
- Data situs yang di-cache dan disimpan
Salah satu pendekatan untuk mencegah cookiedata situs dan yang masih ada mengganggu pengujian dan pemecahan masalah adalah dengan:
- Mengonfigurasi 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 kustom untuk membuka browser dalam mode InPrivate atau 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 browser yang dapat dieksekusi.
- 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
- Microsoft Edge:
- Di bidang Argumen, berikan opsi baris perintah yang digunakan browser untuk membuka dalam mode InPrivate atau Penyamaran. Beberapa browser memerlukan URL aplikasi.
- Microsoft Edge: Gunakan
-inprivate
. - Google Chrome: Gunakan
--incognito --new-window {URL}
, di mana{URL}
tempat penampung adalah URL untuk dibuka (misalnya,https://localhost:5001
). - Mozilla Firefox: Gunakan
-private -url {URL}
, di mana{URL}
tempat penampung adalah URL untuk dibuka (misalnya,https://localhost:5001
).
- Microsoft Edge: Gunakan
- 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 browser ditutup oleh IDE untuk setiap perubahan pada aplikasi, pengguna uji, atau konfigurasi penyedia.
Peningkatan aplikasi
Aplikasi yang berfungsi mungkin gagal segera setelah meningkatkan .NET Core 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:
- Hapus cache paket NuGet sistem lokal dengan mengeksekusi
dotnet nuget locals all --clear
dari shell perintah. - Hapus folder dan
obj
proyekbin
. - Pulihkan dan bangun ulang proyek.
- Hapus semua file di folder penyebaran di server sebelum menyebarkan ulang aplikasi.
Catatan
Penggunaan versi paket yang tidak kompatibel dengan kerangka kerja target aplikasi tidak didukung. Untuk informasi tentang paket, gunakan Galeri NuGet atau Penjelajah Paket FuGet.
Server
Menjalankan aplikasi
Saat menguji dan memecahkan masalah solusi yang dihostingBlazor WebAssembly, pastikan Anda menjalankan aplikasi dari Server
proyek.
Memeriksa pengguna
Komponen berikut User
dapat digunakan langsung di aplikasi atau berfungsi sebagai dasar untuk penyesuaian lebih lanjut.
User.razor
:
@page "/user"
@attribute [Authorize]
@using System.Text.Json
@using System.Security.Claims
@inject IAccessTokenProvider AuthorizationService
<h1>@AuthenticatedUser?.Identity?.Name</h1>
<h2>Claims</h2>
@foreach (var claim in AuthenticatedUser?.Claims ?? Array.Empty<Claim>())
{
<p class="claim">@(claim.Type): @claim.Value</p>
}
<h2>Access token</h2>
<p id="access-token">@AccessToken?.Value</p>
<h2>Access token claims</h2>
@foreach (var claim in GetAccessTokenClaims())
{
<p>@(claim.Key): @claim.Value.ToString()</p>
}
@if (AccessToken != null)
{
<h2>Access token expires</h2>
<p>Current time: <span id="current-time">@DateTimeOffset.Now</span></p>
<p id="access-token-expires">@AccessToken.Expires</p>
<h2>Access token granted scopes (as reported by the API)</h2>
@foreach (var scope in AccessToken.GrantedScopes)
{
<p>Scope: @scope</p>
}
}
@code {
[CascadingParameter]
private Task<AuthenticationState> AuthenticationState { get; set; }
public ClaimsPrincipal AuthenticatedUser { get; set; }
public AccessToken AccessToken { get; set; }
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
var state = await AuthenticationState;
var accessTokenResult = await AuthorizationService.RequestAccessToken();
if (!accessTokenResult.TryGetToken(out var token))
{
throw new InvalidOperationException(
"Failed to provision the access token.");
}
AccessToken = token;
AuthenticatedUser = state.User;
}
protected IDictionary<string, object> GetAccessTokenClaims()
{
if (AccessToken == null)
{
return new Dictionary<string, object>();
}
// header.payload.signature
var payload = AccessToken.Value.Split(".")[1];
var base64Payload = payload.Replace('-', '+').Replace('_', '/')
.PadRight(payload.Length + (4 - payload.Length % 4) % 4, '=');
return JsonSerializer.Deserialize<IDictionary<string, object>>(
Convert.FromBase64String(base64Payload));
}
}
Memeriksa konten JSON Web Token (JWT)
Untuk mendekode JSON Web Token (JWT), gunakan alat jwt.ms Microsoft. Nilai di UI tidak pernah meninggalkan browser Anda.
Contoh JWT yang dikodekan (disingkat untuk tampilan):
eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q
Contoh JWT yang didekodekan oleh alat untuk aplikasi yang mengautentikasi terhadap Azure AAD B2C:
{
"typ": "JWT",
"alg": "RS256",
"kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
"exp": 1610059429,
"nbf": 1610055829,
"ver": "1.0",
"iss": "https://mysiteb2c.b2clogin.com/5cc15ea8-a296-4aa3-97e4-226dcc9ad298/v2.0/",
"sub": "5ee963fb-24d6-4d72-a1b6-889c6e2c7438",
"aud": "70bde375-fce3-4b82-984a-b247d823a03f",
"nonce": "b2641f54-8dc4-42ca-97ea-7f12ff4af871",
"iat": 1610055829,
"auth_time": 1610055822,
"idp": "idp.com",
"tfp": "B2C_1_signupsignin"
}.[Signature]
Sumber Daya Tambahan:
- Mengonfigurasi domain penerbit aplikasi
- Manifes aplikasi ID Microsoft Entra: atribut identifierUris
- Skenario keamanan tambahan Blazor WebAssembly ASP.NET Core
- Membuat versi kustom pustaka JavaScript Authentication.MSAL
- Permintaan API web yang tidak diaauthenticated atau tidak sah di aplikasi dengan klien default yang aman
- Autentikasi cloud dengan Azure Active Directory B2C di ASP.NET Core
- Tutorial: Membuat penyewa Azure Active Directory B2C
- Tutorial: Mendaftarkan aplikasi di Azure Active Directory B2C
- dokumentasi platform identitas Microsoft
ASP.NET Core