Proteggere un'app autonoma ASP.NET Core Blazor WebAssembly con account Microsoft
Nota
Questa non è la versione più recente di questo articolo. Per la versione corrente, vedere la versione .NET 8 di questo articolo.
Avviso
Questa versione di ASP.NET Core non è più supportata. Per altre informazioni, vedere Criteri di supporto di .NET e .NET Core. Per la versione corrente, vedere la versione .NET 8 di questo articolo.
Importante
Queste informazioni si riferiscono a un prodotto non definitive che può essere modificato in modo sostanziale prima che venga rilasciato commercialmente. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.
Per la versione corrente, vedere la versione .NET 8 di questo articolo.
Questo articolo illustra come creare un'app autonoma Blazor WebAssembly che usa account Microsoft con Microsoft Entra (ME-ID) per l'autenticazione.
Per altre informazioni sulla copertura dello scenario di sicurezza dopo la lettura di questo articolo, vedere ASP.NET Scenari di sicurezza aggiuntivi di baseBlazor WebAssembly.
scenario
Le sottosezioni della procedura dettagliata illustrano come:
- Creare un tenant in Azure
- Registrare un'app in Azure
- Creare l'app Blazor
- Eseguire l'app
Creare un tenant in Azure
Seguire le indicazioni in Avvio rapido: Configurare un tenant per creare un tenant in ME-ID.
Registrare un'app in Azure
Registrare un'app ME-ID:
- Passare a Microsoft Entra ID nel portale di Azure. Selezionare Registrazioni app nella barra laterale. Selezionare il pulsante Nuova registrazione.
- Specificare un nome per l'app ( ad esempio, Blazor account MS ME-ID autonomi).
- In Tipi di account supportati selezionare Account in qualsiasi directory dell'organizzazione (qualsiasi directory ID di Microsoft Entra - Multi-tenant).
- Impostare l'elenco a discesa URI di reindirizzamento su Applicazione a pagina singola (SPA) e specificare l'URI di reindirizzamento seguente:
https://localhost/authentication/login-callback
. Se si conosce l'URI di reindirizzamento di produzione per l'host predefinito di Azure ( ad esempio ,azurewebsites.net
) o l'host di dominio personalizzato (ad esempio ,contoso.com
), è anche possibile aggiungere l'URI di reindirizzamento di produzione contemporaneamente all'URIlocalhost
di reindirizzamento specificato. Assicurarsi di includere il numero di porta per le porte non:443
in qualsiasi URI di reindirizzamento di produzione aggiunti. - Se si usa un dominio di pubblicazione non verificato, deselezionare la casella di controllo Autorizzazioni>Concedi consenso amministratore per openid e offline_access autorizzazioni. Se il dominio del server di pubblicazione viene verificato, questa casella di controllo non è presente.
- Selezionare Registra.
Nota
Non è necessario specificare il numero di porta per un localhost
URI di reindirizzamento ME-ID. Per altre informazioni, vedere Restrizioni e limitazioni dell'URI di reindirizzamento (URL di risposta): eccezioni Localhost (documentazione di Entra).
Registrare l'ID applicazione (client), ad esempio 00001111-aaaa-2222-bbbb-3333cccc4444
.
In Authentication Platform configurations single-page application (Configurazioni>della piattaforma di autenticazione>) applicazione a pagina singola:
- Verificare che l'URI di reindirizzamento di
https://localhost/authentication/login-callback
sia presente. - Nella sezione Concessione implicita verificare che le caselle di controllo per Token di accesso e token ID non siano selezionate. La concessione implicita non è consigliata per Blazor le app che usano MSAL v2.0 o versione successiva. Per altre informazioni, vedere Secure ASP.NET Core Blazor WebAssembly.
- Le impostazioni predefinite rimanenti per l'app sono accettabili per questa esperienza.
- Selezionare il pulsante Salva se sono state apportate modifiche.
Creare l'app Blazor
Creare l'app. Sostituire i segnaposto nel comando seguente con le informazioni registrate in precedenza ed eseguire il comando seguente in una shell dei comandi:
dotnet new blazorwasm -au SingleOrg --client-id "{CLIENT ID}" --tenant-id "common" -o {PROJECT NAME}
Segnaposto | Nome portale di Azure | Esempio |
---|---|---|
{PROJECT NAME} |
— | BlazorSample |
{CLIENT ID} |
ID applicazione (client) | 00001111-aaaa-2222-bbbb-3333cccc4444 |
Il percorso di output specificato con l'opzione -o|--output
crea una cartella del progetto se non esiste e diventa parte del nome del progetto.
Aggiungere una coppia di MsalProviderOptions per openid
e offline_access
DefaultAccessTokenScopes:
builder.Services.AddMsalAuthentication(options =>
{
...
options.ProviderOptions.DefaultAccessTokenScopes.Add("openid");
options.ProviderOptions.DefaultAccessTokenScopes.Add("offline_access");
});
Eseguire l'app
Usare uno degli approcci seguenti per eseguire l'app:
- Visual Studio
- Selezionare il pulsante Run (Esegui).
- Usare Debug>Avvia debug dal menu.
- Premere F5.
- Shell dei comandi dell'interfaccia della riga di comando .NET: eseguire il
dotnet watch
comando (odotnet run
) dalla cartella dell'app.
Parti dell'app
Questa sezione descrive le parti di un'app generata dal Blazor WebAssembly modello di progetto e la modalità di configurazione dell'app. Non sono disponibili indicazioni specifiche da seguire in questa sezione per un'applicazione funzionante di base se è stata creata l'app usando le indicazioni nella sezione Procedura dettagliata . Le indicazioni contenute in questa sezione sono utili per aggiornare un'app per autenticare e autorizzare gli utenti. Tuttavia, un approccio alternativo all'aggiornamento di un'app consiste nel creare una nuova app dalle indicazioni nella sezione Procedura dettagliata e spostare i componenti, le classi e le risorse dell'app nella nuova app.
Pacchetto di autenticazione
Quando un'app viene creata per usare account aziendali o dell'istituto di istruzione (SingleOrg
), l'app riceve automaticamente un riferimento al pacchetto per Microsoft Authentication Library (Microsoft.Authentication.WebAssembly.Msal
). Il pacchetto fornisce un set di primitive che consentono all'app di autenticare gli utenti e ottenere i token per chiamare le API protette.
Se si aggiunge l'autenticazione a un'app, aggiungere manualmente il Microsoft.Authentication.WebAssembly.Msal
pacchetto all'app.
Nota
Per indicazioni sull'aggiunta di pacchetti alle app .NET, vedere gli articoli sotto Installare e gestire pacchetti in Flusso di lavoro dell'utilizzo di pacchetti (documentazione di NuGet). Confermare le versioni corrette del pacchetto all'indirizzo NuGet.org.
Il Microsoft.Authentication.WebAssembly.Msal
pacchetto aggiunge in modo transitivo il Microsoft.AspNetCore.Components.WebAssembly.Authentication
pacchetto all'app.
Supporto del servizio di autenticazione
Il supporto per l'autenticazione degli utenti viene registrato nel contenitore del servizio con il AddMsalAuthentication metodo di estensione fornito dal Microsoft.Authentication.WebAssembly.Msal
pacchetto. Questo metodo configura tutti i servizi necessari per l'interazione dell'app con il Identity provider (IP).
Nel file Program
:
builder.Services.AddMsalAuthentication(options =>
{
builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
});
Il AddMsalAuthentication metodo accetta un callback per configurare i parametri necessari per autenticare un'app. I valori necessari per la configurazione dell'app possono essere ottenuti dalla configurazione ME-ID quando si registra l'app.
Configurazione wwwroot/appsettings.json
La configurazione viene fornita dal wwwroot/appsettings.json
file :
{
"AzureAd": {
"Authority": "https://login.microsoftonline.com/common",
"ClientId": "{CLIENT ID}",
"ValidateAuthority": true
}
}
Esempio:
{
"AzureAd": {
"Authority": "https://login.microsoftonline.com/common",
"ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
"ValidateAuthority": true
}
}
Ambiti del token di accesso
Il Blazor WebAssembly modello non configura automaticamente l'app per richiedere un token di accesso per un'API sicura. Per effettuare il provisioning di un token di accesso come parte del flusso di accesso, aggiungere l'ambito agli ambiti predefiniti del token di accesso di MsalProviderOptions:
builder.Services.AddMsalAuthentication(options =>
{
...
options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});
Specificare ambiti aggiuntivi con AdditionalScopesToConsent
:
options.ProviderOptions.AdditionalScopesToConsent.Add("{ADDITIONAL SCOPE URI}");
Nota
AdditionalScopesToConsent per Microsoft Graph tramite l'interfaccia utente di consenso di Microsoft Entra ID quando un utente usa per la prima volta un'app registrata in Microsoft Azure. Per altre informazioni, vedere Usare l'API Graph con ASP.NET Core Blazor WebAssembly.
Per altre informazioni, vedere le sezioni seguenti dell'articolo Scenari aggiuntivi :
- Richiedere token di accesso aggiuntivi
- Collegare i token alle richieste in uscita
- Guida introduttiva: Configurare un'applicazione per esporre le API Web
Modalità di accesso
Il framework usa per impostazione predefinita la modalità di accesso popup e torna alla modalità di accesso di reindirizzamento se non è possibile aprire un popup. Configurare MSAL per l'uso della modalità di accesso di reindirizzamento impostando la LoginMode
proprietà di MsalProviderOptions su redirect
:
builder.Services.AddMsalAuthentication(options =>
{
...
options.ProviderOptions.LoginMode = "redirect";
});
L'impostazione predefinita è popup
e il valore stringa non fa distinzione tra maiuscole e minuscole.
Importa il file
Lo Microsoft.AspNetCore.Components.Authorization spazio dei nomi viene reso disponibile in tutta l'app tramite il _Imports.razor
file :
@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
Pagina di indice
La pagina Indice (wwwroot/index.html
) include uno script che definisce in AuthenticationService
JavaScript. AuthenticationService
gestisce i dettagli di basso livello del protocollo OIDC. L'app chiama internamente i metodi definiti nello script per eseguire le operazioni di autenticazione.
<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>
Componente dell'app
Il App
componente (App.razor
) è simile al App
componente presente nelle Blazor Server app:
- Il AuthorizeRouteView componente garantisce che l'utente corrente sia autorizzato ad accedere a una determinata pagina o che esegua il rendering del
RedirectToLogin
componente. - Il componente gestisce il
RedirectToLogin
reindirizzamento di utenti non autorizzati alla pagina di accesso.
- Il CascadingAuthenticationState componente gestisce l'esposizione dell'oggetto AuthenticationState all'oggetto rest dell'app.
- Il AuthorizeRouteView componente garantisce che l'utente corrente sia autorizzato ad accedere a una determinata pagina o che esegua il rendering del
RedirectToLogin
componente. - Il componente gestisce il
RedirectToLogin
reindirizzamento di utenti non autorizzati alla pagina di accesso.
A causa delle modifiche apportate al framework tra le versioni di ASP.NET Core, Razor il markup per il App
componente (App.razor
) non viene visualizzato in questa sezione. Per esaminare il markup del componente per una determinata versione, usare uno degli approcci seguenti:
Creare un'app di cui è stato effettuato il provisioning per l'autenticazione dal modello di progetto predefinito Blazor WebAssembly per la versione di ASP.NET Core che si intende usare. Esaminare il
App
componente (App.razor
) nell'app generata.Esaminare il componente (
App.razor
) nell'origineApp
di riferimento. Selezionare la versione dal selettore di ramo e cercare il componente nellaProjectTemplates
cartella del repository perché è stato spostato nel corso degli anni.Nota
I collegamenti della documentazione all'origine del riferimento .NET in genere caricano il ramo predefinito del repository, che rappresenta lo sviluppo corrente per la versione successiva di .NET. Per selezionare un tag per una versione specifica, usare l'elenco a discesa Switch branches or tags. Per altre informazioni, vedere How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Come selezionare un tag di versione del codice sorgente di ASP.NET - dotnet/AspNetCore.Docs #26205).
Componente RedirectToLogin
Componente RedirectToLogin
(RedirectToLogin.razor
):
- Gestisce il reindirizzamento di utenti non autorizzati alla pagina di accesso.
- L'URL corrente a cui l'utente sta tentando di accedere viene mantenuto in modo che possa essere restituito a tale pagina se l'autenticazione ha esito positivo:
- Stato della cronologia di spostamento in ASP.NET Core in .NET 7 o versione successiva.
- Stringa di query in ASP.NET Core in .NET 6 o versioni precedenti.
Esaminare il componente nell'origine RedirectToLogin
di riferimento. La posizione del componente è cambiata nel tempo, quindi usare gli strumenti di ricerca gitHub per individuare il componente.
Nota
I collegamenti della documentazione all'origine del riferimento .NET in genere caricano il ramo predefinito del repository, che rappresenta lo sviluppo corrente per la versione successiva di .NET. Per selezionare un tag per una versione specifica, usare l'elenco a discesa Switch branches or tags. Per altre informazioni, vedere How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Come selezionare un tag di versione del codice sorgente di ASP.NET - dotnet/AspNetCore.Docs #26205).
Componente LoginDisplay
Il LoginDisplay
rendering del MainLayout
componente (LoginDisplay.razor
) viene eseguito nel componente (MainLayout.razor
) e gestisce i comportamenti seguenti:
- Per gli utenti autenticati:
- Visualizza il nome utente corrente.
- Offre un collegamento alla pagina del profilo utente in ASP.NET Core Identity.
- Offre un pulsante per disconnettersi dall'app.
- Per gli utenti anonimi:
- Offre la possibilità di registrarsi.
- Offre l'opzione di accesso.
A causa delle modifiche apportate al framework tra le versioni di ASP.NET Core, Razor il markup per il LoginDisplay
componente non viene visualizzato in questa sezione. Per esaminare il markup del componente per una determinata versione, usare uno degli approcci seguenti:
Creare un'app di cui è stato effettuato il provisioning per l'autenticazione dal modello di progetto predefinito Blazor WebAssembly per la versione di ASP.NET Core che si intende usare. Esaminare il
LoginDisplay
componente nell'app generata.Esaminare il componente nell'origine
LoginDisplay
di riferimento. La posizione del componente è cambiata nel tempo, quindi usare gli strumenti di ricerca gitHub per individuare il componente. Viene usato il contenuto basato su modelli perHosted
uguale atrue
.Nota
I collegamenti della documentazione all'origine del riferimento .NET in genere caricano il ramo predefinito del repository, che rappresenta lo sviluppo corrente per la versione successiva di .NET. Per selezionare un tag per una versione specifica, usare l'elenco a discesa Switch branches or tags. Per altre informazioni, vedere How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Come selezionare un tag di versione del codice sorgente di ASP.NET - dotnet/AspNetCore.Docs #26205).
Componente di autenticazione
La pagina prodotta dal Authentication
componente (Pages/Authentication.razor
) definisce le route necessarie per la gestione di diverse fasi di autenticazione.
Componente RemoteAuthenticatorView :
- Viene fornito dal
Microsoft.AspNetCore.Components.WebAssembly.Authentication
pacchetto. - Gestisce l'esecuzione delle azioni appropriate in ogni fase di autenticazione.
@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" />
@code {
[Parameter]
public string? Action { get; set; }
}
Nota
I tipi di riferimento nullable (NRT) e l'analisi statica dello stato null del compilatore .NET sono supportati in ASP.NET Core in .NET 6 o versione successiva. Prima del rilascio di ASP.NET Core in .NET 6, il string
tipo viene visualizzato senza la designazione di tipo Null (?
).
Risoluzione dei problemi
Registrazione
Per abilitare la registrazione di debug o traccia per Blazor WebAssembly l'autenticazione, vedere la sezione Registrazione dell'autenticazione lato client di ASP.NET Core Blazor con il selettore della versione dell'articolo impostato su ASP.NET Core 7.0 o versione successiva.
Errori comuni
Configurazione errata dell'app o Identity del provider (IP)
Gli errori più comuni sono causati da una configurazione errata. Di seguito sono riportati alcuni esempi:
- A seconda dei requisiti dello scenario, un'autorità mancante o non corretta, istanza, ID tenant, dominio tenant, ID client o URI di reindirizzamento impedisce a un'app di autenticare i client.
- Gli ambiti di richiesta non corretti impediscono ai client di accedere agli endpoint DELL'API Web del server.
- Autorizzazioni DELL'API server non corrette o mancanti impediscono ai client di accedere agli endpoint DELL'API Web del server.
- L'esecuzione dell'app in una porta diversa da quella configurata nell'URI di reindirizzamento della registrazione dell'app ip. Si noti che non è necessaria una porta per Microsoft Entra ID e un'app in esecuzione in un
localhost
indirizzo di test di sviluppo, ma la configurazione della porta dell'app e la porta in cui è in esecuzione l'app devono corrispondere per gli indirizzi nonlocalhost
.
Le sezioni di configurazione di questo articolo illustrano esempi della configurazione corretta. Controllare attentamente ogni sezione dell'articolo alla ricerca di errori di configurazione di app e IP.
Se la configurazione è corretta:
Analizzare i log delle applicazioni.
Esaminare il traffico di rete tra l'app client e l'app IP o server con gli strumenti di sviluppo del browser. Spesso, un messaggio di errore esatto o un messaggio con un indizio sulla causa del problema viene restituito al client dall'app IP o server dopo aver effettuato una richiesta. Strumenti di sviluppo materiale sussidiario sono disponibili negli articoli seguenti:
- Google Chrome (documentazione di Google)
- Microsoft Edge
- Mozilla Firefox (documentazione di Mozilla)
Per le versioni in Blazor cui viene usato un token JSON Web (JWT), decodificare il contenuto del token usato per autenticare un client o accedere a un'API Web del server, a seconda della posizione in cui si verifica il problema. Per altre informazioni, vedere Esaminare il contenuto di un token JSON Web (JWT).
Il team della documentazione risponde al feedback e ai bug dei documenti negli articoli (aprire un problema dalla sezione Commenti e suggerimenti della pagina ), ma non è in grado di fornire supporto tecnico. Sono disponibili diversi forum di supporto pubblico per facilitare la risoluzione dei problemi di un'app. Consigliamo quanto segue:
I forum precedenti non sono di proprietà o controllati da Microsoft.
Per i report sui bug del framework non riservati, non sensibili e non riservati, aprire un problema con l'unità del prodotto ASP.NET Core. Non aprire un problema con l'unità di prodotto fino a quando non hai approfondito la causa di un problema e non puoi risolverlo autonomamente e con l'aiuto della community in un forum di supporto pubblico. L'unità prodotto non è in grado di risolvere i problemi relativi alle singole app interrotte a causa di semplici errori di configurazione o casi d'uso che coinvolgono servizi di terze parti. Se un report è sensibile o riservato in natura o descrive un potenziale difetto di sicurezza nel prodotto che potrebbero sfruttare i cyberattacker, vedere Segnalazione di problemi e bug di sicurezza (
dotnet/aspnetcore
repository GitHub).Client non autorizzato per ME-ID
info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService[2] Autorizzazione non riuscita. Questi requisiti non sono stati soddisfatti: DenyAnonymousAuthorizationRequirement: richiede un utente autenticato.
Errore di callback di accesso da ME-ID:
- Errore:
unauthorized_client
- Description (Descrizione):
AADB2C90058: The provided application is not configured to allow public clients.
Per risolvere l'errore:
- Nella portale di Azure accedere al manifesto dell'app.
- Impostare l'attributo
allowPublicClient
sunull
o .true
- Errore:
Cookie e dati del sito
I cookie e i dati del sito possono persistere tra gli aggiornamenti delle app e interferire con i test e la risoluzione dei problemi. Cancellare quanto segue quando si apportano modifiche al codice dell'app, modifiche all'account utente con il provider o modifiche alla configurazione dell'app del provider:
- Cookie di accesso utente
- Cookie dell'app
- Dati del sito memorizzati nella cache e archiviati
Un approccio per evitare che i cookie e i dati del sito persistenti interferiscano con i test e la risoluzione dei problemi consiste nel:
- Configurare un browser
- Usare un browser per i test che è possibile configurare per eliminare tutti i cookie dati del sito e ogni volta che il browser viene chiuso.
- Assicurarsi che il browser venga chiuso manualmente o dall'IDE per qualsiasi modifica apportata alla configurazione dell'app, dell'utente di test o del provider.
- Usare un comando personalizzato per aprire un browser in modalità InPrivate o In incognito in Visual Studio:
- Aprire la finestra di dialogo Sfoglia con dal pulsante Esegui di Visual Studio.
- Seleziona il pulsante Aggiungi.
- Specificare il percorso del browser nel campo Programma . I percorsi eseguibili seguenti sono percorsi di installazione tipici per Windows 10. Se il browser è installato in un percorso diverso o non si usa Windows 10, specificare il percorso dell'eseguibile del 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
- Microsoft Edge:
- Nel campo Argomenti specificare l'opzione della riga di comando usata dal browser per aprire in modalità InPrivate o Incognito. Alcuni browser richiedono l'URL dell'app.
- Microsoft Edge: usare
-inprivate
. - Google Chrome: usare
--incognito --new-window {URL}
, dove il{URL}
segnaposto è l'URL da aprire (ad esempio,https://localhost:5001
). - Mozilla Firefox: usare
-private -url {URL}
, dove il{URL}
segnaposto è l'URL da aprire (ad esempio,https://localhost:5001
).
- Microsoft Edge: usare
- Specificare un nome nel campo Nome descrittivo. Ad esempio:
Firefox Auth Testing
. - Selezionare il pulsante OK.
- Per evitare di dover selezionare il profilo del browser per ogni iterazione di test con un'app, impostare il profilo come predefinito con il pulsante Imposta come predefinito .
- Assicurarsi che il browser sia chiuso dall'IDE per qualsiasi modifica apportata all'app, all'utente di test o alla configurazione del provider.
Aggiornamenti di app
Un'app funzionante potrebbe non riuscire immediatamente dopo l'aggiornamento di .NET Core SDK nel computer di sviluppo o la modifica delle versioni dei pacchetti all'interno dell'app. In alcuni casi i pacchetti incoerenti possono interrompere un'app quando si eseguono aggiornamenti principali. La maggior parte di questi problemi può essere risolta attenendosi alle istruzioni seguenti:
- Cancellare le cache dei pacchetti NuGet del sistema locale eseguendo
dotnet nuget locals all --clear
da una shell dei comandi. - Eliminare le cartelle e
obj
delbin
progetto. - Ripristinare e ricompilare il progetto.
- Eliminare tutti i file nella cartella di distribuzione nel server prima di ridistribuire l'app.
Nota
L'uso di versioni del pacchetto incompatibili con il framework di destinazione dell'app non è supportato. Per informazioni su un pacchetto, usare La raccolta NuGet o Esplora pacchetti FuGet.
Eseguire l'app Server
Durante il test e la risoluzione dei problemi di una soluzione ospitataBlazor WebAssembly, assicurarsi di eseguire l'app dal Server
progetto.
Esaminare l'utente
Il componente seguente User
può essere usato direttamente nelle app o funge da base per un'ulteriore personalizzazione.
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));
}
}
Esaminare il contenuto di un token JSON Web (JWT)
Per decodificare un token JSON Web (JWT), usare lo strumento di jwt.ms Microsoft. I valori nell'interfaccia utente non lasciano mai il browser.
JWT codificato di esempio (abbreviato per la visualizzazione):
eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1j ... bQdHBHGcQQRbW7Wmo6SWYG4V_bU55Ug_PW4pLPr20tTS8Ct7_uwy9DWrzCMzpD-EiwT5IjXwlGX3IXVjHIlX50IVIydBoPQtadvT7saKo1G5Jmutgq41o-dmz6-yBMKV2_nXA25Q
Esempio JWT decodificato dallo strumento per un'app che esegue l'autenticazione in 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]
Risorse aggiuntive
- Scenari di sicurezza aggiuntivi per ASP.NET Core Blazor WebAssembly
- Creare una versione personalizzata della libreria JavaScript Authentication.MSAL
- Richieste API Web non autenticate o non autorizzate in un'app con un client predefinito sicuro
- ASP.NET Core Blazor WebAssembly con gruppi e ruoli di Microsoft Entra ID
- Guida introduttiva: Registrare un'applicazione con la piattaforma Microsoft identity
- Guida introduttiva: Configurare un'applicazione per esporre le API Web