ITfoxtec Identity Blazor WebAssembly OpenID Connect

Sample application

Se venligst sample application for implementeringsdetaljer.

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.

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>