stato di autenticazione di ASP.NET Core Blazor

Questo articolo illustra come creare un provider di stato di autenticazione personalizzato e ricevere notifiche di modifica dello stato di autenticazione utente nel codice.

Gli approcci generali adottati per le app lato server e lato client Blazor sono simili, ma differiscono nelle rispettive implementazioni, quindi questo articolo alterna app lato server Blazor e app lato client Blazor. Usare il selettore pivot nella parte superiore dell'articolo per modificare il pivot dell'articolo in modo che corrisponda al tipo di Blazor progetto usato:

• App lato server Blazor (Server pivot): Blazor Server per .NET 7 o versioni precedenti e il progetto server di un'app Blazor Web App per .NET 8 o versioni successive.
• App lato Blazor client (Blazor WebAssembly pivot): Blazor WebAssembly per tutte le versioni di .NET o il progetto .Client di un Blazor Web App per .NET 8 o versioni successive.

Classe astratta AuthenticationStateProvider

Il Blazor framework include una classe astratta AuthenticationStateProvider per fornire informazioni sullo stato di autenticazione dell'utente corrente con i membri seguenti:

• GetAuthenticationStateAsync: ottiene in modo asincrono lo stato di autenticazione dell'utente corrente.
• AuthenticationStateChanged: evento che fornisce una notifica quando lo stato di autenticazione è stato modificato. Ad esempio, questo evento può essere generato se un utente esegue l'accesso o l'uscita dall'app.
• NotifyAuthenticationStateChanged: genera un evento di modifica dello stato di autenticazione.

Implementare un AuthenticationStateProvider personalizzato

L'app deve fare riferimento al Microsoft.AspNetCore.Components.Authorization pacchetto NuGet, che fornisce supporto per l'autenticazione e l'autorizzazione per Blazor le app.

using Microsoft.AspNetCore.Components.Authorization;

...

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

using Microsoft.AspNetCore.Components.Authorization;

...

builder.Services.AddAuthorization();

using Microsoft.AspNetCore.Components.Authorization;

...

services.AddAuthorization();

using Microsoft.AspNetCore.Components.Authorization;

...

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

using Microsoft.AspNetCore.Components.Authorization;

...

builder.Services.AddAuthorizationCore();

Sottoclasse AuthenticationStateProvider e override GetAuthenticationStateAsync per creare lo stato di autenticazione dell'utente. Nell'esempio seguente tutti gli utenti vengono autenticati con il nome utente 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));
    }
}

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

builder.Services.AddServerSideBlazor();

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

services.AddServerSideBlazor();

services.AddScoped<AuthenticationStateProvider, CustomAuthStateProvider>();

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

Se non è presente, aggiungere un'istruzione @using al file delle importazioni (_Imports.razor) per rendere disponibile lo spazio dei nomi Microsoft.AspNetCore.Components.Authorization in tutti i componenti:

@using Microsoft.AspNetCore.Components.Authorization;

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

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

Il componente di esempio AuthorizeView seguente illustra il nome dell'utente autenticato:

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

Per informazioni sull'uso di AuthorizeView, vedere Autenticazione e autorizzazione in ASP.NET Core Blazor.

Notifiche di modifica dello stato di autenticazione

Un elemento personalizzato AuthenticationStateProvider può richiamare NotifyAuthenticationStateChanged sulla classe base AuthenticationStateProvider per notificare ai componenti che ne fanno uso il cambiamento dello stato di autenticazione, in modo che venga eseguito nuovamente il rendering.

L'esempio seguente si basa sull'implementazione di un AuthenticationStateProvider personalizzato seguendo le indicazioni riportate nella sezione Implementare un AuthenticationStateProvider personalizzato presentata in precedenza in questo articolo. Se sono già state seguite le indicazioni riportate in questa sezione, la seguente CustomAuthStateProvider sostituisce quella illustrata nella sezione .

L'implementazione seguente CustomAuthStateProvider espone un metodo personalizzato, AuthenticateUser, per accedere a un utente e notificare ai consumer la modifica dello stato di autenticazione.

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

In un componente:

• Inserisci AuthenticationStateProvider.
• Aggiungere un campo per contenere l'identificatore dell'utente.
• Aggiungere un pulsante e un metodo per fare il cast di AuthenticationStateProvider a CustomAuthStateProvider e chiamare AuthenticateUser passando l'identificatore dell'utente.

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

L'approccio precedente può essere migliorato per attivare le notifiche delle modifiche dello stato di autenticazione tramite un servizio personalizzato. La seguente classe CustomAuthenticationService mantiene l'oggetto ClaimsPrincipal dell'utente corrente in un campo di supporto (currentUser) con un evento (UserChanged) a cui il provider dello stato di autenticazione può sottoscriversi e che chiama NotifyAuthenticationStateChanged. Con la configurazione aggiuntiva descritta più avanti in questa sezione, è possibile iniettare CustomAuthenticationService in un componente con una logica che imposta CurrentUser in modo da attivare l'evento UserChanged.

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

builder.Services.AddScoped<CustomAuthenticationService>();

services.AddScoped<CustomAuthenticationService>();

builder.Services.AddSingleton<CustomAuthenticationService>();

Il codice seguente CustomAuthStateProvider sottoscrive l'evento CustomAuthenticationService.UserChanged. Il GetAuthenticationStateAsync metodo restituisce lo stato di autenticazione dell'utente. Inizialmente, lo stato di autenticazione è basato sul valore di CustomAuthenticationService.CurrentUser. Quando l'utente cambia, viene creato un nuovo stato di autenticazione per il nuovo utente (new AuthenticationState(newUser)) per le chiamate a 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);
}

Il metodo del componente SignIn seguente crea un oggetto ClaimsPrincipal per l'identificatore utente da impostare in 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;
    }
}

Risorse aggiuntive