ITfoxtec Identity Blazor WebAssembly OpenID Connect

Sample application

Zie de sample application voor implementatiedetails.

Installeren

Installeer het ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect NuGet pakket via de Visual Studio package manager.

Of installeer via PowerShell met het volgende commando.

Install-Package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Of via CLI.

dotnet add package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Setup en configuratie

Registreer OpenidConnectPkce, HttpClient en IHttpClientFactory in het Program.cs bestand.

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

Voeg appsettings.json en eventuele appsettings.Development.json configuratiebestanden toe onder wwwroot met de IdentitySettings configuratie. De scope wordt toegevoegd als een spatie gescheiden lijst van waarden.

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

Voeg de bibliotheek namespace @using ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect toe aan Imports.razor.

API calls naar een ander domein

De configuratie kan worden uitgebreid om API calls naar andere domeinen dan het basisdomein te ondersteunen. De vertrouwde AuthorizedUris in de IdentitySettings configuratie worden geconfigureerd op de 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);
    });
}

Voeg vertrouwde domeinen toe als AuthorizedUris in de IdentitySettings configuratie.

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

Periodieke access token validatie

Stel SessionValidationIntervalSeconds in IdentitySettings (standaard is 300; zet op 0 om uit te schakelen). Wanneer ingeschakeld, OidcAuthenticationStateProvider roept periodiek het UserInfo endpoint aan via OidcHelper.ValidateAccessTokenWithUserInfoEndpoint. Als validatie faalt, wist de provider de session en activeert de logout gebeurtenis zodat de UI de gebruiker kan vragen opnieuw in te loggen.

Call back pagina toevoegen

Voeg een Authentication.razor call back pagina toe in de Pages map met de volgende inhoud.

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

Authorize views

Werk App.razor bij om AuthorizeRouteView/NotAuthorized op te nemen met het OidcRedirectToLogin element. OidcRedirectToLogin start de login flow als de gebruiker geen toegang heeft.

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

Daarmee worden zowel het Authorize attribuut als AuthorizeView ondersteund.

Login / logout menu

Voeg LoginDisplay.razor toe met een login / logout menu met de volgende inhoud.

@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 aan MainLayout.razor worden toegevoegd zoals dit.

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