Bagikan melalui


Mengamankan aplikasi ASP.NET Core Blazor WebAssembly yang dihosting dengan MICROSOFT Entra ID

Important

Templat proyek Blazor WebAssembly yang dihosting dihapus dari kerangka kerja dengan rilis .NET 8 (November 2023). Panduan dalam artikel ini hanya didukung untuk .NET 7 atau yang lebih lama. Aplikasi Blazor WebAssembly yang dihosting dan diperbarui setiap rilis terus menerima dukungan produk. Sebagai alternatif, ubah struktur aplikasi menjadi aplikasi Blazor WebAssembly mandiri atau Blazor Web App.

Artikel ini menjelaskan cara membuat solusi yang dihosting Blazor WebAssembly yang menggunakan ID Microsoft Entra (ME-ID) untuk autentikasi. Artikel ini berfokus pada aplikasi penyewa tunggal dengan pendaftaran aplikasi Azure penyewa tunggal.

Artikel ini tidak mencakup pendaftaran ME-ID multi-tenant. Untuk informasi selengkapnya, lihat Membuat aplikasi Anda menjadi multi-penyewa.

Artikel ini berfokus pada penggunaan penyewa Microsoft Entra, seperti yang dijelaskan dalam Mulai Cepat: Menyiapkan penyewa. Jika aplikasi terdaftar di sebuah penyewa Azure Active Directory B2C, seperti yang dijelaskan dalam Tutorial: Membuat penyewa Azure Active Directory B2C, tetapi mengikuti panduan dalam artikel ini, URI ID Aplikasi dikelola secara berbeda oleh ME-ID. Untuk informasi selengkapnya, lihat bagian Penggunaan penyewa Azure Active Directory B2C di artikel ini.

Untuk cakupan skenario keamanan tambahan setelah membaca artikel ini, lihat Blazor WebAssembly tambahan ASP.NET Core.

Walkthrough

Subbagian dari petunjuk menjelaskan cara:

  • Membuat penyewa di Azure
  • Mendaftarkan aplikasi API server di Azure
  • Mendaftarkan aplikasi klien di Azure
  • Blazor Membuat aplikasi
  • Server appsettings.json Mengubah konfigurasi
  • Mengubah skema cakupan token akses default
  • Menjalankan aplikasi

Membuat penyewa di Azure

Ikuti panduan di Panduan Cepat: Menyiapkan tenant untuk membuat tenant di ME-ID.

Mendaftarkan aplikasi API server di Azure

Daftarkan aplikasi ME-ID untuk aplikasi API Server:

  1. Navigasikan ke ID Microsoft Entra di portal Azure. Pilih Aplikasi> Pendaftaran aplikasi di bilah samping. Pilih tombol Pendaftaran baru.
  2. Berikan ).
  3. Pilih Jenis akun yang didukung. Anda dapat memilih Akun di direktori organisasi ini saja (tenant tunggal) untuk pengalaman tersebut.
  4. Aplikasi API Server tidak memerlukan URI Pengalihan dalam skenario ini, jadi biarkan daftar dropdown Pilih Platform dalam keadaan tidak dipilih dan jangan masukkan URI Pengalihan.
  5. Artikel ini mengasumsikan aplikasi terdaftar di penyewa Microsoft Entra . Jika aplikasi terdaftar di penyewa Azure Active Directory B2C, kotak centang Izin>Berikan persetujuan admin untuk izin openid dan offline_access ada dan dipilih. Batal pilih kotak centang untuk menonaktifkan pengaturan. Saat menggunakan penyewa Active Azure Directory , kotak centang tidak ada.
  6. Pilih Daftarkan.

Catat informasi berikut:

  • ID Aplikasi aplikasi API Server (klien) (misalnya, 00001111-aaaa-2222-bbbb-3333cccc4444)
  • ID direktori (penyewa) (misalnya, aaaabbbb-0000-cccc-1111-dddd2222eeee)
  • Domain Utama/Penerbit/Penyewa ME-ID (misalnya, contoso.onmicrosoft.com): Domain tersedia sebagai domain Penerbit di bilah Branding portal Azure untuk aplikasi terdaftar.

Dalam API permissions, hapus Microsoft Graph>User.Read permission, karena aplikasi API server tidak memerlukan akses API tambahan sekadar untuk pengguna masuk dan memanggil titik akhir API server.

Di Mengekspos API:

  1. Konfirmasi atau tambahkan URI ID Aplikasi dalam format api://{SERVER API APP CLIENT ID}.
  2. Pilih Tambahkan cakupan.
  3. Klik Simpan dan lanjutkan.
  4. Berikan nama Cakupan (misalnya, API.Access).
  5. Berikan nama tampilan persetujuan Admin (misalnya, Access API).
  6. Berikan deskripsi persetujuan Admin (misalnya, Allows the app to access server app API endpoints.).
  7. Konfirmasikan bahwa Status diatur ke Diaktifkan.
  8. Pilih Tambahkan cakupan.

Catat informasi berikut:

  • GUID URI ID Aplikasi (misalnya, rekaman 00001111-aaaa-2222-bbbb-3333cccc4444 dari URI ID Aplikasi dari api://00001111-aaaa-2222-bbbb-3333cccc4444)
  • Nama cakupan (misalnya, API.Access)

Important

Jika nilai kustom digunakan untuk URI ID Aplikasi, perubahan konfigurasi diperlukan untuk Server aplikasi dan Client setelah aplikasi dibuat dari Blazor WebAssembly templat proyek. Untuk informasi selengkapnya, lihat bagian Penggunaan URI ID Aplikasi kustom.

Mendaftarkan aplikasi klien di Azure

Daftarkan aplikasi ME-ID untuk aplikasi Klien:

  1. Navigasi ke ID Microsoft Entra di portal Azure. Pilih Pendaftaran aplikasi di bar samping. Pilih tombol Pendaftaran baru.
  2. Berikan Nama untuk aplikasi (misalnya, Blazor ME-ID Klien).
  3. Pilih Jenis akun yang didukung. Anda dapat memilih Akun di direktori organisasi ini saja (tenant tunggal) untuk pengalaman tersebut.
  4. Atur daftar dropdown Pengalihan URI ke Aplikasi halaman tunggal (SPA) dan berikan URI pengalihan berikut: 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 menyediakan localhost URI pengalihan. Pastikan nomor port disertakan untuk port selain :443 dalam URI pengalihan produksi yang Anda tambahkan.
  5. Artikel ini mengasumsikan aplikasi terdaftar di penyewa Microsoft Entra . Jika aplikasi terdaftar di penyewa Azure Active Directory B2C, kotak centang Izin>Berikan persetujuan admin untuk izin openid dan offline_access ada dan dipilih. Batal pilih kotak centang untuk menonaktifkan pengaturan. Saat menggunakan penyewa Active Azure Directory , kotak centang tidak ada.
  6. Pilih Daftarkan.

Note

Menyediakan nomor port untuk localhost URI pengalihan ME-ID tidak diperlukan. Untuk informasi selengkapnya, lihatlah Batasan dan limitasi URI pengalihan (URL balasan): Pengecualian localhost (Dokumentasi Entra).

Client Rekam ID Aplikasi aplikasi (klien) (misalnya, 11112222-bbbb-3333-cccc-4444dddd5555).

Dalam Autentikasi>konfigurasi Platform>Aplikasi halaman tunggal:

  1. Pastikan URI pengalihan https://localhost/authentication/login-callback ada.
  2. Di bagian Pemberian Izin Implisit, pastikan bahwa kotak centang untuk Token Akses dan Token ID tidak dipilih. Pemberian implisit tidak disarankan untuk aplikasi Blazor yang menggunakan MSAL v2.0 atau versi yang lebih baru. Untuk informasi selengkapnya, lihat Mengamankan ASP.NET Core Blazor WebAssembly.
  3. Pengaturan default yang tersisa untuk aplikasi dapat diterima untuk pengalaman menggunakan aplikasi ini.
  4. Pilih tombol Simpan jika Anda membuat perubahan.

Dalam izin API:

  1. Konfirmasikan bahwa aplikasi memiliki izin Microsoft Graph>User.Read .
  2. Pilih Tambahkan izin diikuti oleh API Saya.
  3. Pilih ). 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).
  4. Buka daftar API.
  5. Aktifkan akses ke API (misalnya, API.Access).
  6. Pilih Tambahkan izin.
  7. Pilih tombol Berikan persetujuan admin untuk {TENANT NAME} . Pilih Ya untuk mengonfirmasi.

Important

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. Tambahkan ID Aplikasi (klien) dari aplikasi Client (misalnya, 11112222-bbbb-3333-cccc-4444dddd5555).

Blazor Membuat aplikasi

Di folder kosong, ganti placeholder dalam perintah berikut dengan informasi yang direkam sebelumnya dan jalankan perintah di dalam jendela shell perintah.

dotnet new blazorwasm -au SingleOrg --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} --tenant-id "{TENANT ID}"

Warning

Hindari menggunakan tanda hubung (-) pada nama aplikasi {PROJECT NAME} yang mengganggu 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 Tanda hubung dalam nama proyek yang dihosting Blazor WebAssembly mengganggu keamanan OIDC (dotnet/aspnetcore #35337).

Placeholder Nama portal Microsoft Azure Example
{PROJECT NAME} BlazorSample
{CLIENT APP CLIENT ID} ID aplikasi (klien) untuk Client aplikasi 11112222-bbbb-3333-cccc-4444dddd5555
{DEFAULT SCOPE} Nama Ruang Lingkup API.Access
{SERVER API APP CLIENT ID} ID aplikasi (klien) untuk aplikasi API Server 00001111-aaaa-2222-bbbb-3333cccc4444
{SERVER API APP ID URI GUID} ID Aplikasi URI GUID 00001111-aaaa-2222-bbbb-3333cccc4444 (GUID ONLY, cocok dengan {SERVER API APP CLIENT ID})
{TENANT DOMAIN} Domain Primer/Penerbit/Penyewa contoso.onmicrosoft.com
{TENANT ID} ID direktori penyewa aaaabbbb-0000-cccc-1111-dddd2222eeee

Lokasi output yang ditentukan dengan opsi -o|--output akan membuat folder proyek jika folder tersebut belum ada dan opsi tersebut menjadi bagian dari nama proyek. Hindari menggunakan tanda hubung (-) dalam nama aplikasi yang merusak pembentukan pengidentifikasi aplikasi OIDC (lihat PERINGATAN sebelumnya).

Important

Jika nilai kustom digunakan untuk URI ID Aplikasi, perubahan konfigurasi diperlukan untuk Server aplikasi dan Client setelah aplikasi dibuat dari Blazor WebAssembly templat proyek. Untuk informasi selengkapnya, lihat bagian Penggunaan URI ID Aplikasi kustom.

Menjalankan aplikasi

Jalankan aplikasi dari Server proyek. Saat menggunakan Visual Studio, Anda dapat:

  • Pilih panah dropdown di samping tombol Jalankan . Buka Konfigurasi Proyek Startup dari daftar dropdown. Pilih opsi Proyek startup tunggal. Konfirmasi atau ubah proyek yang terkait dengan proyek startup menjadi proyek Server.

  • 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 antarmuka baris perintah, masuk ke folder proyek dari Server solusi. Jalankan dotnet watch perintah (atau dotnet run).

Konfigurasikan User.Identity.Name

Panduan di bagian ini mencakup pengisian User.Identity.Name opsional dengan nilai dari name klaim.

Server API aplikasi diisi User.Identity.Name dengan nilai dari http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name jenis klaim (misalnya, bbbb0000-cccc-1111-dddd-2222eeee3333@contoso.onmicrosoft.com).

Untuk mengonfigurasi aplikasi untuk menerima nilai dari jenis klaim 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. Tambahkan bagian konfigurasi berikut AzureAd :

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "{TENANT DOMAIN}",
    "TenantId": "{TENANT ID}",
    "ClientId": "{SERVER API APP CLIENT ID}",
    "CallbackPath": "/signin-oidc",
    "Scopes": "{SCOPES}"
  }
}

Example:

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "contoso.onmicrosoft.com",
    "TenantId": "aaaabbbb-0000-cccc-1111-dddd2222eeee",
    "ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
    "CallbackPath": "/signin-oidc",
    "Scopes": "API.Access"
  }
}

Important

Server Jika aplikasi terdaftar untuk menggunakan URI ID Aplikasi kustom di ME-ID (bukan dalam format api://{SERVER API APP CLIENT ID}default ), lihat bagian Penggunaan URI ID Aplikasi kustom. Perubahan diperlukan di kedua aplikasi Server dan Client.

Paket autentikasi

Bagian ini berkaitan dengan aplikasi solusi Server .

Dukungan untuk mengautentikasi dan mengotorisasi panggilan ke API web ASP.NET Core dengan platform identitas Microsoft disediakan oleh paket Microsoft.Identity.Web.

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.

Aplikasi Server solusi terhost Blazor yang dibuat dari Blazor WebAssembly template menyertakan Microsoft.Identity.Web.UI paketnya. Paket menambahkan UI untuk otentikasi pengguna di aplikasi web dan tidak digunakan oleh kerangka kerja Blazor. 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 AddMicrosoftIdentityWebApi mengonfigurasi layanan untuk melindungi API web dengan platform identitas Microsoft v2.0. Metode ini mengharapkan AzureAd bagian dalam konfigurasi aplikasi dengan pengaturan yang diperlukan untuk menginisialisasi opsi autentikasi.

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(Configuration.GetSection("AzureAd"));

Note

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 ASP.NET Core dan pengumuman ASP.NET Core (aspnet/Announcements #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.UseAuthentication();
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 = "AzureAd: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:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/{TENANT ID}",
    "ClientId": "{CLIENT APP CLIENT ID}",
    "ValidateAuthority": true
  }
}

Example:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/e86c78e2-...-918e0565a45e",
    "ClientId": "11112222-bbbb-3333-cccc-4444dddd5555",
    "ValidateAuthority": true
  }
}

Paket autentikasi

Bagian ini berkaitan dengan aplikasi solusi Client .

Saat aplikasi dibuat untuk menggunakan Akun Kerja atau Sekolah (SingleOrg), aplikasi secara otomatis menerima referensi paket untuk Microsoft Authentication Library (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.

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.

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 aplikasi 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"));

Placeholder {PROJECT NAME} adalah nama proyek saat pembuatan solusi. Misalnya, memberikan BlazorSample sebagai nama proyek menghasilkan HttpClient yang dinamai 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("AzureAd", options.ProviderOptions.Authentication);
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

Metode ini AddMsalAuthentication menerima panggilan balik untuk mengonfigurasi parameter yang diperlukan untuk mengautentikasi aplikasi. Nilai yang diperlukan untuk mengonfigurasi aplikasi dapat diperoleh dari konfigurasi ME-ID Portal Microsoft Azure 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 dalam permintaan masuk.
  • Digunakan untuk menyediakan token akses segera setelah autentikasi.

Cakupan tambahan dapat ditambahkan sesuai kebutuhan dalam Program file:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

Tentukan cakupan tambahan dengan AdditionalScopesToConsent:

options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");

Note

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(
    "api://00001111-aaaa-2222-bbbb-3333cccc4444/API.Access");

Untuk informasi selengkapnya, lihat bagian berikut dari artikel Skenario tambahan:

Mode masuk

Bagian ini berkaitan dengan aplikasi solusi Client .

Kerangka kerja secara default menggunakan mode masuk pop-up dan akan beralih ke mode masuk pengalihan jika pop-up tidak dapat dibuka. Konfigurasikan MSAL untuk menggunakan mode masuk pengalihan dengan mengatur properti LoginMode dari MsalProviderOptions ke redirect:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.LoginMode = "redirect";
});

Pengaturan default adalah popup, dan nilai string tidak membedakan huruf besar dan kecil.

Mengimpor file

Bagian ini berkaitan dengan aplikasi solusi Client .

Namespace Microsoft.AspNetCore.Components.Authorization tersedia di seluruh aplikasi melalui _Imports.razor file:

...
@using Microsoft.AspNetCore.Components.Authorization
...

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 App yang ditemukan di aplikasi Blazor Server.

  • Komponen CascadingAuthenticationState mengatur agar AuthenticationState dapat diakses oleh bagian lain dari aplikasi ini.
  • Komponen AuthorizeRouteView memastikan bahwa pengguna saat ini diberikan otorisasi untuk mengakses halaman tertentu atau, jika tidak, merender komponen RedirectToLogin.
  • 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. Periksa komponen App (App.razor) dalam aplikasi yang dihasilkan.

  • App Periksa komponen (App.razor) di sumber referensi. Pilih versi dari pemilih cabang, dan cari komponen di ProjectTemplates folder repositori karena App lokasi komponen telah berubah selama bertahun-tahun.

    Note

    Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag untuk rilis tertentu, gunakan menu 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:
    • Kondisi riwayat navigasi di ASP.NET Core di .NET 7 atau yang lebih baru.
    • String kueri di ASP.NET Core dalam .NET 6 atau versi sebelumnya.

RedirectToLogin Periksa komponen dalam sumber referensi. Lokasi komponen berubah dari waktu ke waktu, jadi gunakan alat pencarian GitHub untuk menemukan komponen.

Jalur masuk dapat disesuaikan oleh aplikasi (RemoteAuthenticationApplicationPathsOptions.LogInPath, default kerangka kerja (dotnet/aspnetcore sumber referensi)). Komponen templat RedirectToLogin proyek menggunakan jalur masuk default .authentication/login

Note

Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag untuk rilis tertentu, gunakan menu dropdown Beralih cabang atau tag. Untuk informasi lebih lanjut, lihat Cara memilih tag versi kode sumber ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Jika aplikasi menyesuaikan jalur masuk, lakukan salah satu pendekatan berikut:

  • Cocokkan jalur dalam string yang dikodekan secara permanen dalam RedirectToLogin komponen.

  • Injeksi RemoteAuthenticationOptions untuk mendapatkan nilai yang dikonfigurasi. Misalnya, ambil pendekatan ini saat Anda menyesuaikan jalur dengan AddApiAuthorization. Tambahkan arahan berikut di bagian RedirectToLogin atas komponen:

    @using Microsoft.Extensions.Options
    @inject IOptionsSnapshot<RemoteAuthenticationOptions<ApiAuthorizationProviderOptions>> RemoteOptions
    

    Ubah pengalihan komponen dalam OnInitialized metode :

    - Navigation.NavigateToLogin("authentication/login");
    + Navigation.NavigateToLogin(RemoteOptions.Get(Options.DefaultName)
    +     .AuthenticationPaths.LogInPath);
    

    Note

    Jika jalur lain berbeda dari jalur templat proyek atau jalur default kerangka kerja, jalur tersebut harus dikelola dengan cara yang sama.

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 yang setara dengan Hosted digunakan untuk true.

    Note

    Tautan dokumentasi ke sumber referensi .NET biasanya memuat cabang default repositori, yang mewakili pengembangan saat ini untuk rilis .NET berikutnya. Untuk memilih tag untuk rilis tertentu, gunakan menu 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 :

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" />

@code {
    [Parameter]
    public string? Action { get; set; }
}

Note

Jenis referensi nullable (NRT) dan analisis statis status null oleh .NET compiler didukung di ASP.NET Core pada .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 Server juga harus menggunakan [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 token tidak dapat disediakan tanpa interaksi pengguna yang mengakibatkan permintaan gagal:

  • ASP.NET Core di .NET 7 atau yang lebih baru: Aplikasi menavigasi untuk AccessTokenResult.InteractiveRequestUrl menggunakan yang diberikan AccessTokenResult.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();
        }
    }
}

Penggunaan penyewa Azure Active Directory B2C

Jika aplikasi terdaftar di sebuah penyewa Azure Active Directory B2C, seperti yang dijelaskan dalam Tutorial: Membuat penyewa Azure Active Directory B2C, tetapi mengikuti panduan dalam artikel ini, URI ID Aplikasi dikelola secara berbeda oleh ME-ID.

Anda dapat memeriksa jenis penyewa yang ada dengan memilih tautan Kelola penyewa di bagian atas organisasi ME-ID pada Gambaran Umum. Periksa nilai kolom Tipe Tenant organisasi. Bagian ini berkaitan dengan aplikasi yang mengikuti panduan dalam artikel ini tetapi terdaftar di penyewa Azure Active Directory B2C .

Alih-alih URI ID Aplikasi yang cocok dengan format api://{SERVER API APP CLIENT ID OR CUSTOM VALUE}, URI ID Aplikasi memiliki format https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}. Perbedaan ini memengaruhi Client dan Server konfigurasi aplikasi:

  • Untuk aplikasi API server, atur Audience di file pengaturan aplikasi (appsettings.json) agar sesuai dengan audiens aplikasi (URI ID Aplikasi) yang disediakan oleh portal Azure tanpa garis miring berikutnya:

    "Audience": "https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}"
    

    Example:

    "Audience": "https://contoso.onmicrosoft.com/00001111-aaaa-2222-bbbb-3333cccc4444"
    
  • Program Dalam file Client aplikasi, atur audiens cakupan (URI ID Aplikasi) agar sesuai dengan audiens aplikasi API server:

    options.ProviderOptions.DefaultAccessTokenScopes
        .Add("https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}/{DEFAULT SCOPE}");
    

    Dalam cakupan sebelumnya, bagian dari nilai URI/audiens ID Aplikasi adalah https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}, yang tidak menyertakan garis miring berikutnya (/) dan tidak menyertakan nama cakupan ({DEFAULT SCOPE}).

    Example:

    options.ProviderOptions.DefaultAccessTokenScopes
        .Add("https://contoso.onmicrosoft.com/00001111-aaaa-2222-bbbb-3333cccc4444/API.Access");
    

    Dalam cakupan sebelumnya, bagian dari nilai URI/audiens ID Aplikasi adalah https://contoso.onmicrosoft.com/00001111-aaaa-2222-bbbb-3333cccc4444, yang tidak menyertakan garis miring berikutnya (/) dan tidak menyertakan nama cakupan (API.Access).

Penggunaan URI ID Aplikasi kustom

Jika URI ID Aplikasi adalah nilai kustom, Anda harus memperbarui URI cakupan token akses default secara manual di Client aplikasi dan menambahkan audiens ke Server konfigurasi ME-ID aplikasi.

Important

Konfigurasi berikut tidak diperlukan saat menggunakan URI ID Aplikasi default dari api://{SERVER API APP CLIENT ID}.

Contoh URI ID Aplikasi dari urn://custom-app-id-uri dan nama cakupan API.Access.

  • Dalam file Program pada aplikasi Client:

    options.ProviderOptions.DefaultAccessTokenScopes.Add(
        "urn://custom-app-id-uri/API.Access");
    
  • Di appsettings.json aplikasi Server, tambahkan Audience entri dengan hanya URI ID Aplikasi tanpa garis miring di akhir.

    "Audience": "urn://custom-app-id-uri"
    

Troubleshoot

Logging

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

  • 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 dijalankan harus cocok untuk alamat selain localhost.

    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 tampak 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 dapat ditemukan dalam artikel berikut:

    • Untuk rilis Blazor di mana 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 kepada 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).

  • 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 login callback 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 Azure, akses manifes aplikasi.
    2. Atur atribut ke allowPublicClientnull 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:

  • 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 path ke file eksekusi browser.
      • 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 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} penampung adalah URL yang akan dibuka (misalnya, https://localhost:5001).
    • Berikan nama di bidang Nama Ramah. 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 pengujian, atau pengaturan 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 dari shell perintah.
  2. Hapus folder bin dan obj milik proyek.
  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 NuGet Gallery.

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/11112222-bbbb-3333-cccc-4444dddd5555/v2.0/",
  "sub": "aaaaaaaa-0000-1111-2222-bbbbbbbbbbbb",
  "aud": "00001111-aaaa-2222-bbbb-3333cccc4444",
  "nonce": "bbbb0000-cccc-1111-dddd-2222eeee3333",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

Sumber daya tambahan