É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.

Remarque

Pour obtenir des conseils sur l’ajout de packages à des applications .NET, consultez les articles figurant sous Installer et gérer des packages dans Flux de travail de la consommation des packages (documentation NuGet). Vérifiez les versions du package sur NuGet.org.

Configurez les services d’authentification, d’autorisation et d’état d’authentification en cascade suivants dans le fichier Program.

Lorsque vous créez une application Blazor à partir de l’un des modèles de projet Blazor dont l’authentification est activée, l’application est préconfigurée avec les inscriptions de service suivantes, ce qui inclut l’exposition de l’état d’authentification en tant que paramètre en cascade. Pour plus d’informations, consultez Authentification et autorisation Blazor ASP.NET Core avec des informations supplémentaires présentées dans la section Personnaliser le contenu non autorisé avec le composant Router de l’article.

using Microsoft.AspNetCore.Components.Authorization;

...

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

Dans les applications Blazor WebAssembly (toutes les versions de .NET) ou le projet .Client d’une Blazor Web App (.NET 8 ou version ultérieure), configurez les services d’authentification, d’autorisation et d’état d’authentification en cascade dans le fichier Program.

Lorsque vous créez une application Blazor à partir de l’un des modèles de projet Blazor dont l’authentification est activée, l’application est préconfigurée avec les inscriptions de service suivantes, ce qui inclut l’exposition de l’état d’authentification en tant que paramètre en cascade. Pour plus d’informations, consultez Authentification et autorisation Blazor ASP.NET Core avec des informations supplémentaires présentées dans la section Personnaliser le contenu non autorisé avec le composant Router de l’article.

using Microsoft.AspNetCore.Components.Authorization;

...

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

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

Remarque

Le code précédent qui crée une nouvelle ClaimsIdentity utilise l’initialisation de collection simplifiée introduite avec C# 12 (.NET 8). Pour plus d’informations, consultez Expressions de collection - Référence du langage C#.

Le service CustomAuthStateProvider est inscrit dans le ficher Program. Inscrivez le service délimité avec AddScoped :

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

Le service CustomAuthStateProvider est inscrit dans le ficher Program. Inscrivez le service singleton avec AddSingleton :

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;

Confirmez ou modifiez le composant de vue de routage en une AuthorizeRouteView dans la définition du composant Router. L’emplacement du composant Router diffère selon le type d’application. Utilisez la recherche pour localiser le composant si vous ne connaissez pas son emplacement dans le projet.

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

Remarque

Lorsque vous créez une application Blazor à partir de l’un des modèles de projet Blazor avec l’authentification activée, l’application inclut le composant AuthorizeRouteView. Pour plus d’informations, consultez Authentification et autorisation Blazor ASP.NET Core avec des informations supplémentaires présentées dans la section Personnaliser le contenu non autorisé avec le composant Router de l’article.

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

Remarque

Le code précédent qui crée une nouvelle ClaimsIdentity utilise l’initialisation de collection simplifiée introduite avec C# 12 (.NET 8). Pour plus d’informations, consultez Expressions de collection - Référence du langage C#.

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

Dans le fichier Program, enregistrez le CustomAuthenticationService dans le conteneur d'injection de dépendances :

builder.Services.AddScoped<CustomAuthenticationService>();

Dans le fichier Program, enregistrez le CustomAuthenticationService dans le conteneur d'injection de dépendances :

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

Remarque

Le code précédent qui crée une nouvelle ClaimsIdentity utilise l’initialisation de collection simplifiée introduite avec C# 12 (.NET 8). Pour plus d’informations, consultez Expressions de collection - Référence du langage C#.

Ressources supplémentaires

• Affichage de contenu non autorisé côté serveur lors du prérendu avec un AuthenticationStateProviderpersonnalisé
• Comment accéder à un AuthenticationStateProvider à partir d’une configuration DelegatingHandler à l’aide d’une IHttpClientFactory
• Sécuriser une Blazor Web App ASP.NET Core avec OpenID Connect (OIDC)
• Sécuriser ASP.NET Core Blazor WebAssembly avec ASP.NET Core Identity