ASP.NET Core Blazor Hybrid verificatie en autorisatie

In dit artikel wordt de ondersteuning van ASP.NET Core beschreven voor de configuratie en het beheer van beveiliging en ASP.NET Core Identity in Blazor Hybrid-apps.

Verificatie in Blazor Hybrid-apps wordt verwerkt door systeemeigen platformbibliotheken, omdat ze verbeterde beveiligingsgaranties bieden die de browser-sandbox niet kan bieden. Verificatie van systeemeigen apps maakt gebruik van een besturingssysteemspecifiek mechanisme of via een federatief protocol, zoals OpenID Connect (OIDC). Volg de richtlijnen voor de identity-provider die u voor de app hebt geselecteerd en integreer identity vervolgens verder met Blazor met behulp van de richtlijnen in dit artikel.

De integratie van verificatie moet de volgende doelstellingen behalen voor Razor onderdelen en services:

• Gebruik de abstracties in het Microsoft.AspNetCore.Components.Authorization-pakket, zoals AuthorizeView.
• Reageer op wijzigingen in de verificatiecontext.
• Toegangsreferenties die door de app zijn ingericht vanuit de identity-provider, zoals toegangstokens om geautoriseerde API-aanroepen uit te voeren.

Nadat verificatie is toegevoegd aan een app .NET MAUI, WPF of Windows Forms en gebruikers zich kunnen aanmelden en afmelden, integreert u verificatie met Blazor om de geverifieerde gebruiker beschikbaar te maken voor Razor onderdelen en services. Voer de volgende stappen uit:

• Raadpleeg het Microsoft.AspNetCore.Components.Authorization-pakket.

  Notitie

  Zie de artikelen onder Pakketten installeren en beheren in NuGet-documentatie (NuGet-documentatie) voor hulp bij het toevoegen van pakketten aan .NET-apps. Bevestig de juiste pakketversies op NuGet.org.

• Implementeer een aangepaste AuthenticationStateProvider. Dit is de abstractie die Razor onderdelen gebruiken om toegang te krijgen tot informatie over de geverifieerde gebruiker en om updates te ontvangen wanneer de verificatiestatus verandert.

• Registreer de aangepaste verificatiestatusprovider in de container voor afhankelijkheidsinjectie.

De .NET MAUI-apps gebruiken de WebAuthenticator-klasse om browsergebaseerde authenticatiestromen te initiëren die luisteren naar een callback naar een specifieke URL die bij de app is geregistreerd.

Zie de volgende bronnen voor aanvullende richtlijnen:

• Web Authenticator (.NET MAUI documentatie)
• Sample.Server.WebAuthenticator voorbeeld-app

WPF-apps maken gebruik van het Microsoft identity-platform om te integreren met Microsoft Entra (ME-ID) en AAD B2C. Zie de volgende bronnen voor hulp en voorbeelden:

• Overzicht van de MSAL- (Microsoft Authentication Library)
• Verificatie toevoegen aan uw Windows-app (WPF)
• Zelfstudie: Gebruikers aanmelden en Microsoft Graph aanroepen in de WPF-bureaublad-app (Windows Presentation Foundation)
• quickstart: Een token verkrijgen en Microsoft Graph API aanroepen vanuit een bureaubladtoepassing
• Quickstart: Inloggen instellen voor een bureaubladapp met Azure Active Directory B2C
• Verificatie configureren in een WPF-desktop-voorbeeld-app met behulp van Azure AD B2C-

Windows Forms-apps maken gebruik van het Microsoft identity-platform om te integreren met Microsoft Entra (ME-ID) en AAD B2C. Zie Overzicht van de MSAL-(Microsoft Authentication Library) voor meer informatie.

Een aangepaste AuthenticationStateProvider maken zonder dat de gebruiker updates hoeft te wijzigen

Als de app de gebruiker onmiddellijk na het starten van de app verifieert en de geverifieerde gebruiker hetzelfde blijft gedurende de gehele levensduur van de app, zijn gebruikerswijzigingsmeldingen niet vereist en biedt de app alleen informatie over de geverifieerde gebruiker. In dit scenario meldt de gebruiker zich aan bij de app wanneer de app wordt geopend en wordt het aanmeldingsscherm opnieuw weergegeven nadat de gebruiker zich heeft afgemeld. De volgende ExternalAuthStateProvider is een voorbeeld van een implementatie van een aangepaste AuthenticationStateProvider voor dit verificatiescenario.

Notitie

De volgende aangepaste AuthenticationStateProvider declareert geen naamruimte om het codevoorbeeld van toepassing te maken op een Blazor Hybrid-app. Het is echter een best practice om de naamruimte van uw app op te geven wanneer u het voorbeeld in een productie-app implementeert.

ExternalAuthStateProvider.cs:

using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Authorization;

public class ExternalAuthStateProvider : AuthenticationStateProvider
{
    private readonly Task<AuthenticationState> authenticationState;

    public ExternalAuthStateProvider(AuthenticatedUser user) => 
        authenticationState = Task.FromResult(new AuthenticationState(user.Principal));

    public override Task<AuthenticationState> GetAuthenticationStateAsync() =>
        authenticationState;
}

public class AuthenticatedUser
{
    public ClaimsPrincipal Principal { get; set; } = new();
}

In de volgende stappen wordt beschreven hoe u:

• Voeg vereiste naamruimten toe.
• Voeg de autorisatieservices en Blazor abstracties toe aan de serviceverzameling.
• Bouw de dienstencollectie.
• Los de AuthenticatedUser-service op om de claimprincipaal van de geverifieerde gebruiker in te stellen. Raadpleeg de documentatie van uw identity-provider voor meer informatie.
• Retourneer de gebouwde host.

Voeg in de MauiProgram.CreateMauiApp methode van MauiProgram.csnaamruimten toe voor Microsoft.AspNetCore.Components.Authorization en System.Security.Claims:

using Microsoft.AspNetCore.Components.Authorization;
using System.Security.Claims;

Verwijder de volgende regel code die een ingebouwde Microsoft.Maui.Hosting.MauiAppretourneert:

- return builder.Build();

Vervang de voorgaande coderegel door de volgende code. Voeg OpenID-/MSAL-code toe om de gebruiker te verifiëren. Raadpleeg de documentatie van uw identity-provider voor meer informatie.

builder.Services.AddAuthorizationCore();
builder.Services.TryAddScoped<AuthenticationStateProvider, ExternalAuthStateProvider>();
builder.Services.AddSingleton<AuthenticatedUser>();
var host = builder.Build();

var authenticatedUser = host.Services.GetRequiredService<AuthenticatedUser>();

/*
Provide OpenID/MSAL code to authenticate the user. See your identity provider's 
documentation for details.

The user is represented by a new ClaimsPrincipal based on a new ClaimsIdentity.
*/
var user = new ClaimsPrincipal(new ClaimsIdentity());

authenticatedUser.Principal = user;

return host;

In de volgende stappen wordt beschreven hoe u:

• Voeg vereiste naamruimten toe.
• Voeg de autorisatieservices en Blazor abstracties toe aan de serviceverzameling.
• Bouw de serviceverzameling en voeg de gebouwde serviceverzameling toe als resource aan ResourceDictionaryvan de app.
• Los de AuthenticatedUser-service op om de claimprincipaal van de geverifieerde gebruiker in te stellen. Raadpleeg de documentatie van uw identity-provider voor meer informatie.
• Retourneer de gebouwde host.

Voeg in de MainWindowconstructor (MainWindow.xaml.cs) naamruimten toe voor Microsoft.AspNetCore.Components.Authorization en System.Security.Claims:

using Microsoft.AspNetCore.Components.Authorization;
using System.Security.Claims;

Verwijder de volgende coderegel waarmee de ingebouwde serviceverzameling als resource wordt toegevoegd aan de ResourceDictionaryvan de app:

- Resources.Add("services", serviceCollection.BuildServiceProvider());

Vervang de voorgaande coderegel door de volgende code. Voeg OpenID-/MSAL-code toe om de gebruiker te verifiëren. Raadpleeg de documentatie van uw identity-provider voor meer informatie.

serviceCollection.AddAuthorizationCore();
serviceCollection.TryAddScoped<AuthenticationStateProvider, ExternalAuthStateProvider>();
serviceCollection.AddSingleton<AuthenticatedUser>();
var services = serviceCollection.BuildServiceProvider();
Resources.Add("services", services);

var authenticatedUser = services.GetRequiredService<AuthenticatedUser>();

/*
Provide OpenID/MSAL code to authenticate the user. See your identity provider's 
documentation for details.

The user is represented by a new ClaimsPrincipal based on a new ClaimsIdentity.
*/
var user = new ClaimsPrincipal(new ClaimsIdentity());

authenticatedUser.Principal = user;

In de volgende stappen wordt beschreven hoe u:

• Voeg vereiste naamruimten toe.
• Voeg de autorisatieservices en Blazor abstracties toe aan de serviceverzameling.
• Bouw de serviceverzameling en voeg de ingebouwde serviceverzameling toe aan de serviceprovider van de app.
• Los de AuthenticatedUser-service op om de claimprincipaal van de geverifieerde gebruiker in te stellen. Raadpleeg de documentatie van uw identity-provider voor meer informatie.

Voeg in de Form1constructor (Form1.cs) naamruimten toe voor Microsoft.AspNetCore.Components.Authorization en System.Security.Claims:

using Microsoft.AspNetCore.Components.Authorization;
using System.Security.Claims;

Verwijder de volgende coderegel waarmee de ingebouwde serviceverzameling wordt ingesteld op de serviceprovider van de app:

- blazorWebView1.Services = services.BuildServiceProvider();

Vervang de voorgaande coderegel door de volgende code. Voeg OpenID-/MSAL-code toe om de gebruiker te verifiëren. Raadpleeg de documentatie van uw identity-provider voor meer informatie.

services.AddAuthorizationCore();
services.TryAddScoped<AuthenticationStateProvider, ExternalAuthStateProvider>();
services.AddSingleton<AuthenticatedUser>();
var serviceCollection = services.BuildServiceProvider();
blazorWebView1.Services = serviceCollection;

var authenticatedUser = serviceCollection.GetRequiredService<AuthenticatedUser>();

/*
Provide OpenID/MSAL code to authenticate the user. See your identity provider's 
documentation for details.

The user is represented by a new ClaimsPrincipal based on a new ClaimsIdentity.
*/
var user = new ClaimsPrincipal(new ClaimsIdentity());

authenticatedUser.Principal = user;

Een aangepaste AuthenticationStateProvider maken met gebruikersupdates

Als u de gebruiker wilt bijwerken terwijl de Blazor-app wordt uitgevoerd, roept u NotifyAuthenticationStateChanged aan binnen de AuthenticationStateProvider implementatie met behulp van van de volgende methoden:

• Geef een authenticatie-update van buitenaf door aan de BlazorWebView)
• Authenticatie afhandelen in de BlazorWebView

Een verificatie-update signaleren van buiten de BlazorWebView (optie 1)

Een aangepaste AuthenticationStateProvider kan een globale service gebruiken om een verificatie-update te signaleren. Het is raadzaam dat de service een gebeurtenis aanbiedt waarop de AuthenticationStateProvider zich kan abonneren, waarbij de gebeurtenis NotifyAuthenticationStateChangedaanroept.

Notitie

De volgende aangepaste AuthenticationStateProvider declareert geen naamruimte om het codevoorbeeld van toepassing te maken op een Blazor Hybrid-app. Het is echter een best practice om de naamruimte van uw app op te geven wanneer u het voorbeeld in een productie-app implementeert.

ExternalAuthStateProvider.cs:

using System;
using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Authorization;

public class ExternalAuthStateProvider : AuthenticationStateProvider
{
    private AuthenticationState currentUser;

    public ExternalAuthStateProvider(ExternalAuthService service)
    {
        currentUser = new AuthenticationState(service.CurrentUser);

        service.UserChanged += (newUser) =>
        {
            currentUser = new AuthenticationState(newUser);
            NotifyAuthenticationStateChanged(Task.FromResult(currentUser));
        };
    }

    public override Task<AuthenticationState> GetAuthenticationStateAsync() =>
        Task.FromResult(currentUser);
}

public class ExternalAuthService
{
    public event Action<ClaimsPrincipal>? UserChanged;
    private ClaimsPrincipal? currentUser;

    public ClaimsPrincipal CurrentUser
    {
        get { return currentUser ?? new(); }
        set
        {
            currentUser = value;

            if (UserChanged is not null)
            {
                UserChanged(currentUser);
            }
        }
    }
}

Voeg in de MauiProgram.CreateMauiApp methode van MauiProgram.cseen naamruimte toe voor Microsoft.AspNetCore.Components.Authorization:

using Microsoft.AspNetCore.Components.Authorization;

Voeg de autorisatieservices en Blazor abstracties toe aan de serviceverzameling:

builder.Services.AddAuthorizationCore();
builder.Services.TryAddScoped<AuthenticationStateProvider, ExternalAuthStateProvider>();
builder.Services.AddSingleton<ExternalAuthService>();

Voeg in de MainWindowconstructor (MainWindow.xaml.cs) een naamruimte toe voor Microsoft.AspNetCore.Components.Authorization:

using Microsoft.AspNetCore.Components.Authorization;

Voeg de autorisatieservices en de Blazor abstracties toe aan de serviceverzameling:

serviceCollection.AddAuthorizationCore();
serviceCollection.TryAddScoped<AuthenticationStateProvider, ExternalAuthStateProvider>();
serviceCollection.AddSingleton<ExternalAuthService>();

Voeg in de Form1constructor (Form1.cs) een naamruimte toe voor Microsoft.AspNetCore.Components.Authorization:

using Microsoft.AspNetCore.Components.Authorization;

Voeg de autorisatieservices en Blazor abstracties toe aan de serviceverzameling:

services.AddAuthorizationCore();
services.TryAddScoped<AuthenticationStateProvider, ExternalAuthStateProvider>();
services.AddSingleton<ExternalAuthService>();

Los de ExternalAuthService-service op waar de app een gebruiker verifieert:

var authService = host.Services.GetRequiredService<ExternalAuthService>();

Voer uw aangepaste OpenID/MSAL-code uit om de gebruiker te verifiëren. Raadpleeg de documentatie van uw identity-provider voor meer informatie. De geverifieerde gebruiker (authenticatedUser in het volgende voorbeeld) is een nieuwe ClaimsPrincipal op basis van een nieuwe ClaimsIdentity.

Stel de huidige gebruiker in op de geverifieerde gebruiker:

authService.CurrentUser = authenticatedUser;

Een alternatief voor de voorgaande benadering is het instellen van de principal van de gebruiker op System.Threading.Thread.CurrentPrincipal in plaats van deze in te stellen via een service, waardoor het gebruik van de container voor afhankelijkheidsinjectie wordt vermeden:

public class CurrentThreadUserAuthenticationStateProvider : AuthenticationStateProvider
{
    public override Task<AuthenticationState> GetAuthenticationStateAsync() =>
        Task.FromResult(
            new AuthenticationState(Thread.CurrentPrincipal as ClaimsPrincipal ?? 
                new ClaimsPrincipal(new ClaimsIdentity())));
}

Met behulp van de alternatieve benadering worden alleen autorisatieservices (AddAuthorizationCore) en CurrentThreadUserAuthenticationStateProvider (.TryAddScoped<AuthenticationStateProvider, CurrentThreadUserAuthenticationStateProvider>()) toegevoegd aan de serviceverzameling.

Authenticatie afhandelen binnen de BlazorWebView (optie 2)

Een aangepaste AuthenticationStateProvider kan aanvullende methoden bevatten voor het activeren van aanmelden en afmelden en het bijwerken van de gebruiker.

Notitie

De volgende aangepaste AuthenticationStateProvider declareert geen naamruimte om het codevoorbeeld van toepassing te maken op een Blazor Hybrid-app. Het is echter een best practice om de naamruimte van uw app op te geven wanneer u het voorbeeld in een productie-app implementeert.

ExternalAuthStateProvider.cs:

using System.Security.Claims;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Authorization;

public class ExternalAuthStateProvider : AuthenticationStateProvider
{
    private ClaimsPrincipal currentUser = new ClaimsPrincipal(new ClaimsIdentity());

    public override Task<AuthenticationState> GetAuthenticationStateAsync() =>
        Task.FromResult(new AuthenticationState(currentUser));

    public Task LogInAsync()
    {
        var loginTask = LogInAsyncCore();
        NotifyAuthenticationStateChanged(loginTask);

        return loginTask;

        async Task<AuthenticationState> LogInAsyncCore()
        {
            var user = await LoginWithExternalProviderAsync();
            currentUser = user;

            return new AuthenticationState(currentUser);
        }
    }

    private Task<ClaimsPrincipal> LoginWithExternalProviderAsync()
    {
        /*
            Provide OpenID/MSAL code to authenticate the user. See your identity 
            provider's documentation for details.

            Return a new ClaimsPrincipal based on a new ClaimsIdentity.
        */
        var authenticatedUser = new ClaimsPrincipal(new ClaimsIdentity());

        return Task.FromResult(authenticatedUser);
    }

    public void Logout()
    {
        currentUser = new ClaimsPrincipal(new ClaimsIdentity());
        NotifyAuthenticationStateChanged(
            Task.FromResult(new AuthenticationState(currentUser)));
    }
}

In het voorgaande voorbeeld:

• De aanroep van LogInAsyncCore activeert het aanmeldingsproces.
• De aanroep van NotifyAuthenticationStateChanged meldt dat er een update wordt uitgevoerd, waardoor de app een tijdelijke gebruikersinterface kan bieden tijdens het aanmeldings- of afmeldingsproces.
• Als u loginTask retourneert, wordt de taak geretourneerd, zodat het onderdeel dat de aanmelding heeft geactiveerd, kan wachten en erop kan reageren nadat de taak is voltooid.
• De LoginWithExternalProviderAsync methode wordt geïmplementeerd door de ontwikkelaar om de gebruiker aan te melden met de SDK van de identity provider. Zie de documentatie van uw identity provider voor meer informatie. De geverifieerde gebruiker (authenticatedUser) is een nieuwe ClaimsPrincipal op basis van een nieuwe ClaimsIdentity.

Voeg in de MauiProgram.CreateMauiApp methode van MauiProgram.csde autorisatieservices en de Blazor abstractie toe aan de serviceverzameling:

builder.Services.AddAuthorizationCore();
builder.Services.TryAddScoped<AuthenticationStateProvider, ExternalAuthStateProvider>();

Voeg in de MainWindowconstructor (MainWindow.xaml.cs) de autorisatieservices en de Blazor abstractie toe aan de serviceverzameling:

serviceCollection.AddAuthorizationCore();
serviceCollection.TryAddScoped<AuthenticationStateProvider, ExternalAuthStateProvider>();

Voeg in de Form1constructor (Form1.cs) de autorisatieservices en de Blazor abstractie toe aan de serviceverzameling:

services.AddAuthorizationCore();
services.TryAddScoped<AuthenticationStateProvider, ExternalAuthStateProvider>();

Het volgende LoginComponent-component laat zien hoe u een gebruiker aanmeldt. In een typische app wordt het LoginComponent-onderdeel alleen weergegeven in een ouder onderdeel als de gebruiker niet is aangemeld bij de app.

Shared/LoginComponent.razor:

@inject AuthenticationStateProvider AuthenticationStateProvider

<button @onclick="Login">Log in</button>

@code
{
    public async Task Login()
    {
        await ((ExternalAuthStateProvider)AuthenticationStateProvider)
            .LogInAsync();
    }
}

Het volgende LogoutComponent-component demonstreert hoe u een gebruiker afmeldt. In een typische app wordt de LogoutComponent-component alleen weergegeven in een bovenliggende component als de gebruiker is ingelogd in de app.

Shared/LogoutComponent.razor:

@inject AuthenticationStateProvider AuthenticationStateProvider

<button @onclick="Logout">Log out</button>

@code
{
    public async Task Logout()
    {
        await ((ExternalAuthStateProvider)AuthenticationStateProvider)
            .Logout();
    }
}

Toegang tot andere verificatiegegevens

Blazor definieert geen abstractie om te gaan met andere referenties, zoals toegangstokens die moeten worden gebruikt voor HTTP-aanvragen voor web-API's. We raden u aan de richtlijnen van de identity-provider te volgen om de gebruikersreferenties te beheren met de primitieven die de SDK van de identity-provider biedt.

Het is gebruikelijk dat identity provider-SDK's een tokenarchief gebruiken voor gebruikersreferenties die zijn opgeslagen op het apparaat. Als de basiscomponent voor tokenopslag van de SDK wordt toegevoegd aan de servicecontainer, gebruikt u de primitieve functionaliteit van de SDK in de app.

Het Blazor framework is niet op de hoogte van de verificatiereferenties van een gebruiker en communiceert op geen enkele manier met referenties, dus de code van de app is vrij om de methode te volgen die u het handigst vindt. Volg echter de algemene beveiligingsrichtlijnen in de volgende sectie, Andere overwegingen voor verificatiebeveiligingbij het implementeren van verificatiecode in een app.

Andere beveiligingsoverwegingen voor verificatie

Het verificatieproces is extern voor Blazoren we raden ontwikkelaars aan de richtlijnen van de identity provider te openen voor aanvullende beveiligingsrichtlijnen.

Bij het implementeren van verificatie:

• Vermijd authenticatie in de context van de Web View. Vermijd bijvoorbeeld het gebruik van een JavaScript OAuth-bibliotheek om de verificatiestroom uit te voeren. In een app met één pagina worden verificatietokens niet verborgen in JavaScript en kunnen ze eenvoudig worden gedetecteerd door kwaadwillende gebruikers en worden gebruikt voor kwaadaardige doeleinden. Systeemeigen apps lijden dit risico niet omdat systeemeigen apps alleen tokens kunnen verkrijgen buiten de browsercontext, wat betekent dat frauduleuze scripts van derden de tokens niet kunnen stelen en de app kunnen in gevaar komen.
• Vermijd het zelf implementeren van de verificatiewerkstroom. Meestal verwerken platformbibliotheken het authenticatieproces veilig met de systeembrowser in plaats van een aangepaste Web View die kan worden gekaapt.
• Vermijd het gebruik van de Web View controle van het platform om authenticatie uit te voeren. Vertrouw in plaats daarvan indien mogelijk op de browser van het systeem.
• Vermijd het doorgeven van de tokens aan de documentcontext (JavaScript). In sommige situaties is een JavaScript-bibliotheek in het document vereist om een geautoriseerde aanroep naar een externe service uit te voeren. In plaats van het token beschikbaar te maken voor JavaScript via JS interop:
  • Geef een gegenereerd tijdelijk token op voor de bibliotheek en gebruik het binnen de sectie Web View.
  • Onderschep de uitgaande netwerkaanvraag in code.
  • Vervang het tijdelijke token door het echte token en controleer of de bestemming van de aanvraag geldig is.

Aanvullende informatiebronnen

• ASP.NET Core Blazor verificatie en autorisatie
• beveiligingsoverwegingen voor ASP.NET Core Blazor Hybrid
• Documentatie voor Entra ID voor .NET MAUI
  • Zelfstudie: .NET MAUI mobiele app registreren en configureren in een externe tenant
  • gebruikers aanmelden in een voorbeeld-.NET MAUI Android-toepassing
  • gebruikers aanmelden in een voorbeeld van een .NET MAUI bureaubladtoepassing
• Azure-documentatie voor .NET MAUI
  • Verificatie toevoegen aan uw .NET MAUI-app
  • MAUI mobiele of desktoptoepassing met behulp van Microsoft Entra ID voor authenticatie