status autentikasi ASP.NET Core Blazor

Artikel ini menjelaskan cara membuat penyedia status autentikasi kustom dan menerima pemberitahuan perubahan status autentikasi pengguna dalam kode.

Pendekatan umum yang diambil untuk aplikasi sisi server dan sisi Blazor klien serupa tetapi berbeda dalam implementasinya yang tepat, sehingga artikel ini mempivot antara aplikasi sisi Blazor server dan aplikasi sisi Blazor klien. Gunakan pemilih pivot di bagian atas artikel untuk mengubah pivot artikel agar sesuai dengan jenis Blazor proyek yang sedang Anda kerjakan:

• Aplikasi sisi Blazor server (Server pivot): Blazor Server untuk .NET 7 atau yang lebih lama dan proyek Blazor Web App server untuk .NET 8 atau yang lebih baru.
• Aplikasi sisi Blazor klien (Blazor WebAssembly pivot): Blazor WebAssembly untuk semua versi .NET atau .Client proyek Blazor Web App untuk .NET 8 atau yang lebih baru.

Kelas abstrak AuthenticationStateProvider

Blazor Kerangka kerja mencakup kelas abstrak AuthenticationStateProvider untuk memberikan informasi tentang status autentikasi pengguna saat ini dengan anggota berikut:

• GetAuthenticationStateAsync: Secara asinkron mendapatkan status autentikasi pengguna saat ini.
• AuthenticationStateChanged: Peristiwa yang memberikan pemberitahuan ketika status autentikasi telah berubah. Misalnya, peristiwa ini dapat dimunculkan jika pengguna masuk atau keluar dari aplikasi.
• NotifyAuthenticationStateChanged: Menaikkan peristiwa perubahan status autentikasi.

Mengimplementasikan AuthenticationStateProvider kustom

Aplikasi harus mereferensikan Microsoft.AspNetCore.Components.Authorization paket NuGet, yang menyediakan dukungan autentikasi dan otorisasi untuk Blazor 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.

Konfigurasikan layanan status autentikasi, otorisasi, dan autentikasi berkala berikut dalam Program file.

Saat Anda membuat Blazor aplikasi dari salah Blazor satu templat proyek dengan autentikasi diaktifkan, aplikasi telah dikonfigurasi sebelumnya dengan pendaftaran layanan berikut, yang mencakup mengekspos status autentikasi sebagai parameter bertingkat. Untuk informasi selengkapnya, lihat Blazor Core dengan informasi tambahan yang disajikan dalam artikel Menyesuaikan konten yang tidak sah dengan Router bagian komponen.

using Microsoft.AspNetCore.Components.Authorization;

...

builder.Services.AddAuthorization();
builder.Services.AddCascadingAuthenticationState();

Di Blazor WebAssembly aplikasi (semua versi .NET) atau .Client proyek Blazor Web App (.NET 8 atau yang lebih baru), konfigurasikan layanan status autentikasi, otorisasi, dan autentikasi berskala dalam Program file.

Saat Anda membuat Blazor aplikasi dari salah Blazor satu templat proyek dengan autentikasi diaktifkan, aplikasi telah dikonfigurasi sebelumnya dengan pendaftaran layanan berikut, yang mencakup mengekspos status autentikasi sebagai parameter bertingkat. Untuk informasi selengkapnya, lihat Blazor Core dengan informasi tambahan yang disajikan dalam artikel Menyesuaikan konten yang tidak sah dengan Router bagian komponen.

using Microsoft.AspNetCore.Components.Authorization;

...

builder.Services.AddAuthorizationCore();
builder.Services.AddCascadingAuthenticationState();

Subkelas AuthenticationStateProvider dan ambil GetAuthenticationStateAsync alih untuk membuat status autentikasi pengguna. Dalam contoh berikut, semua pengguna diautentikasi dengan nama mrfibulipengguna .

CustomAuthStateProvider.cs:

using System.Security.Claims;
using Microsoft.AspNetCore.Components.Authorization;

public class CustomAuthStateProvider : AuthenticationStateProvider
{
    public override Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        var identity = new ClaimsIdentity(
        [
            new Claim(ClaimTypes.Name, "mrfibuli"),
        ], "Custom Authentication");

        var user = new ClaimsPrincipal(identity);

        return Task.FromResult(new AuthenticationState(user));
    }
}

Catatan

Kode sebelumnya yang membuat penggunaan baru ClaimsIdentity inisialisasi koleksi yang disederhanakan yang diperkenalkan dengan C# 12 (.NET 8). Untuk informasi selengkapnya, lihat Ekspresi koleksi - Referensi bahasa C#.

Layanan CustomAuthStateProvider ini terdaftar dalam Program file. Daftarkan layanan yang terlingkup dengan AddScoped:

builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();

Layanan CustomAuthStateProvider ini terdaftar dalam Program file. Daftarkan layanan singleton dengan AddSingleton:

builder.Services.AddSingleton<AuthenticationStateProvider, CustomAuthStateProvider>();

Jika tidak ada, tambahkan @using pernyataan ke _Imports.razor file untuk membuat Microsoft.AspNetCore.Components.Authorization namespace tersedia di seluruh komponen:

@using Microsoft.AspNetCore.Components.Authorization;

Konfirmasi atau ubah komponen tampilan rute menjadi AuthorizeRouteView dalam Router definisi komponen. Lokasi Router komponen berbeda tergantung pada jenis aplikasi. Gunakan pencarian untuk menemukan komponen jika Anda tidak menyadari lokasinya dalam proyek.

<Router ...>
    <Found ...>
        <AuthorizeRouteView RouteData="routeData" 
            DefaultLayout="typeof(Layout.MainLayout)" />
        ...
    </Found>
</Router>

Catatan

Saat Anda membuat Blazor aplikasi dari salah Blazor satu templat proyek dengan autentikasi diaktifkan, aplikasi menyertakan AuthorizeRouteView komponen . Untuk informasi selengkapnya, lihat Blazor Core dengan informasi tambahan yang disajikan dalam artikel Menyesuaikan konten yang tidak sah dengan Router bagian komponen.

Contoh AuthorizeView komponen berikut menunjukkan nama pengguna yang diautentikasi:

<AuthorizeView>
    <Authorized>
        <p>Hello, @context.User.Identity?.Name!</p>
    </Authorized>
    <NotAuthorized>
        <p>You're not authorized.</p>
    </NotAuthorized>
</AuthorizeView>

Untuk panduan tentang penggunaan AuthorizeView, lihat Blazor Core.

Pemberitahuan perubahan status autentikasi

Kustom AuthenticationStateProvider dapat memanggil NotifyAuthenticationStateChanged pada AuthenticationStateProvider kelas dasar untuk memberi tahu konsumen tentang perubahan status autentikasi untuk dirender.

Contoh berikut didasarkan pada penerapan kustom AuthenticationStateProvider dengan mengikuti panduan di bagian Terapkan kustom AuthenticationStateProvider sebelumnya di artikel ini. Jika Anda sudah mengikuti panduan di bagian tersebut, berikut ini CustomAuthStateProvider menggantikan panduan yang diperlihatkan di bagian tersebut.

Implementasi berikut CustomAuthStateProvider mengekspos metode kustom, AuthenticateUser, untuk memasukkan pengguna dan memberi tahu konsumen tentang perubahan status autentikasi.

CustomAuthStateProvider.cs:

using System.Security.Claims;
using Microsoft.AspNetCore.Components.Authorization;

public class CustomAuthStateProvider : AuthenticationStateProvider
{
    public override Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        var identity = new ClaimsIdentity();
        var user = new ClaimsPrincipal(identity);

        return Task.FromResult(new AuthenticationState(user));
    }

    public void AuthenticateUser(string userIdentifier)
    {
        var identity = new ClaimsIdentity(
        [
            new Claim(ClaimTypes.Name, userIdentifier),
        ], "Custom Authentication");

        var user = new ClaimsPrincipal(identity);

        NotifyAuthenticationStateChanged(
            Task.FromResult(new AuthenticationState(user)));
    }
}

Catatan

Kode sebelumnya yang membuat penggunaan baru ClaimsIdentity inisialisasi koleksi yang disederhanakan yang diperkenalkan dengan C# 12 (.NET 8). Untuk informasi selengkapnya, lihat Ekspresi koleksi - Referensi bahasa C#.

Dalam komponen:

• Menyuntikkan AuthenticationStateProvider.
• Tambahkan bidang untuk menahan pengidentifikasi pengguna.
• Tambahkan tombol dan metode untuk melemparkan AuthenticationStateProvider ke CustomAuthStateProvider dan memanggil AuthenticateUser dengan pengidentifikasi pengguna.

@inject AuthenticationStateProvider AuthenticationStateProvider

<input @bind="userIdentifier" />
<button @onclick="SignIn">Sign in</button>

<AuthorizeView>
    <Authorized>
        <p>Hello, @context.User.Identity?.Name!</p>
    </Authorized>
    <NotAuthorized>
        <p>You're not authorized.</p>
    </NotAuthorized>
</AuthorizeView>

@code {
    public string userIdentifier = string.Empty;

    private void SignIn()
    {
        ((CustomAuthStateProvider)AuthenticationStateProvider)
            .AuthenticateUser(userIdentifier);
    }
}

Pendekatan sebelumnya dapat ditingkatkan untuk memicu pemberitahuan perubahan status autentikasi melalui layanan kustom. Kelas berikut CustomAuthenticationService mempertahankan prinsipal klaim pengguna saat ini di bidang dukungan (currentUser) dengan peristiwa (UserChanged) yang dapat berlangganan penyedia status autentikasi, tempat peristiwa memanggil NotifyAuthenticationStateChanged. Dengan konfigurasi tambahan nanti di bagian ini, CustomAuthenticationService dapat disuntikkan ke dalam komponen dengan logika yang mengatur CurrentUser untuk memicu UserChanged peristiwa.

CustomAuthenticationService.cs:

using System.Security.Claims;

public class CustomAuthenticationService
{
    public event Action<ClaimsPrincipal>? UserChanged;
    private ClaimsPrincipal? currentUser;

    public ClaimsPrincipal CurrentUser
    {
        get { return currentUser ?? new(); }
        set
        {
            currentUser = value;

            if (UserChanged is not null)
            {
                UserChanged(currentUser);
            }
        }
    }
}

Program Dalam file, daftarkan CustomAuthenticationService dalam kontainer injeksi dependensi:

builder.Services.AddScoped<CustomAuthenticationService>();

Program Dalam file, daftarkan CustomAuthenticationService dalam kontainer injeksi dependensi:

builder.Services.AddSingleton<CustomAuthenticationService>();

Berikut ini CustomAuthStateProvider berlangganan acara CustomAuthenticationService.UserChanged . Metode mengembalikan GetAuthenticationStateAsync status autentikasi pengguna. Awalnya, status autentikasi didasarkan pada nilai CustomAuthenticationService.CurrentUser. Saat pengguna berubah, status autentikasi baru dibuat untuk pengguna baru (new AuthenticationState(newUser)) untuk panggilan ke GetAuthenticationStateAsync:

using Microsoft.AspNetCore.Components.Authorization;

public class CustomAuthStateProvider : AuthenticationStateProvider
{
    private AuthenticationState authenticationState;

    public CustomAuthStateProvider(CustomAuthenticationService service)
    {
        authenticationState = new AuthenticationState(service.CurrentUser);

        service.UserChanged += (newUser) =>
        {
            authenticationState = new AuthenticationState(newUser);
            NotifyAuthenticationStateChanged(Task.FromResult(authenticationState));
        };
    }

    public override Task<AuthenticationState> GetAuthenticationStateAsync() =>
        Task.FromResult(authenticationState);
}

Metode komponen SignIn berikut membuat prinsip klaim untuk pengidentifikasi pengguna untuk diatur pada CustomAuthenticationService.CurrentUser:

@using System.Security.Claims
@inject CustomAuthenticationService AuthService

<input @bind="userIdentifier" />
<button @onclick="SignIn">Sign in</button>

<AuthorizeView>
    <Authorized>
        <p>Hello, @context.User.Identity?.Name!</p>
    </Authorized>
    <NotAuthorized>
        <p>You're not authorized.</p>
    </NotAuthorized>
</AuthorizeView>

@code {
    public string userIdentifier = string.Empty;

    private void SignIn()
    {
        var currentUser = AuthService.CurrentUser;

        var identity = new ClaimsIdentity(
            [
                new Claim(ClaimTypes.Name, userIdentifier),
            ],
            "Custom Authentication");

        var newUser = new ClaimsPrincipal(identity);

        AuthService.CurrentUser = newUser;
    }
}

Catatan

Kode sebelumnya yang membuat penggunaan baru ClaimsIdentity inisialisasi koleksi yang disederhanakan yang diperkenalkan dengan C# 12 (.NET 8). Untuk informasi selengkapnya, lihat Ekspresi koleksi - Referensi bahasa C#.

Sumber Daya Tambahan:

• Tampilan konten tidak sah sisi server saat melakukan pra-penyajian dengan kustom AuthenticationStateProvider
• Cara mengakses AuthenticationStateProvider dari pengaturan DelegatingHandler menggunakan IHttpClientFactory
• Mengamankan ASP.NET Core Blazor Web App dengan OpenID Connect (OIDC)
• Mengamankan ASP.NET Core Blazor WebAssembly dengan ASP.NET Core Identity