ITfoxtec Identity Blazor WebAssembly OpenID Connect

Installér

Installér ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect NuGet pakken via Visual Studio pakkemanageren.

Eller installér via PowerShell med følgende kommando.

Install-Package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Eller via CLI.

dotnet add package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Opsætning og konfiguration

Registrer OpenidConnectPkce, HttpClient og IHttpClientFactory i Program.cs filen.

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

Tilføj appsettings.json og eventuelle appsettings.Development.json konfigurationsfiler under wwwroot med IdentitySettings konfigurationen. Scopet tilføjes som en space separeret liste af værdier.

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

Tilføj bibliotekets namespace @using ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect til Imports.razor.

IdP konfiguration

Konfigurer Blazor klienten som en OpenID Connect klient på IdP'en.

• Response typer: code
• Aktivér PKCE: true
• Login call back: ...base URL.../authentication/login_callback
• Logout call back: ...base URL.../authentication/logout_callback

API kald til et andet domæne

Konfigurationen kan udvides til at understøtte API kald til andre domæner end base domænet. De betroede AuthorizedUris i IdentitySettings konfigurationen konfigureres på 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);
    });
}

Tilføj betroede domæner som AuthorizedUris i IdentitySettings konfigurationen.

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

Periodisk access token validering

Angiv SessionValidationIntervalSeconds i IdentitySettings (standard er 300; sæt til 0 for at deaktivere). Når det er aktiveret, OidcAuthenticationStateProvider kalder periodisk UserInfo endpointet via OidcHelper.ValidateAccessTokenWithUserInfoEndpoint. Hvis valideringen fejler, rydder provideren sessionen og udløser logout eventen, så UI'et kan bede brugeren om at logge ind igen.

Tilføj call back side

Tilføj en Authentication.razor call back side i Pages mappen med følgende indhold.

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

Authorize views

Opdater App.razor til at inkludere AuthorizeRouteView/NotAuthorized med OidcRedirectToLogin elementet. OidcRedirectToLogin starter login flowet, hvis brugeren ikke har adgang.

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

Derved understøttes både Authorize attributten og AuthorizeView.

Login / logout menu

Tilføj LoginDisplay.razor med en login / logout menu med følgende indhold.

@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 kan tilføjes til MainLayout.razor sådan her.

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