État d’authentification Blazor dans ASP.NET Core

Cet article explique comment créer un fournisseur d’état d’authentification personnalisé et recevoir des notifications de changement d’état d’authentification de l’utilisateur dans le code.

Les approches générales pour les applications Blazor côté serveur et côté client sont similaires, mais diffèrent dans leurs implémentations exactes. Cet article bascule entre les applications Blazor côté serveur et les applications Blazor côté client. Utilisez le sélecteur de vue en haut de l’article pour modifier la vue de l’article afin qu’elle corresponde au type de projet Blazor avec lequel vous travaillez :

• Applications Blazor côté serveur (vue Server) : Blazor Server pour .NET 7 ou version antérieure et le projet serveur d’une Blazor Web App pour .NET 8 ou version ultérieure.
• Applications Blazor côté client (vue Blazor WebAssembly) : Blazor WebAssembly pour toutes les versions de .NET ou le projet .Client d’une Blazor Web App .NET 8 ou version ultérieure.

Classe AuthenticationStateProvider abstraite

L’infrastructure Blazor inclut une classe AuthenticationStateProvider abstraite pour fournir des informations sur l’état d’authentification de l’utilisateur actuel avec les membres suivants :

• GetAuthenticationStateAsync : obtient de façon asynchrone l’état d’authentification de l’utilisateur actuel.
• AuthenticationStateChanged : événement qui envoie une notification lorsque l’état d’authentification a changé. Par exemple, cet événement peut être déclenché si un utilisateur se connecte à l’application ou s’en déconnecte.
• NotifyAuthenticationStateChanged : déclenche un événement de changement d’état d’authentification.

Implémenter un AuthenticationStateProvider personnalisé

L’application doit référencer le package NuGet Microsoft.AspNetCore.Components.Authorization, qui fournit une prise en charge de l’authentification et de l’autorisation pour les applications Blazor.

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

Utilisez une sous-classe pour AuthenticationStateProvider et remplacez GetAuthenticationStateAsync pour créer l’état d’authentification de l’utilisateur. Dans l’exemple suivant, tous les utilisateurs sont authentifiés avec le nom d’utilisateur 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>();

S’il n’est pas présent, ajoutez une instruction @using au fichier _Imports.razor pour rendre l’espace de noms Microsoft.AspNetCore.Components.Authorization disponible pour les composants :

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

L’exemple de composant AuthorizeView suivant illustre le nom de l’utilisateur authentifié :

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

Pour obtenir des conseils sur l’utilisation de AuthorizeView, consultez Authentification et autorisation Blazor ASP.NET Core.

Notifications de changements d’état d’authentification

Un personnalisé AuthenticationStateProvider peut faire appel à NotifyAuthenticationStateChanged sur la classe de base AuthenticationStateProvider pour informer les consommateurs de la modification de l’état d’authentification en vue d’un nouveau rendu.

L’exemple suivant est basé sur l’implémentation d’un AuthenticationStateProvider personnalisé en suivant les instructions de la section Implémenter un AuthenticationStateProvider personnalisé. Si vous avez déjà suivi les instructions de cette section, le CustomAuthStateProvider suivant remplace celui indiqué dans la section.

L’implémentation suivante CustomAuthStateProvider expose une méthode personnalisée, AuthenticateUser, pour connecter un utilisateur et informer les consommateurs du changement d’état d’authentification.

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

Dans un composant  :

• Injection du code AuthenticationStateProvider.
• Ajoutez un champ pour contenir l’identificateur d’utilisateur.
• Ajoutez un bouton et une méthode pour caster le AuthenticationStateProvider vers CustomAuthStateProvider et appeler AuthenticateUser avec l’identificateur d’utilisateur.

@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’approche précédente peut être améliorée pour déclencher des notifications de changements d’état d’authentification via un service personnalisé. La classe CustomAuthenticationService suivante conserve le principal de revendications de l’utilisateur actuel dans un champ de stockage (currentUser) avec un événement (UserChanged) auquel le fournisseur d’état d’authentification peut s’abonner, où l’événement appelle NotifyAuthenticationStateChanged. Avec la configuration supplémentaire décrite plus loin dans cette section, le CustomAuthenticationService peut être injecté dans un composant avec une logique qui définit le CurrentUser pour déclencher l’événement 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>();

Les éléments suivants CustomAuthStateProvider s’abonnent à l’événement CustomAuthenticationService.UserChanged. La méthode GetAuthenticationStateAsync retourne l’état d’authentification de l’utilisateur. Initialement, l’état d’authentification est basé sur la valeur de CustomAuthenticationService.CurrentUser. En cas de modification de l’utilisateur, un nouvel état d’authentification est créé avec le nouvel utilisateur (new AuthenticationState(newUser)) pour les appels à 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);
}

La méthode SignIn du composant suivant crée un principal de revendications pour l’identificateur de l’utilisateur à définir sur 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;
    }
}

Ressources supplémentaires