ITfoxtec Identity Blazor WebAssembly OpenID Connect

Application d'exemple

Veuillez consulter l' application d'exemple pour les détails d'implémentation.

Installer

Installez le package NuGet ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect via le gestionnaire de packages Visual Studio.

Ou installez via PowerShell en utilisant la commande suivante.

Install-Package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Ou via CLI.

dotnet add package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Configuration et paramétrage

Enregistrez OpenidConnectPkce, HttpClient et IHttpClientFactory dans le fichier Program.cs.

private static void ConfigureServices(IServiceCollection services, WebAssemblyHostConfiguration configuration, IWebAssemblyHostEnvironment hostEnvironment)
{
    services.AddHttpClient("BlazorWebAssemblyOidcSample.API", client => client.BaseAddress = new Uri(hostEnvironment.BaseAddress))
        .AddHttpMessageHandler<AccessTokenMessageHandler>();

    services.AddTransient(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("BlazorWebAssemblyOidcSample.API"));

    services.AddOpenidConnectPkce(settings =>
    {
        configuration.Bind("IdentitySettings", settings);
    });
}

Ajoutez appsettings.json et éventuellement appsettings.Development.json sous wwwroot avec la configuration IdentitySettings. Le scope est ajouté comme une liste de valeurs séparées par des espaces.

{
  "IdentitySettings": {
    "Authority": "https://...some authority.../",
    "ClientId": "...client id...",
    "Scope": "...some scope..."
  }
}

Ajoutez l'espace de noms de la bibliothèque @using ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect à Imports.razor.

Appels API vers un autre domaine

La configuration peut être étendue pour prendre en charge des appels API vers des domaines autres que le domaine de base. Les AuthorizedUris de confiance dans la configuration IdentitySettings sont configurées sur AccessTokenMessageHandler.

private static void ConfigureServices(IServiceCollection services, WebAssemblyHostConfiguration configuration, IWebAssemblyHostEnvironment hostEnvironment)
{
    services.AddHttpClient("BlazorWebAssemblyOidcSample.API", client => client.BaseAddress = new Uri(hostEnvironment.BaseAddress))
        .AddHttpMessageHandler(sp =>
        {
            var handler = sp.GetService<AccessTokenMessageHandler>();
            configuration.Bind("IdentitySettings", handler);
            return handler;
        });

    services.AddTransient(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("BlazorWebAssemblyOidcSample.API"));

    services.AddOpenidConnectPkce(settings =>
    {
        configuration.Bind("IdentitySettings", settings);
    });
}

Ajoutez des domaines de confiance comme AuthorizedUris dans la configuration IdentitySettings.

{
  "IdentitySettings": {
    "Authority": "https://...some authority.../",
    "ClientId": "...client id...",
    "Scope": "...some scope...",
    "Resources": [ "...resource..." ],
    "AuthorizedUris": [ "...authorized api Uri..." ]
  }
}

Validation périodique du jeton d'accès

Définissez SessionValidationIntervalSeconds dans IdentitySettings (par défaut à 300 ; mettez à 0 pour désactiver). Lorsque c'est activé, OidcAuthenticationStateProvider appelle périodiquement le point de terminaison UserInfo via OidcHelper.ValidateAccessTokenWithUserInfoEndpoint. En cas d'échec de validation, le fournisseur efface la session et déclenche l'événement de déconnexion afin que l'UI invite l'utilisateur à se reconnecter.

Ajouter une page de callback

Ajoutez une page de callback Authentication.razor dans le dossier Pages avec le contenu suivant.

@page "/authentication/{action}"
@inherits AuthenticationPageBase

Vues d'autorisation

Mettez à jour App.razor pour inclure AuthorizeRouteView/NotAuthorized avec l'élément OidcRedirectToLogin. OidcRedirectToLogin démarre le flux de connexion si l'utilisateur n'a pas accès.

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
            <NotAuthorized>
                <OidcRedirectToLogin />
            </NotAuthorized>
            <Authorizing>
                <h1>Authentication in progress</h1>
                <p>Only visible while authentication is in progress.</p>
            </Authorizing>
        </AuthorizeRouteView>
    </Found>
    <NotFound>
        <CascadingAuthenticationState>
            <LayoutView Layout="@typeof(MainLayout)">
                <h1>Sorry</h1>
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </CascadingAuthenticationState>
    </NotFound>
</Router>

Ainsi, l'attribut Authorize et AuthorizeView sont tous deux pris en charge.

Menu connexion / déconnexion

Ajoutez LoginDisplay.razor avec un menu connexion / déconnexion contenant le contenu suivant.

@inject OpenidConnectPkce oenidConnectPkce

<AuthorizeView>
    <Authorized>
        Hello, @context.User.Identity.Name!
        <button class="nav-link btn btn-link" @onclick="LogoutAsync">Logout</button>
    </Authorized>
    <NotAuthorized>
        <button class="nav-link btn btn-link" @onclick="LoginAsync">Login</button>
    </NotAuthorized>
</AuthorizeView>

@code{
    private async Task LoginAsync(MouseEventArgs args)
    {
        await oenidConnectPkce.LoginAsync();
    }

    private async Task LogoutAsync(MouseEventArgs args)
    {
        await oenidConnectPkce.LogoutAsync();
    }
}

LoginDisplay peut être ajouté à MainLayout.razor comme ceci.

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <LoginDisplay />
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>