ITfoxtec Identity Blazor WebAssembly OpenID Connect

Sample application

Se sample application for implementeringsdetaljer.

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.

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>