ITfoxtec Identity Blazor WebAssembly OpenID Connect

Installer

Installer ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect NuGet pakken via Visual Studio pakke manageren.

Eller installer via PowerShell med følgende kommando.

Install-Package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Eller via CLI.

dotnet add package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Oppsett og konfigurasjon

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

Legg til appsettings.json og eventuelle appsettings.Development.json konfigurasjonsfiler under wwwroot med IdentitySettings konfigurasjonen. Scopet legges til som en space separert liste med verdier.

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

Legg til bibliotekets namespace @using ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect i Imports.razor.

IdP konfigurasjon

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

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

API kall til et annet domene

Konfigurasjonen kan utvides for å støtte API kall til andre domener enn base domenet. De betrodde AuthorizedUris i IdentitySettings konfigurasjonen 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);
    });
}

Legg til betrodde domener som AuthorizedUris i IdentitySettings konfigurasjonen.

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

Periodisk access token validering

Sett SessionValidationIntervalSeconds i IdentitySettings (standard er 300; sett til 0 for å deaktivere). Når det er aktivert, OidcAuthenticationStateProvider kaller periodisk UserInfo endpointet via OidcHelper.ValidateAccessTokenWithUserInfoEndpoint. Hvis valideringen mislykkes, rydder provideren sesjonen og utløser logout hendelsen slik at UI kan be brukeren om å logge inn igjen.

Legg til call back side

Legg til en Authentication.razor call back side i Pages mappen med følgende innhold.

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

Authorize views

Oppdater App.razor for å inkludere AuthorizeRouteView/NotAuthorized med OidcRedirectToLogin elementet. OidcRedirectToLogin starter login flyten hvis brukeren ikke har tilgang.

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

Dermed støttes både Authorize attributtet og AuthorizeView.

Login / logout meny

Legg til LoginDisplay.razor med en login / logout meny med følgende innhold.

@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 legges til i MainLayout.razor slik.

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