stan uwierzytelniania podstawowego Blazor ASP.NET

W tym artykule wyjaśniono, jak utworzyć niestandardowego dostawcę stanu uwierzytelniania i otrzymywać powiadomienia o zmianie stanu uwierzytelniania użytkownika w kodzie.

Ogólne podejścia podejmowane w przypadku aplikacji po stronie serwera i po stronie klienta są podobne, ale różnią się dokładnymi implementacjami, więc ten artykuł jest przestawiany między aplikacjami po stronie Blazor serwera i aplikacjami po Blazor stronie Blazor klienta. Użyj selektora przestawnego w górnej części artykułu, aby zmienić element przestawny artykułu w taki sposób, aby był zgodny z typem Blazor projektu, z którym pracujesz:

• Aplikacje po stronie Blazor serwera (Server pivot): Blazor Server dla platformy .NET 7 lub starszej oraz projektu serwera dla Blazor Web App platformy .NET 8 lub nowszej.
• Aplikacje po stronie Blazor klienta (Blazor WebAssembly pivot): Blazor WebAssembly dla wszystkich wersji platformy .NET lub .Client projektu programu dla platformy .NET 8 lub nowszej Blazor Web App .

Klasa abstrakcyjna AuthenticationStateProvider

Struktura Blazor zawiera abstrakcyjną AuthenticationStateProvider klasę, która udostępnia informacje o stanie uwierzytelniania bieżącego użytkownika z następującymi elementami członkowskimi:

• GetAuthenticationStateAsync: Asynchronicznie pobiera stan uwierzytelniania bieżącego użytkownika.
• AuthenticationStateChanged: zdarzenie informujące o zmianie stanu uwierzytelniania. Na przykład to zdarzenie może zostać zgłoszone, jeśli użytkownik loguje się lub wychodzi z aplikacji.
• NotifyAuthenticationStateChanged: zgłasza zdarzenie zmiany stanu uwierzytelniania.

Implementowanie niestandardowego dostawcy AuthenticationStateProvider

Aplikacja musi odwoływać się do Microsoft.AspNetCore.Components.Authorization pakietu NuGet, który zapewnia obsługę uwierzytelniania i autoryzacji dla Blazor aplikacji.

Uwaga

Aby uzyskać instrukcje dodawania pakietów do aplikacji .NET, zobacz artykuły w sekcji Instalowanie pakietów i zarządzanie nimi w temacie Przepływ pracy użycia pakietów (dokumentacja programu NuGet). Sprawdź prawidłowe wersje pakietów pod adresem NuGet.org.

Skonfiguruj następujące usługi uwierzytelniania, autoryzacji i kaskadowego stanu uwierzytelniania w Program pliku.

Podczas tworzenia Blazor aplikacji na podstawie jednego Blazor z szablonów projektów z włączonym uwierzytelnianiem aplikacja jest wstępnie skonfigurowana przy użyciu następujących rejestracji usługi, która obejmuje uwidacznianie stanu uwierzytelniania jako parametr kaskadowy. Aby uzyskać więcej informacji, zobacz Blazor rdzenia) z dodatkowymi informacjami przedstawionymi w sekcji Dostosowywanie nieautoryzowanej zawartości w sekcji składnikówRouter.

using Microsoft.AspNetCore.Components.Authorization;

...

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

W Blazor WebAssembly aplikacjach (wszystkich wersjach platformy .NET) lub .Client w projekcie Blazor Web App programu (.NET 8 lub nowszym) skonfiguruj uwierzytelnianie, autoryzację i kaskadowe usługi stanu uwierzytelniania w Program pliku.

Podczas tworzenia Blazor aplikacji na podstawie jednego Blazor z szablonów projektów z włączonym uwierzytelnianiem aplikacja jest wstępnie skonfigurowana przy użyciu następujących rejestracji usługi, która obejmuje uwidacznianie stanu uwierzytelniania jako parametr kaskadowy. Aby uzyskać więcej informacji, zobacz Blazor rdzenia) z dodatkowymi informacjami przedstawionymi w sekcji Dostosowywanie nieautoryzowanej zawartości w sekcji składnikówRouter.

using Microsoft.AspNetCore.Components.Authorization;

...

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

Podklasa AuthenticationStateProvider i przesłonięcia GetAuthenticationStateAsync w celu utworzenia stanu uwierzytelniania użytkownika. W poniższym przykładzie wszyscy użytkownicy są uwierzytelniani przy użyciu nazwy użytkownika mrfibuli.

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));
    }
}

Uwaga

Powyższy kod, który tworzy nowe ClaimsIdentity , używa uproszczonej inicjalizacji kolekcji wprowadzonej w języku C# 12 (.NET 8). Aby uzyskać więcej informacji, zobacz Collection expressions — C# language reference (Wyrażenia kolekcji — dokumentacja języka C#).

Usługa CustomAuthStateProvider jest zarejestrowana Program w pliku. Zarejestruj usługę o określonym zakresie za pomocą polecenia AddScoped:

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

Usługa CustomAuthStateProvider jest zarejestrowana Program w pliku. Zarejestruj pojedynczą usługę

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

Jeśli nie istnieje, dodaj instrukcję @using do _Imports.razor pliku, aby udostępnić Microsoft.AspNetCore.Components.Authorization przestrzeń nazw między składnikami:

@using Microsoft.AspNetCore.Components.Authorization;

Potwierdź lub zmień składnik widoku trasy na element AuthorizeRouteView w Router definicji składnika. Lokalizacja Router składnika różni się w zależności od typu aplikacji. Użyj wyszukiwania, aby zlokalizować składnik, jeśli nie znasz jego lokalizacji w projekcie.

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

Uwaga

Podczas tworzenia Blazor aplikacji na podstawie jednego Blazor z szablonów projektów z włączonym uwierzytelnianiem aplikacja zawiera AuthorizeRouteView składnik. Aby uzyskać więcej informacji, zobacz Blazor rdzenia) z dodatkowymi informacjami przedstawionymi w sekcji Dostosowywanie nieautoryzowanej zawartości w sekcji składnikówRouter.

Poniższy przykładowy AuthorizeView składnik demonstruje nazwę uwierzytelnioowanego użytkownika:

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

Aby uzyskać wskazówki dotyczące korzystania z programu AuthorizeView, zobacz Blazor podstawowe ASP.NET Core).

Powiadomienia o zmianie stanu uwierzytelniania

W klasie bazowej można wywołać metodę niestandardową AuthenticationStateProvider, aby powiadomić użytkowników o zmianie stanu uwierzytelniania na rerender.

Poniższy przykład jest oparty na implementacji niestandardowej AuthenticationStateProvider , postępując zgodnie ze wskazówkami w sekcji Implementowanie niestandardowej AuthenticationStateProvider wcześniej w tym artykule. Jeśli już wykonano wskazówki opisane w tej sekcji, poniższa część zastępuje element CustomAuthStateProvider pokazany w sekcji .

Poniższa CustomAuthStateProvider implementacja uwidacznia niestandardową metodę , AuthenticateUserw celu zalogowania użytkownika i powiadamiania użytkowników o zmianie stanu uwierzytelniania.

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)));
    }
}

Uwaga

Powyższy kod, który tworzy nowe ClaimsIdentity , używa uproszczonej inicjalizacji kolekcji wprowadzonej w języku C# 12 (.NET 8). Aby uzyskać więcej informacji, zobacz Collection expressions — C# language reference (Wyrażenia kolekcji — dokumentacja języka C#).

W składniku:

• Wstrzykiwanie AuthenticationStateProvider.
• Dodaj pole do przechowywania identyfikatora użytkownika.
• Dodaj przycisk i metodę, aby rzutować AuthenticationStateProvider element na CustomAuthStateProvider element i wywołać AuthenticateUser element za pomocą identyfikatora użytkownika.

@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);
    }
}

Powyższe podejście można ulepszyć w celu wyzwolenia powiadomień o zmianach stanu uwierzytelniania za pośrednictwem usługi niestandardowej. Poniższa CustomAuthenticationService klasa obsługuje podmiot zabezpieczeń oświadczeń bieżącego użytkownika w polu kopii zapasowej (currentUser) ze zdarzeniem (UserChanged), do którego dostawca stanu uwierzytelniania może subskrybować, gdzie zdarzenie wywołuje NotifyAuthenticationStateChanged. W dalszej części tej sekcji CustomAuthenticationService można wstawić dodatkową konfigurację do składnika z logiką ustawiającą CurrentUser element w celu wyzwolenia UserChanged zdarzenia.

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 W pliku zarejestruj CustomAuthenticationService element w kontenerze wstrzykiwania zależności:

builder.Services.AddScoped<CustomAuthenticationService>();

Program W pliku zarejestruj CustomAuthenticationService element w kontenerze wstrzykiwania zależności:

builder.Services.AddSingleton<CustomAuthenticationService>();

Poniżej CustomAuthStateProvider subskrybuje CustomAuthenticationService.UserChanged zdarzenie. Metoda GetAuthenticationStateAsync zwraca stan uwierzytelniania użytkownika. Początkowo stan uwierzytelniania jest oparty na wartości CustomAuthenticationService.CurrentUser. Gdy użytkownik zmieni się, zostanie utworzony nowy stan uwierzytelniania dla nowego użytkownika (new AuthenticationState(newUser)) dla wywołań metody 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);
}

Metoda następującego składnika SignIn tworzy podmiot zabezpieczeń oświadczeń dla identyfikatora użytkownika, który ma być ustawiony na :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;
    }
}

Uwaga

Powyższy kod, który tworzy nowe ClaimsIdentity , używa uproszczonej inicjalizacji kolekcji wprowadzonej w języku C# 12 (.NET 8). Aby uzyskać więcej informacji, zobacz Collection expressions — C# language reference (Wyrażenia kolekcji — dokumentacja języka C#).

Dodatkowe zasoby

• Wyświetlanie nieautoryzowanej zawartości po stronie serwera podczas wstępnej obsługi niestandardowej AuthenticationStateProvider
• Jak uzyskać dostęp do elementu AuthenticationStateProvider z DelegatingHandler konfiguracji przy użyciu IHttpClientFactory
• Zabezpieczanie ASP.NET Core Blazor Web App za pomocą technologii OpenID Connect (OIDC)
• Zabezpieczanie ASP.NET Core Blazor WebAssembly za pomocą platformy ASP.NET Core Identity