Een ASP.NET Core Blazor WebAssembly zelfstandige app beveiligen met de verificatiebibliotheek

In dit artikel wordt uitgelegd hoe u een zelfstandige ASP.NET Core Blazor WebAssembly-app beveiligt met de Blazor WebAssembly-verificatiebibliotheek.

De Blazor WebAssembly Verificatiebibliotheek (Authentication.js) ondersteunt alleen de autorisatiecodestroom voor Proof Key for Code Exchange (PKCE) via de Microsoft Authentication Library (MSAL, msal.js). Als u andere toekenningsstromen wilt implementeren, opent u de MSAL-richtlijnen om MSAL rechtstreeks te implementeren, maar wordt het gebruik van andere toekenningsstromen dan PKCE voor Blazor-apps niet ondersteund of aanbevolen.

Volg de richtlijnen in dit onderwerp niet met betrekking tot Microsoft Entra (ME-ID) en Azure Active Directory B2C (AAD B2C). Zie Een ASP.NET Core Blazor WebAssembly zelfstandige app beveiligen met Microsoft Entra ID of Een zelfstandige ASP.NET Core Blazor WebAssembly-app beveiligen met Azure Active Directory B2C.

Zie ASP.NET Core Blazor WebAssembly aanvullende beveiligingsscenario'svoor aanvullende dekking van beveiligingsscenario's na het lezen van dit artikel.

Stapsgewijze Handleiding

In de subsecties van het overzicht wordt uitgelegd hoe u het volgende kunt doen:

• Een app registreren
• De Blazor-app maken
• De app uitvoeren

Een app registreren

Registreer een app bij een OpenID Connect (OIDC)Identity Provider (IP) volgens de richtlijnen van de onderhouder van het IP-adres.

Noteer de volgende informatie:

• Instantie (bijvoorbeeld https://accounts.google.com/).
• Toepassings-id (client) (bijvoorbeeld 2...7-e...q.apps.googleusercontent.com).
• Aanvullende IP-configuratie (zie de documentatie van het IP-adres).

Notitie

Het IP-adres moet gebruikmaken van OIDC. Het IP-adres van Facebook is bijvoorbeeld geen OIDC-compatibele provider, dus de richtlijnen in dit onderwerp werken niet met het FACEBOOK-IP-adres. Zie Secure ASP.NET Core Blazor WebAssemblyvoor meer informatie.

De Blazor-app maken

Als u een zelfstandige Blazor WebAssembly-app wilt maken die gebruikmaakt van de Microsoft.AspNetCore.Components.WebAssembly.Authentication-bibliotheek, volgt u de richtlijnen voor uw keuze voor hulpprogramma's. Als u ondersteuning voor verificatie toevoegt, raadpleegt u de sectie Onderdelen van de app van dit artikel voor hulp bij het instellen en configureren van de app.

Visual Studio

Een nieuw Blazor WebAssembly-project maken met een verificatiemechanisme:

Nadat u de sjabloon Blazor WebAssembly App hebt gekozen, stelt u het authenticatietype in op individuele accounts.

De Afzonderlijke Accounts selectie maakt gebruik van het ASP.NET Core Identity systeem. Deze selectie voegt verificatieondersteuning toe en resulteert niet in het opslaan van gebruikers in een database. In de volgende secties van dit artikel vindt u meer informatie.

Visual Studio Code / .NET CLI

Maak een nieuw Blazor WebAssembly project met een verificatiemechanisme in een lege map. Geef het Individual verificatiemechanisme op met de optie -au|--auth om het Identity-systeem van ASP.NET Core te gebruiken. Deze selectie voegt verificatieondersteuning toe en resulteert niet in het opslaan van gebruikers in een database. In de volgende secties van dit artikel vindt u meer informatie.

dotnet new blazorwasm -au Individual -o {PROJECT NAME}

Tijdelijke aanduiding	Voorbeeld
{PROJECT NAME}	BlazorSample

De uitvoerlocatie die is opgegeven met de optie -o|--output maakt een projectmap als deze niet bestaat en deel uitmaakt van de naam van het project.

Zie de opdracht dotnet new in de .NET Core-handleiding voor meer informatie.

De app configureren

Configureer de app volgens de richtlijnen van het IP-adres. De app vereist minimaal de Local:Authority- en Local:ClientId configuratie-instellingen in het wwwroot/appsettings.json-bestand van de app:

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

Google OAuth 2.0 OIDC-voorbeeld voor een app die wordt uitgevoerd op het localhost-adres op poort 5001:

{
  "Local": {
    "Authority": "https://accounts.google.com/",
    "ClientId": "2...7-e...q.apps.googleusercontent.com",
    "PostLogoutRedirectUri": "https://localhost:5001/authentication/logout-callback",
    "RedirectUri": "https://localhost:5001/authentication/login-callback",
    "ResponseType": "code"
  }
}

De omleidings-URI (https://localhost:5001/authentication/login-callback) is geregistreerd in de Google API-console in Referenties>{NAME}>geautoriseerde omleidings-URI's, waarbij {NAME} de clientnaam van de app is in de OAuth 2.0-client-id's app-lijst van de Google API-console.

Notitie

Het opgeven van het poortnummer voor een localhost omleidings-URI is niet vereist voor sommige OIDC-IP's volgens de OAuth 2.0-specificatie. Sommige IP-adressen staan de omleidings-URI voor loopback-adressen toe om de poort weg te laten. Anderen staan het gebruik van een jokerteken toe voor het poortnummer (bijvoorbeeld *). Zie de documentatie van het IP-adres voor meer informatie.

De app uitvoeren

Gebruik een van de volgende methoden om de app uit te voeren:

• Visual Studio
  • Druk op de knop Uitvoeren.
  • Gebruik Foutopsporing>Start foutopsporing vanuit het menu.
  • Druk op F5-.
• .NET CLI-opdrachtshell: voer de opdracht dotnet watch (of dotnet run) uit vanuit de map van de app.

Onderdelen van de app

In deze sectie worden de onderdelen beschreven van een app die is gegenereerd op basis van de Blazor WebAssembly projectsjabloon en hoe de app wordt geconfigureerd. Er zijn geen specifieke richtlijnen die u in deze sectie kunt volgen voor een basiswerktoepassing als u de app hebt gemaakt met behulp van de richtlijnen in de sectie Walkthrough. De richtlijnen in deze sectie zijn handig voor het bijwerken van een app om gebruikers te verifiëren en te autoriseren. Een alternatieve benadering voor het bijwerken van een app is echter om een nieuwe app te maken op basis van de richtlijnen in de sectie walkthrough en het verplaatsen van de onderdelen, klassen en resources van de app naar de nieuwe app.

Verificatiepakket

Wanneer een app wordt gemaakt voor het gebruik van afzonderlijke gebruikersaccounts, ontvangt de app automatisch een pakketreferentie voor het Microsoft.AspNetCore.Components.WebAssembly.Authentication-pakket. Het pakket biedt een set primitieven waarmee de app gebruikers kan verifiëren en tokens kan verkrijgen om beveiligde API's aan te roepen.

Als u verificatie toevoegt aan een app, voegt u het Microsoft.AspNetCore.Components.WebAssembly.Authentication-pakket handmatig toe aan de app.

Notitie

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

Ondersteuning voor verificatieservice

Ondersteuning voor het verifiëren van gebruikers met behulp van OpenID Connect (OIDC) wordt geregistreerd in de servicecontainer met de AddOidcAuthentication extensiemethode die wordt geleverd door het Microsoft.AspNetCore.Components.WebAssembly.Authentication-pakket.

De methode AddOidcAuthentication accepteert een callback om de parameters te configureren die vereist zijn voor het verifiëren van een app met behulp van OIDC. De waarden die vereist zijn voor het configureren van de app, kunnen worden verkregen via het IP-adres dat compatibel is met OIDC. Haal de waarden op wanneer u de app registreert. Deze vindt meestal plaats in hun onlineportal.

Geef voor een nieuwe app waarden op voor de tijdelijke aanduidingen {AUTHORITY} en {CLIENT ID} in de volgende configuratie. Geef andere configuratiewaarden op die vereist zijn voor gebruik met het IP-adres van de app. Het voorbeeld is voor Google, waarvoor PostLogoutRedirectUri, RedirectUrien ResponseTypevereist zijn. Als u verificatie toevoegt aan een app, voegt u handmatig de volgende code en configuratie toe aan de app met waarden voor de tijdelijke aanduidingen en andere configuratiewaarden.

In het bestand Program:

builder.Services.AddOidcAuthentication(options =>
{
    builder.Configuration.Bind("Local", options.ProviderOptions);
});

configuratie van wwwroot/appsettings.json

De configuratie wordt geleverd door het wwwroot/appsettings.json-bestand:

{
  "Local": {
    "Authority": "{AUTHORITY}",
    "ClientId": "{CLIENT ID}"
  }
}

Toegangstoken-reikwijdten

De Blazor WebAssembly-sjabloon configureert automatisch standaardbereiken voor openid en profile.

De Blazor WebAssembly-sjabloon configureert de app niet automatisch om een toegangstoken voor een beveiligde API aan te vragen. Als u een toegangstoken wilt inrichten als onderdeel van het aanmeldproces, voegt u de scope toe aan de standaardtokenbereiken van de OidcProviderOptions. Als u verificatie toevoegt aan een app, voegt u handmatig de volgende code toe en configureert u de bereik-URI.

In het bestand Program:

builder.Services.AddOidcAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultScopes.Add("{SCOPE URI}");
});

Zie de volgende secties van het artikel Aanvullende scenario's voor meer informatie:

• aanvullende toegangstokens aanvragen
• tokens koppelen aan uitgaande aanvragen

Importbestand

De Microsoft.AspNetCore.Components.Authorization naamruimte wordt beschikbaar gesteld in de app via het _Imports.razor-bestand:

...
@using Microsoft.AspNetCore.Components.Authorization
...

Indexpagina

De pagina Index (wwwroot/index.html) bevat een script waarmee de AuthenticationService in JavaScript wordt gedefinieerd. AuthenticationService verwerkt de details op laag niveau van het OIDC-protocol. De app roept intern methoden aan die in het script zijn gedefinieerd om de verificatiebewerkingen uit te voeren.

<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

App-onderdeel

Het App-onderdeel (App.razor) is vergelijkbaar met het App onderdeel dat is gevonden in Blazor Server-apps:

• Het AuthorizeRouteView-onderdeel zorgt ervoor dat de huidige gebruiker gemachtigd is om toegang te krijgen tot een bepaalde pagina of op een andere manier het RedirectToLogin onderdeel weergeeft.
• Het RedirectToLogin onderdeel beheert het omleiden van onbevoegde gebruikers naar de aanmeldingspagina.

Vanwege wijzigingen in het framework in releases van ASP.NET Core, worden Razor markeringen voor het App-onderdeel (App.razor) niet weergegeven in deze sectie. Gebruik van de volgende benaderingen om de markering van het onderdeel voor een bepaalde release te controleren:

• Maak een app die is ingericht voor verificatie op basis van de standaardsjabloon Blazor WebAssembly project voor de versie van ASP.NET Core die u wilt gebruiken. Inspecteer het App-onderdeel (App.razor) in de gegenereerde app.

• Inspecteer het App-onderdeel (App.razor) in referentiebron. Selecteer de versie in de vertakkingskiezer en zoek naar het onderdeel in de map ProjectTemplates van de opslagplaats omdat het in de loop van de jaren is verplaatst.

  Notitie

  Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Switch-vertakkingen of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

RedirectToLogin-onderdeel

Het RedirectToLogin-onderdeel (RedirectToLogin.razor):

• Beheert het omleiden van onbevoegde gebruikers naar de aanmeldingspagina.
• De huidige URL waartoe de gebruiker toegang probeert te krijgen, wordt onderhouden, zodat deze naar die pagina kan worden geretourneerd als de verificatie is geslaagd:
  • status van de navigatiegeschiedenis in ASP.NET Core in .NET 7 of hoger.
  • Een queryreeks in ASP.NET Core in .NET 6 of eerder.

Inspecteer het RedirectToLogin onderdeel in referentiebron. De locatie van het onderdeel is in de loop van de tijd gewijzigd, dus gebruik GitHub-zoekhulpprogramma's om het onderdeel te vinden.

Notitie

Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Switch-vertakkingen of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

LoginDisplay-onderdeel

Het LoginDisplay onderdeel (LoginDisplay.razor) wordt weergegeven in het MainLayout-onderdeel (MainLayout.razor) en beheert het volgende gedrag:

• Voor geverifieerde gebruikers:
  • Geeft de huidige gebruikersnaam weer.
  • Biedt een koppeling naar de gebruikersprofielpagina in ASP.NET Core Identity.
  • Biedt een knop om u af te melden bij de app.
• Voor anonieme gebruikers:
  • Biedt de mogelijkheid om te registreren.
  • Biedt de mogelijkheid om u aan te melden.

Vanwege wijzigingen in het framework tussen verschillende releases van ASP.NET Core, wordt Razor markup voor het LoginDisplay component niet getoond in deze sectie. Gebruik van de volgende benaderingen om de markering van het onderdeel voor een bepaalde release te controleren:

• Maak een app die is ingericht voor verificatie op basis van de standaardsjabloon Blazor WebAssembly project voor de versie van ASP.NET Core die u wilt gebruiken. Inspecteer het LoginDisplay onderdeel in de gegenereerde app.

• Inspecteer het LoginDisplay onderdeel in referentiebron. De locatie van het onderdeel is in de loop van de tijd gewijzigd, dus gebruik GitHub-zoekhulpprogramma's om het onderdeel te vinden. De sjablooninhoud voor Hosted gelijk aan true wordt gebruikt.

  Notitie

  Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Switch-vertakkingen of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

Verificatieonderdeel

De pagina die door het Authentication onderdeel (Pages/Authentication.razor) wordt geproduceerd, definieert de routes die vereist zijn voor het verwerken van verschillende verificatiefasen.

Het RemoteAuthenticatorView-onderdeel:

• Wordt geleverd door het Microsoft.AspNetCore.Components.WebAssembly.Authentication pakket.
• Beheert het uitvoeren van de juiste acties in elke fase van de verificatie.

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication

<RemoteAuthenticatorView Action="@Action" />

@code {
    [Parameter]
    public string? Action { get; set; }
}

Notitie

Nullable reference types (NRTs) en de statische null-toestandsanalyse van de .NET-compiler worden ondersteund in ASP.NET Core in .NET 6 of hoger. Vóór de release van ASP.NET Core in .NET 6 wordt het string type weergegeven zonder de null-typeaanduiding (?).

Problemen oplossen

Loggen

Als u foutopsporing of traceringslogboekregistratie wilt inschakelen voor Blazor WebAssembly-verificatie, raadpleegt u de sectie logboekregistratie aan de clientzijde van ASP.NET Core Blazor logboekregistratie met de artikelversiekiezer ingesteld op ASP.NET Core 7.0 of hoger.

Veelvoorkomende fouten

• Onjuiste configuratie van de app of Identity dienstverlener (IP)

  De meest voorkomende fouten worden veroorzaakt door onjuiste configuratie. Hier volgen enkele voorbeelden:

  • Afhankelijk van de vereisten van het scenario voorkomt een ontbrekende of onjuiste Authority, instantie, tenant-id, tenantdomein, client-id of omleidings-URI dat een app clients kan authenticeren.
  • Onjuiste aanvraagbereiken voorkomen dat clients toegang hebben tot eindpunten van de serverweb-API.
  • Onjuiste of ontbrekende server-API-machtigingen voorkomen dat clients toegang hebben tot web-API-eindpunten van de server.
  • Een app uitvoeren op een andere poort dan die welke is geconfigureerd in de omleidings-URI van de app-registratie van het IP-adres. Houd er rekening mee dat een poort niet vereist is voor Microsoft Entra ID en een app die wordt uitgevoerd op een localhost ontwikkelingstestadres, maar de poortconfiguratie van de app en de poort waarop de app wordt uitgevoerd, moet overeenkomen met niet-localhost adressen.

  In de configuratiesecties van de richtlijnen van dit artikel ziet u voorbeelden van de juiste configuratie. Controleer elke sectie van het artikel zorgvuldig op zoek naar onjuiste configuratie van apps en IP-adressen.

  Als de configuratie correct wordt weergegeven:

  • Toepassingslogboeken analyseren.

  • Controleer het netwerkverkeer tussen de client-app en de IP- of server-app met de ontwikkelhulpprogramma's van de browser. Vaak wordt, nadat u een aanvraag hebt ingediend, een exacte foutmelding of een bericht met een aanwijzing voor wat het probleem veroorzaakt, door de IP- of server-app geretourneerd. Richtlijnen voor ontwikkelhulpprogramma's vindt u in de volgende artikelen:

    • Google Chrome (Google-documentatie)
    • Microsoft Edge
    • Mozilla Firefox (Mozilla-documentatie)

  • Voor releases van Blazor waarbij een JSON-webtoken (JWT) wordt gebruikt, decodert u de inhoud van het token dat wordt gebruikt voor het verifiëren van een client of het openen van een serverweb-API, afhankelijk van waar het probleem optreedt. Zie De inhoud van een JSON-webtoken (JWT) controlerenvoor meer informatie.

  Het documentatieteam reageert op documentfeedback en fouten in artikelen (open een probleem in de sectie Deze pagina feedback), maar kan geen productondersteuning bieden. Er zijn verschillende openbare ondersteuningsforums beschikbaar om u te helpen bij het oplossen van problemen met een app. U wordt aangeraden het volgende te doen:

  • Stack Overflow (tag: blazor)
  • ASP.NET Core Slack Team
  • Blazor Gitter

  De voorgaande forums zijn niet eigendom van of worden beheerd door Microsoft.

  Voor foutrapporten over niet-beveiliging, niet-gevoelige en niet-vertrouwelijke reproduceerbare frameworks, een probleem openen met de ASP.NET Core-producteenheid. Open geen melding bij de productafdeling totdat u de oorzaak van een probleem grondig hebt onderzocht en het zelf niet kunt oplossen, ook niet met behulp van de community op een openbaar ondersteuningsforum. De producteenheid kan geen problemen met afzonderlijke apps oplossen die zijn verbroken vanwege eenvoudige onjuiste configuratie of gebruiksscenario's met betrekking tot services van derden. Als een rapport gevoelig of vertrouwelijk is of een mogelijke beveiligingsfout beschrijft in het product die cyberaanvallers kunnen misbruiken, zie Beveiligingsproblemen en bugs (dotnet/aspnetcore GitHub-opslagplaats) melden.

• Niet-geautoriseerde cliënt voor ME-ID

  info: Autorisatie van Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] is mislukt. Aan deze vereisten is niet voldaan: DenyAnonymousAuthorizationRequirement: Vereist een geverifieerde gebruiker.

  Aanmeldingsoproepfout van ME-ID:

  • Fout: unauthorized_client
  • Beschrijving: AADB2C90058: The provided application is not configured to allow public clients.

  De fout oplossen:

  1. Open in Azure Portal het manifest van de -app.
  2. Stel de allowPublicClient kenmerk- in op null of true.

Cookies en sitegegevens

Cookies en sitegegevens kunnen worden bewaard in app-updates en kunnen het testen en oplossen van problemen verstoren. Wis het volgende bij wijzigingen in de app-code, gebruikersaccountwijzigingen bij de provider, of wijzigingen in de configuratie van provider-apps:

• Aanmeldingscookies van gebruikers
• App-cookies
• Sitegegevens in cache en opgeslagen

Een benadering om te voorkomen dat achterblijvende cookies en sitegegevens het testen en oplossen van problemen verstoren, is het volgende:

• Een browser configureren
  • Gebruik een browser om te testen dat u kunt configureren om alle cookie en sitegegevens te verwijderen telkens wanneer de browser wordt gesloten.
  • Zorg ervoor dat de browser handmatig of door de IDE is gesloten voor een wijziging in de configuratie van de app, testgebruiker of provider.
• Gebruik een aangepaste opdracht om een browser te openen in de InPrivate- of Incognitomodus in Visual Studio:
  • Open dialoogvenster Bladeren met vanuit de knop Uitvoeren van Visual Studio.
  • Selecteer de knop Toevoegen.
  • Geef het pad naar uw browser op in het veld Program. De volgende uitvoerbare paden zijn typische installatielocaties voor Windows 10. Als uw browser is geïnstalleerd op een andere locatie of als u Windows 10 niet gebruikt, geeft u het pad op naar het uitvoerbare bestand van de browser.
    • Microsoft Edge: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe
    • Google Chrome: C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
    • Mozilla Firefox: C:\Program Files\Mozilla Firefox\firefox.exe
  • Geef in het veld Argumenten de opdrachtregeloptie op die de browser gebruikt om in de InPrivate- of Incognitomodus te openen. Voor sommige browsers is de URL van de app vereist.
    • Microsoft Edge: gebruik -inprivate.
    • Google Chrome: gebruik --incognito --new-window {URL}, waarbij de {URL} tijdelijke aanduiding de URL is die moet worden geopend (bijvoorbeeld https://localhost:5001).
    • Mozilla Firefox: gebruik -private -url {URL}, waarbij de placeholder {URL} de URL is die moet worden geopend (bijvoorbeeld https://localhost:5001).
  • Geef een naam op in het veld Vriendelijke naam. Bijvoorbeeld Firefox Auth Testing.
  • Selecteer de knop OK.
  • Om te voorkomen dat u het browserprofiel moet selecteren voor elke iteratie van het testen met een app, stelt u het profiel in als de standaardinstelling met de knop Als standaard instellen.
  • Zorg ervoor dat de browser wordt gesloten door de IDE voor elke wijziging in de app, testgebruiker of providerconfiguratie.

App-upgrades

Een werkende app kan onmiddellijk mislukken na het upgraden van de .NET Core SDK op de ontwikkelcomputer of het wijzigen van pakketversies in de app. In sommige gevallen kunnen incoherent pakketten een app breken bij het uitvoeren van belangrijke upgrades. De meeste van deze problemen kunnen worden opgelost door de volgende instructies te volgen:

1. Wis de NuGet-pakketcaches van het lokale systeem door dotnet nuget locals all --clear uit te voeren vanuit een opdrachtshell.
2. Verwijder de bin en obj mappen van het project.
3. Herstel het project en bouw het opnieuw.
4. Verwijder alle bestanden in de implementatiemap op de server voordat u de app opnieuw implementeert.

Notitie

Het gebruik van pakketversies die niet compatibel zijn met het doelframework van de app, wordt niet ondersteund. Gebruik de NuGet Galleryvoor informatie over een pakket.

De gebruiker inspecteren

Het volgende User onderdeel kan rechtstreeks in apps worden gebruikt of dienen als basis voor verdere aanpassing.

User.razor:

@page "/user"
@attribute [Authorize]
@using System.Text.Json
@using System.Security.Claims
@inject IAccessTokenProvider AuthorizationService

<h1>@AuthenticatedUser?.Identity?.Name</h1>

<h2>Claims</h2>

@foreach (var claim in AuthenticatedUser?.Claims ?? Array.Empty<Claim>())
{
    <p class="claim">@(claim.Type): @claim.Value</p>
}

<h2>Access token</h2>

<p id="access-token">@AccessToken?.Value</p>

<h2>Access token claims</h2>

@foreach (var claim in GetAccessTokenClaims())
{
    <p>@(claim.Key): @claim.Value.ToString()</p>
}

@if (AccessToken != null)
{
    <h2>Access token expires</h2>

    <p>Current time: <span id="current-time">@DateTimeOffset.Now</span></p>
    <p id="access-token-expires">@AccessToken.Expires</p>

    <h2>Access token granted scopes (as reported by the API)</h2>

    @foreach (var scope in AccessToken.GrantedScopes)
    {
        <p>Scope: @scope</p>
    }
}

@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationState { get; set; }

    public ClaimsPrincipal AuthenticatedUser { get; set; }
    public AccessToken AccessToken { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        var state = await AuthenticationState;
        var accessTokenResult = await AuthorizationService.RequestAccessToken();

        if (!accessTokenResult.TryGetToken(out var token))
        {
            throw new InvalidOperationException(
                "Failed to provision the access token.");
        }

        AccessToken = token;

        AuthenticatedUser = state.User;
    }

    protected IDictionary<string, object> GetAccessTokenClaims()
    {
        if (AccessToken == null)
        {
            return new Dictionary<string, object>();
        }

        // header.payload.signature
        var payload = AccessToken.Value.Split(".")[1];
        var base64Payload = payload.Replace('-', '+').Replace('_', '/')
            .PadRight(payload.Length + (4 - payload.Length % 4) % 4, '=');

        return JsonSerializer.Deserialize<IDictionary<string, object>>(
            Convert.FromBase64String(base64Payload));
    }
}

De inhoud van een JSON Web Token (JWT) controleren

Als u een JSON-webtoken (JWT) wilt decoderen, gebruikt u het hulpprogramma jwt.ms van Microsoft. Waarden in de gebruikersinterface verlaten uw browser nooit.

Voorbeeld van gecodeerde JWT (ingekort voor weergave):

eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q

Voorbeeld van JWT dat is gedecodeerd door het hulpprogramma voor een app die wordt geverifieerd met Azure AAD B2C:

{
  "typ": "JWT",
  "alg": "RS256",
  "kid": "X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk"
}.{
  "exp": 1610059429,
  "nbf": 1610055829,
  "ver": "1.0",
  "iss": "https://mysiteb2c.b2clogin.com/11112222-bbbb-3333-cccc-4444dddd5555/v2.0/",
  "sub": "aaaaaaaa-0000-1111-2222-bbbbbbbbbbbb",
  "aud": "00001111-aaaa-2222-bbbb-3333cccc4444",
  "nonce": "bbbb0000-cccc-1111-dddd-2222eeee3333",
  "iat": 1610055829,
  "auth_time": 1610055822,
  "idp": "idp.com",
  "tfp": "B2C_1_signupsignin"
}.[Signature]

Aanvullende informatiebronnen

• ASP.NET Core Blazor WebAssembly aanvullende beveiligingsscenario's
• niet-geverifieerde of niet-geautoriseerde web-API-aanvragen in een app met een beveiligde standaardclient
• Configureer ASP.NET Core om te werken met proxyservers en load balancers: bevat richtlijnen voor:
  • Gebruik Middleware voor doorgestuurde headers om HTTPS-schemagegevens over proxyservers en interne netwerken te behouden.
  • Aanvullende scenario's en use cases, waaronder handmatige schemaconfiguratie, wijzigingen in aanvraagpaden voor de juiste aanvraagroutering en het doorsturen van het aanvraagschema voor Linux- en niet-IIS-omgekeerde proxy's.