Mengamankan aplikasi mandiri ASP.NET Core Blazor WebAssembly dengan pustaka Autentikasi

Artikel ini menjelaskan cara mengamankan aplikasi mandiri ASP.NET Core Blazor WebAssembly dengan Blazor WebAssembly pustaka Autentikasi.

Pustaka Blazor WebAssembly Autentikasi (Authentication.js) hanya mendukung alur kode otorisasi Proof Key for Code Exchange (PKCE) melalui Microsoft Authentication Library (MSAL, msal.js). Untuk menerapkan alur hibah lainnya, akses panduan MSAL untuk menerapkan MSAL secara langsung, tetapi kami tidak mendukung atau merekomendasikan penggunaan alur hibah selain PKCE untuk Blazor aplikasi.

Untuk panduan Microsoft Entra (ME-ID) dan Azure Active Directory B2C (AAD B2C), jangan ikuti panduan dalam topik ini. Lihat Mengamankan aplikasi mandiri ASP.NET Core Blazor WebAssembly dengan MICROSOFT Entra ID atau Mengamankan aplikasi mandiri ASP.NET Core Blazor WebAssembly dengan Azure Active Directory B2C.

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

Panduan

Sub bagian dari panduan menjelaskan cara:

• Mendaftarkan aplikasi
• Blazor Membuat aplikasi
• Menjalankan aplikasi

Mendaftarkan aplikasi

Daftarkan aplikasi dengan Penyedia OpenID Connect (OIDC)Identity (IP) mengikuti panduan yang disediakan oleh penjaga IP.

Catat informasi berikut:

• Otoritas (misalnya, https://accounts.google.com/).
• ID aplikasi (klien) (misalnya, 2...7-e...q.apps.googleusercontent.com).
• Konfigurasi IP tambahan (lihat dokumentasi IP).

Catatan

IP harus menggunakan OIDC. Misalnya, IP Facebook bukan penyedia yang mematuhi OIDC, sehingga panduan dalam topik ini tidak berfungsi dengan IP Facebook. Untuk informasi selengkapnya, lihat Mengamankan ASP.NET Core Blazor WebAssembly.

Blazor Membuat aplikasi

Untuk membuat aplikasi mandiri Blazor WebAssembly yang menggunakan Microsoft.AspNetCore.Components.WebAssembly.Authentication pustaka, ikuti panduan untuk pilihan alat Anda. Jika menambahkan dukungan untuk autentikasi, lihat bagian aplikasi di artikel ini untuk panduan tentang menyiapkan dan mengonfigurasi aplikasi.

Visual Studio

Untuk membuat proyek baru Blazor WebAssembly dengan mekanisme autentikasi:

Setelah memilih Blazor WebAssembly templat Aplikasi , atur jenis Autentikasi ke Akun Individual.

Pilihan Akun Individu menggunakan sistem ASP.NET Core Identity . Pilihan ini menambahkan dukungan autentikasi dan tidak mengakibatkan penyimpanan pengguna dalam database. Bagian berikut dari artikel ini memberikan detail lebih lanjut.

Visual Studio Code / .NET CLI

Buat proyek baru Blazor WebAssembly dengan mekanisme autentikasi di folder kosong. Individual Tentukan mekanisme autentikasi dengan -au|--auth opsi untuk menggunakan sistem ASP.NET CoreIdentity. Pilihan ini menambahkan dukungan autentikasi dan tidak mengakibatkan penyimpanan pengguna dalam database. Bagian berikut dari artikel ini memberikan detail lebih lanjut.

dotnet new blazorwasm -au Individual -o {PROJECT NAME}

Placeholder	Contoh
{PROJECT NAME}	BlazorSample

Lokasi output yang ditentukan dengan -o|--output opsi membuat folder proyek jika tidak ada dan menjadi bagian dari nama proyek.

Untuk informasi lebih lanjut, lihat perintah dotnet new di Panduan NET Core.

Mengonfigurasikan aplikasi

Konfigurasikan aplikasi dengan mengikuti panduan IP. Minimal, aplikasi memerlukan Local:Authority pengaturan konfigurasi dan Local:ClientId dalam file aplikasi wwwroot/appsettings.json :

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

Contoh Google OAuth 2.0 OIDC untuk aplikasi yang berjalan pada localhost alamat di port 5001:

{
  "Local": {
    "Authority": "https://accounts.google.com/",
    "ClientId": "2...7-e...q.apps.googleusercontent.com",
    "PostLogoutRedirectUri": "https://localhost:5001/authentication/logout-callback",
    "RedirectUri": "https://localhost:5001/authentication/login-callback",
    "ResponseType": "code"
  }
}

URI pengalihan (https://localhost:5001/authentication/login-callback) terdaftar di konsol{NAME}>> Google API di URI pengalihan Resmi Kredensial, di mana {NAME} adalah nama klien aplikasi dalam daftar aplikasi ID Klien OAuth 2.0 dari konsol GOOGLE API.

Catatan

Menyediakan nomor port untuk localhost URI pengalihan tidak diperlukan untuk beberapa IP OIDC sesuai spesifikasi OAuth 2.0. Beberapa IP mengizinkan URI pengalihan untuk alamat loopback untuk menghilangkan port. Yang lain memungkinkan penggunaan kartubebas untuk nomor port (misalnya, *). Untuk informasi tambahan, lihat dokumentasi IP.

Menjalankan aplikasi

Gunakan salah satu pendekatan berikut untuk menjalankan aplikasi:

• Visual Studio
  • Pilih tombol Jalankan.
  • Gunakan Debug>Mulai Debugging dari menu.
  • Tekan F5.
• Shell perintah .NET CLI: Jalankan dotnet watch perintah (atau dotnet run) dari folder aplikasi.

Bagian aplikasi

Bagian ini menjelaskan bagian aplikasi yang dihasilkan dari Blazor WebAssembly templat proyek dan cara aplikasi dikonfigurasi. 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.

Paket autentikasi

Saat aplikasi dibuat untuk menggunakan Akun Pengguna Individual, aplikasi secara otomatis menerima referensi paket untuk paket tersebut Microsoft.AspNetCore.Components.WebAssembly.Authentication . 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.AspNetCore.Components.WebAssembly.Authentication 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.

Dukungan layanan autentikasi

Dukungan untuk mengautentikasi pengguna menggunakan OpenID Connect (OIDC) terdaftar dalam kontainer layanan dengan AddOidcAuthentication metode ekstensi yang disediakan oleh Microsoft.AspNetCore.Components.WebAssembly.Authentication paket.

Metode ini AddOidcAuthentication menerima panggilan balik untuk mengonfigurasi parameter yang diperlukan untuk mengautentikasi aplikasi menggunakan OIDC. Nilai yang diperlukan untuk mengonfigurasi aplikasi dapat diperoleh dari IP yang mematuhi OIDC. Dapatkan nilai saat Anda mendaftarkan aplikasi, yang biasanya terjadi di portal online mereka.

Untuk aplikasi baru, berikan nilai untuk {AUTHORITY} tempat penampung dan {CLIENT ID} dalam konfigurasi berikut. Berikan nilai konfigurasi lain yang diperlukan untuk digunakan dengan IP aplikasi. Contohnya adalah untuk Google, yang memerlukan PostLogoutRedirectUri, , RedirectUridan ResponseType. Jika menambahkan autentikasi ke aplikasi, tambahkan kode dan konfigurasi berikut secara manual ke aplikasi dengan nilai untuk tempat penampung dan nilai konfigurasi lainnya.

Dalam file Program:

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("Local", options.ProviderOptions);
});

wwwroot/appsettings.json konfigurasi

Konfigurasi disediakan oleh wwwroot/appsettings.json file:

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

Cakupan token akses

Blazor WebAssembly Templat secara otomatis mengonfigurasi cakupan default untuk openid dan profile.

Blazor WebAssembly Templat tidak secara otomatis mengonfigurasi aplikasi untuk meminta token akses untuk API yang aman. Untuk menyediakan token akses sebagai bagian dari alur masuk, tambahkan cakupan ke cakupan token default dari OidcProviderOptions. Jika menambahkan autentikasi ke aplikasi, tambahkan kode berikut secara manual dan konfigurasikan URI cakupan.

Dalam file Program:

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

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

• Meminta token akses tambahan
• Melampirkan token ke permintaan keluar

Mengimpor file

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

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.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

Komponen aplikasi

Komponen App (App.razor) mirip dengan komponen yang App ditemukan di Blazor Server aplikasi:

• 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 di ProjectTemplates 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

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

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 untuk Hosted sama dengan true 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

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 (?).

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 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:

  • Stack Overflow (tag: blazor)
  • Tim Slack ASP.NET Core
  • 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, 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 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 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:

  1. Di portal Azure, akses manifes aplikasi.
  2. Atur atribut ke null allowPublicClient 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 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
  • 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).
  • 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:

1. Hapus cache paket NuGet sistem lokal dengan mengeksekusi dotnet nuget locals all --clear dari shell perintah.
2. Hapus folder dan obj proyekbin.
3. Pulihkan dan bangun ulang proyek.
4. 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.

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:

• Skenario keamanan tambahan Blazor WebAssembly ASP.NET Core
• Permintaan API web yang tidak diaauthenticated atau tidak sah di aplikasi dengan klien default yang aman
• Konfigurasikan ASP.NET Core untuk bekerja dengan server proksi dan load balancer: Mencakup panduan tentang:
  • Menggunakan Forwarded Headers Middleware untuk mempertahankan informasi skema HTTPS di seluruh server proksi dan jaringan internal.
  • Skenario tambahan dan kasus penggunaan, termasuk konfigurasi skema manual, perubahan jalur permintaan untuk perutean permintaan yang benar, dan meneruskan skema permintaan untuk proksi terbalik Linux dan non-IIS.