ITfoxtec Identity Blazor WebAssembly OpenID Connect

Sample application

Se sample application för implementationsdetaljer.

Installera

Installera ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect NuGet paketet via Visual Studio paket hanteraren.

Eller installera via PowerShell med följande kommando.

Install-Package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Eller via CLI.

dotnet add package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Setup och konfiguration

Registrera OpenidConnectPkce, HttpClient och 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);
    });
}

Lägg till appsettings.json och eventuella appsettings.Development.json konfigurationsfiler under wwwroot med IdentitySettings konfigurationen. Scopet läggs till som en space separerad lista av värden.

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

Lägg till bibliotekets namespace @using ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect till Imports.razor.

API anrop till en annan domän

Konfigurationen kan utökas för att stödja API anrop till andra domäner än basdomänen. De betrodda AuthorizedUris i IdentitySettings konfigurationen konfigureras 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);
    });
}

Lägg till betrodda 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

Ange SessionValidationIntervalSeconds i IdentitySettings (standard är 300; sätt till 0 för att inaktivera). När det är aktiverat, OidcAuthenticationStateProvider anropar periodiskt UserInfo endpointet via OidcHelper.ValidateAccessTokenWithUserInfoEndpoint. Om valideringen misslyckas rensar providern sessionen och triggar logout händelsen så att UI kan be användaren att logga in igen.

Lägg till call back sida

Lägg till en Authentication.razor call back sida i Pages mappen med följande innehåll.

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

Authorize views

Uppdatera App.razor för att inkludera AuthorizeRouteView/NotAuthorized med OidcRedirectToLogin elementet. OidcRedirectToLogin startar login flödet om användaren inte har åtkomst.

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

Därmed stöds både Authorize attributet och AuthorizeView.

Login / logout meny

Lägg till LoginDisplay.razor med en login / logout meny med följande innehåll.

@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 läggas till i MainLayout.razor så här.

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