ITfoxtec Identity Blazor WebAssembly OpenID Connect

Beispielanwendung

Bitte sehen Sie die Beispielanwendung für Implementierungsdetails.

Installieren

Installieren Sie das ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect NuGet Paket über den Visual Studio Paket Manager.

Oder installieren Sie über PowerShell mit folgendem Befehl.

Install-Package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Oder über CLI.

dotnet add package ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect

Setup und Konfiguration

Registrieren Sie OpenidConnectPkce, HttpClient und IHttpClientFactory in der Program.cs Datei.

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

Fügen Sie appsettings.json und gegebenenfalls appsettings.Development.json Konfigurationsdateien unter wwwroot mit der IdentitySettings Konfiguration hinzu. Der Scope wird als durch Leerzeichen getrennte Liste von Werten hinzugefügt.

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

Fügen Sie den Bibliotheks Namespace @using ITfoxtec.Identity.BlazorWebAssembly.OpenidConnect zu Imports.razor hinzu.

API Aufrufe zu einer anderen Domain

Die Konfiguration kann erweitert werden, um API Aufrufe zu anderen Domains als der Basisdomain zu unterstützen. Die vertrauenswürdigen AuthorizedUris in der IdentitySettings Konfiguration werden beim AccessTokenMessageHandler konfiguriert.

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

Fügen Sie vertrauenswürdige Domains als AuthorizedUris in der IdentitySettings Konfiguration hinzu.

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

Periodische Access Token Validierung

Setzen Sie SessionValidationIntervalSeconds in IdentitySettings (Standard ist 300; auf 0 setzen, um zu deaktivieren). Wenn aktiviert, OidcAuthenticationStateProvider ruft periodisch den UserInfo Endpoint über OidcHelper.ValidateAccessTokenWithUserInfoEndpoint. Wenn die Validierung fehlschlägt, leert der Provider die Sitzung und löst das Logout Ereignis aus, damit die UI den Benutzer erneut zur Anmeldung auffordert.

Call back Seite hinzufügen

Fügen Sie eine Authentication.razor Call back Seite im Pages Ordner mit folgendem Inhalt hinzu.

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

Authorize Views

Aktualisieren Sie App.razor, um AuthorizeRouteView/NotAuthorized mit dem OidcRedirectToLogin Element einzubinden. OidcRedirectToLogin startet den Login Flow, wenn der Benutzer keinen Zugriff hat.

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

Damit werden sowohl das Authorize Attribut als auch AuthorizeView unterstützt.

Login / Logout Menü

Fügen Sie LoginDisplay.razor mit einem Login / Logout Menü mit folgendem Inhalt hinzu.

@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 kann dem MainLayout.razor wie folgt hinzugefügt werden.

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