Een ASP.NET Core Blazor WebAssembly zelfstandige app beveiligen met Microsoft-accounts

In dit artikel wordt uitgelegd hoe u een zelfstandige Blazor WebAssembly-app maakt die gebruikmaakt van Microsoft-accounts met Microsoft Entra (ME-ID) voor verificatie.

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 tenant maken in Azure
• Een app registreren in Azure
• De Blazor-app maken
• De app uitvoeren

Een tenant maken in Azure

Volg de richtlijnen in Quickstart: Een tenant instellen om een tenant te maken in ME-ID.

Een app registreren in Azure

Een ME-ID-app registreren:

1. Navigeer naar Microsoft Entra ID in Azure Portal. Selecteer App-registraties in de zijbalk. Klik op de knop Nieuwe registratie.
2. Geef een naam op voor de app (bijvoorbeeld Blazor Standalone ME-ID MS-accounts).
3. Selecteer in Ondersteunde accounttypenAccounts in elke organisatiemap (Elke Microsoft Entra-id-map – Multitenant).
4. Stel de omleidings-URI vervolgkeuzelijst in op spa- en geef de volgende omleidings-URI op: https://localhost/authentication/login-callback. Als u de omleidings-URI voor de productie voor de standaardhost van Azure (bijvoorbeeld azurewebsites.net) of de aangepaste domeinhost (bijvoorbeeld contoso.com) kent, kunt u ook de omleidings-URI voor productie toevoegen op hetzelfde moment dat u de localhost omleidings-URI opgeeft. Zorg ervoor dat u het poortnummer voor niet-:443 poorten opneemt in eventuele productieomleidings-URI's die u toevoegt.
5. Als u een niet-geverifieerd uitgeversdomein gebruikt, schakelt u het selectievakje Machtigingen>Beheerderstoestemming verlenen voor openid- en offline_access machtigingen uit. Als het uitgeversdomein is geverifieerd, is dit selectievakje niet aanwezig.
6. Selecteer registreren.

Notitie

Het opgeven van het poortnummer voor een localhost ME-ID omleidings-URI is niet vereist. Zie Beperkingen en beperkingen voor omleidings-URI (antwoord-URL): Localhost-uitzonderingen (Entra-documentatie)voor meer informatie.

Noteer de id van de toepassing (client) (bijvoorbeeld 00001111-aaaa-2222-bbbb-3333cccc4444).

In Authentication>Platform-configuraties>toepassing met één pagina:

1. Controleer of de omleidings-URI van https://localhost/authentication/login-callback aanwezig is.
2. Controleer in de sectie Impliciete toekenning of de selectievakjes voor Toegangstokens en id-tokens niet zijn geselecteerd. Impliciete toekenning wordt niet aanbevolen voor Blazor-apps met MSAL v2.0 of hoger. Zie Secure ASP.NET Core Blazor WebAssemblyvoor meer informatie.
3. De resterende standaardwaarden voor de app zijn acceptabel voor deze ervaring.
4. Selecteer de knop Opslaan als u wijzigingen hebt aangebracht.

De Blazor-app maken

Maak de app. Vervang de tijdelijke aanduidingen in de volgende opdracht door de informatie die u eerder hebt vastgelegd en voer de volgende opdracht uit in een opdrachtshell:

dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" --tenant-id "common" -o {PROJECT NAME}

Tijdelijke aanduiding	Azure Portal-naam	Voorbeeld
{PROJECT NAME}	—	BlazorSample
{CLIENT ID}	Toepassings-id (client)	00001111-aaaa-2222-bbbb-3333cccc4444

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.

Voeg een paar MsalProviderOptions toe voor openid en offline_accessDefaultAccessTokenScopes:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.DefaultAccessTokenScopes.Add("openid");
    options.ProviderOptions.DefaultAccessTokenScopes.Add("offline_access");
});

De app uitvoeren

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

• Visual Studio
  • Selecteer de knop uitvoeren.
  • Gebruik Foutopsporing>start de foutopsporing in 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 werk- of schoolaccounts (SingleOrg), ontvangt de app automatisch een pakketreferentie voor de Microsoft Authentication Library (Microsoft.Authentication.WebAssembly.Msal). 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.Authentication.WebAssembly.Msal-pakket handmatig toe aan de app.

Notitie

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

Het Microsoft.Authentication.WebAssembly.Msal pakket voegt het Microsoft.AspNetCore.Components.WebAssembly.Authentication pakket transitief toe aan de app.

Ondersteuning voor verificatieservice

Ondersteuning voor het verifiëren van gebruikers wordt geregistreerd in de servicecontainer met de AddMsalAuthentication extensiemethode die wordt geleverd door het Microsoft.Authentication.WebAssembly.Msal-pakket. Met deze methode stelt u alle services in die nodig zijn om de app te laten communiceren met de Identity Provider (IP).

In het bestand Program:

builder.Services.AddMsalAuthentication(options =>
{
    builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
});

De methode AddMsalAuthentication accepteert een callback om de parameters te configureren die nodig zijn om een app te verifiëren. De waarden die vereist zijn voor het configureren van de app, kunnen worden verkregen uit de ME-ID configuratie wanneer u de app registreert.

configuratie van wwwroot/appsettings.json

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

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "{CLIENT ID}",
    "ValidateAuthority": true
  }
}

Voorbeeld:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/common",
    "ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
    "ValidateAuthority": true
  }
}

Toegangstokenbereiken

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 de aanmeldingsstroom, voegt u het bereik toe aan de standaardbereiken voor toegangstokens van de MsalProviderOptions:

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

Specificeer aanvullende reikwijdten met AdditionalScopesToConsent.

options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");

Notitie

AdditionalScopesToConsent voor Microsoft Graph via de toestemmings-UI van Microsoft Entra ID wanneer een gebruiker voor het eerst een app gebruikt die geregistreerd is in Microsoft Azure. Zie Graph API gebruiken met ASP.NET Core Blazor WebAssemblyvoor meer informatie.

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

• aanvullende toegangstokens aanvragen
• tokens koppelen aan uitgaande aanvragen
• quickstart: Een toepassing configureren om web-API's beschikbaar te maken

Aanmeldingsmodus

Het framework is standaard ingesteld op de pop-upaanmeldingsmodus en valt terug naar de omleidingsaanmeldingsmodus als een pop-up niet kan worden geopend. Configureer MSAL voor het gebruik van de omleidingsaanmeldingsmodus door de eigenschap LoginMode van MsalProviderOptions in te stellen op redirect:

builder.Services.AddMsalAuthentication(options =>
{
    ...
    options.ProviderOptions.LoginMode = "redirect";
});

De standaardinstelling is popupen de tekenreekswaarde is niet hoofdlettergevoelig.

Bestand importeren

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

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using {APPLICATION ASSEMBLY}
@using {APPLICATION ASSEMBLY}.Shared

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.Authentication.WebAssembly.Msal/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 branches 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 tijdens releases van ASP.NET Core, wordt de Razor-markup voor de LoginDisplay-component 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 LoginDisplay onderdeel in de gegenereerde app.

• Controleer het onderdeel LoginDisplay 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 .NET compiler null-state-statische analyse 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 Provider (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 autoriteit, 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.
  • Het uitvoeren van de app op een andere poort dan geconfigureerd in de redirect-URI van de app-registratie van de IP. 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 een exacte foutmelding of een bericht met een aanwijzing over wat het probleem veroorzaakt, door de IP- of server-app geretourneerd nadat u een aanvraag hebt ingediend. 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. Dien geen probleem in bij de producteenheid totdat u de oorzaak van een probleem grondig hebt onderzocht en het probleem zelf niet kunt oplossen, en 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 client 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. Verwijder het volgende bij het aanbrengen van wijzigingen in app-code, wijzigingen in gebruikersaccounts bij de provider of wijzigingen in de configuratie van provider-app:

• 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.
  • Klik op 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 tijdelijke aanduiding {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
• een aangepaste versie van de JavaScript-bibliotheek Authentication.MSAL maken
• niet-geverifieerde of niet-geautoriseerde web-API-aanvragen in een app met een beveiligde standaardclient
• ASP.NET Core Blazor WebAssembly met Microsoft Entra ID-groepen en -rollen
• quickstart: Een toepassing registreren bij het Microsoft Identity Platform
• quickstart: Een toepassing configureren om web-API's beschikbaar te maken