Proteggere un'app ASP.NET Core Blazor WebAssembly ospitata con Microsoft Entra ID

Questo articolo illustra come creare una soluzione ospitata Blazor WebAssembly che usa Microsoft Entra ID (ME-ID) per l'autenticazione. Questo articolo è incentrato su un'app a tenant singolo con una registrazione dell'app di Azure a tenant singolo.

Questo articolo non tratta una registrazione ME-ID multi-tenant. Per altre informazioni, vedere Creazione del multi-tenant dell'applicazione.

Questo articolo è incentrato sull'uso di un tenant di Microsoft Entra , come descritto in Avvio rapido: Configurare un tenant. Se l'app è registrata in un tenant di Azure Active Directory B2C , come descritto in Esercitazione: Creare un tenant di Azure Active Directory B2C, ma segue le indicazioni riportate in questo articolo, l'URI ID app viene gestito in modo diverso da ME-ID. Per altre informazioni, vedere la sezione Uso di un tenant di Azure Active Directory B2C di questo articolo.

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 per le API server in Azure
• Registrare un'app client in Azure
• Creare l'app Blazor
• Modificare la Server appsettings.json configurazione
• Modificare lo schema di ambito del token di accesso predefinito
• 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 per le API server in Azure

Registrare un'app ME-ID per l'app per le API server:

1. Passare a Microsoft Entra ID nel portale di Azure. Selezionare Applicazioni> Registrazioni app nella barra laterale. Selezionare il pulsante Nuova registrazione.
2. Specificare un nome per l'app, Blazor Server ad esempio ME-ID.
3. Scegliere tipi di account supportati. Per questa esperienza è possibile selezionare Account solo in questa directory organizzativa (tenant singolo).
4. L'app per le API server non richiede un URI di reindirizzamento in questo scenario, quindi lasciare deselezionata l'elenco a discesa Selezionare una piattaforma e non immettere un URI di reindirizzamento.
5. Questo articolo presuppone che l'app sia registrata in un tenant di Microsoft Entra . Se l'app è registrata in un tenant di Azure Active Directory B2C, è presente e selezionata la casella di controllo Autorizzazioni>concedere il consenso dell'amministratore per openid e offline_access autorizzazioni. Deselezionare la casella di controllo per disabilitare l'impostazione. Quando si usa un tenant di Active Azure Directory , la casella di controllo non è presente.
6. Selezionare Registra.

Registrare le informazioni seguenti:

• ID applicazione dell'app per le API server (client) (ad esempio, 00001111-aaaa-2222-bbbb-3333cccc4444)
• ID directory (tenant) (ad esempio, aaaabbbb-0000-cccc-1111-dddd2222eeee)
• DOMINIO primario/server di pubblicazione/tenant ME(ad esempio): contoso.onmicrosoft.comil dominio è disponibile come dominio del server di pubblicazione nel pannello Personalizzazione del portale di Azure per l'app registrata.

Nelle autorizzazioni API rimuovere l'autorizzazione Microsoft Graph>User.Read, perché l'app per le API server non richiede l'accesso api aggiuntivo per l'accesso solo agli utenti e alla chiamata di endpoint API del server.

In Esporre un'API:

1. Confermare o aggiungere l'URI ID app nel formato api://{SERVER API APP CLIENT ID}.
2. Seleziona Aggiungi un ambito.
3. Selezionare Salva e continua.
4. Specificare un nome ambito , ad esempio API.Access.
5. Specificare un nome visualizzato di consenso amministratore (ad esempio, Access API).
6. Specificare una descrizione del consenso amministratore , ad esempio Allows the app to access server app API endpoints..
7. Verificare che Lo stato sia impostato su Abilitato.
8. Seleziona Aggiungi ambito.

Registrare le informazioni seguenti:

• GUID URI ID app (ad esempio, record 00001111-aaaa-2222-bbbb-3333cccc4444 dall'URI ID app di api://00001111-aaaa-2222-bbbb-3333cccc4444)
• Nome ambito (ad esempio, API.Access)

Registrare un'app client in Azure

Registrare un'app ME-ID per l'app client:

1. Passare a Microsoft Entra ID nel portale di Azure. Selezionare Registrazioni app nella barra laterale. Selezionare il pulsante Nuova registrazione.
2. Specificare un nome per l'app, Blazor ad esempio CLIENT ME-ID.
3. Scegliere tipi di account supportati. Per questa esperienza è possibile selezionare Account solo in questa directory organizzativa (tenant singolo).
4. 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'URI localhost di reindirizzamento specificato. Assicurarsi di includere il numero di porta per le porte non:443 in qualsiasi URI di reindirizzamento di produzione aggiunti.
5. Questo articolo presuppone che l'app sia registrata in un tenant di Microsoft Entra . Se l'app è registrata in un tenant di Azure Active Directory B2C, è presente e selezionata la casella di controllo Autorizzazioni>concedere il consenso dell'amministratore per openid e offline_access autorizzazioni. Deselezionare la casella di controllo per disabilitare l'impostazione. Quando si usa un tenant di Active Azure Directory , la casella di controllo non è presente.
6. Selezionare Registra.

Registrare l'ID Client applicazione dell'app (client), ad esempio 11112222-bbbb-3333-cccc-4444dddd5555.

In Authentication Platform configurations single-page application (Configurazioni>della piattaforma di autenticazione>) applicazione a pagina singola:

1. Verificare che l'URI di reindirizzamento di https://localhost/authentication/login-callback sia presente.
2. 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.
3. Le impostazioni predefinite rimanenti per l'app sono accettabili per questa esperienza.
4. Selezionare il pulsante Salva se sono state apportate modifiche.

In Autorizzazioni API:

1. Verificare che l'app disponga dell'autorizzazione User.Read di Microsoft Graph>.
2. Selezionare Aggiungi un'autorizzazione seguita dalle API personali.
3. Selezionare l'app per le API server dalla colonna Name (ad esempio, Blazor Server ME-ID). Devi essere un proprietario della registrazione dell'app (e la registrazione dell'app per le API se si tratta di un'app separata) per visualizzare l'API nell'area API personali del portale di Azure. Per altre informazioni, vedere Assegnare il proprietario dell'applicazione (documentazione di Microsoft Entra).
4. Aprire l'elenco di API .
5. Abilitare l'accesso all'API , ad esempio API.Access.
6. Selezionare Aggiungi autorizzazioni.
7. Selezionare il pulsante Concedi consenso amministratore per {NOME TENANT} . Seleziona Sì per confermare.

Creare l'app Blazor

In una cartella vuota sostituire i segnaposto nel comando seguente con le informazioni registrate in precedenza ed eseguire il comando in una shell dei comandi:

dotnet new blazorwasm -au SingleOrg --api-client-id "{SERVER API APP CLIENT ID}" --app-id-uri "{SERVER API APP ID URI GUID}" --client-id "{CLIENT APP CLIENT ID}" --default-scope "{DEFAULT SCOPE}" --domain "{TENANT DOMAIN}" -ho -o {PROJECT NAME} --tenant-id "{TENANT ID}"

Segnaposto	Nome portale di Azure	Esempio
{PROJECT NAME}	—	BlazorSample
{CLIENT APP CLIENT ID}	ID applicazione (client) per l'app Client	11112222-bbbb-3333-cccc-4444dddd5555
{DEFAULT SCOPE}	Nome ambito	API.Access
{SERVER API APP CLIENT ID}	ID applicazione (client) per l'app per le API server	00001111-aaaa-2222-bbbb-3333cccc4444
{SERVER API APP ID URI GUID}	GUID URI ID applicazione	00001111-aaaa-2222-bbbb-3333cccc4444 (SOLO GUID, corrisponde a {SERVER API APP CLIENT ID})
{TENANT DOMAIN}	Dominio primario/server di pubblicazione/tenant	contoso.onmicrosoft.com
{TENANT ID}	ID della directory (tenant)	aaaabbbb-0000-cccc-1111-dddd2222eeee

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. Evitare di usare trattini (-) nel nome dell'app che interrompono la formazione dell'identificatore dell'app OIDC (vedere l'avviso precedente).

Eseguire l'app

Eseguire l'app dal Server progetto. Quando si usa Visual Studio, è possibile:

• Selezionare la freccia a discesa accanto al pulsante Esegui . Aprire Configura progetti di avvio dall'elenco a discesa. Selezionare l'opzione Progetto di avvio singolo. Confermare o modificare il progetto per il progetto di avvio nel Server progetto.

• Verificare che il Server progetto sia evidenziato in Esplora soluzioni prima di avviare l'app con uno degli approcci seguenti:

  • Selezionare il pulsante Run (Esegui).
  • Usare Debug>Avvia debug dal menu.
  • Premere F5.

• In una shell dei comandi passare alla Server cartella del progetto della soluzione. Eseguire il dotnet watch comando (o dotnet run).

ConfigurareUser.Identity.Name

Le indicazioni contenute in questa sezione illustrano facoltativamente il popolamento User.Identity.Name con il valore dell'attestazione name .

L'API Server dell'app viene popolata con il valore del http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name tipo di attestazione User.Identity.Name , ad esempio bbbb0000-cccc-1111-dddd-2222eeee3333@contoso.onmicrosoft.com.

Per configurare l'app per ricevere il valore dal name tipo di attestazione:

• Aggiungere uno spazio dei nomi per Microsoft.AspNetCore.Authentication.JwtBearer al Program file:

  using Microsoft.AspNetCore.Authentication.JwtBearer;
  

• Configurare l'oggetto TokenValidationParameters.NameClaimType JwtBearerOptionsdi .

  builder.Services.Configure<JwtBearerOptions>(
      JwtBearerDefaults.AuthenticationScheme, options =>
      {
          options.TokenValidationParameters.NameClaimType = "name";
      });
  

Parti della soluzione

Questa sezione descrive le parti di una soluzione generata dal Blazor WebAssembly modello di progetto e descrive come vengono configurati i progetti e Server la soluzione Client per riferimento. 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.

Configurazione appsettings.json

Questa sezione riguarda l'app della Server soluzione.

Il appsettings.json file contiene le opzioni per configurare il gestore di connessione JWT usato per convalidare i token di accesso. Aggiungere la sezione di configurazione seguente AzureAd :

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "{TENANT DOMAIN}",
    "TenantId": "{TENANT ID}",
    "ClientId": "{SERVER API APP CLIENT ID}",
    "CallbackPath": "/signin-oidc",
    "Scopes": "{SCOPES}"
  }
}

Esempio:

{
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "contoso.onmicrosoft.com",
    "TenantId": "aaaabbbb-0000-cccc-1111-dddd2222eeee",
    "ClientId": "00001111-aaaa-2222-bbbb-3333cccc4444",
    "CallbackPath": "/signin-oidc",
    "Scopes": "API.Access"
  }
}

Pacchetto di autenticazione

Questa sezione riguarda l'app della Server soluzione.

Il supporto per l'autenticazione e l'autorizzazione delle chiamate a ASP.NET API Web core con la piattaforma Microsoft identity viene fornito dal Microsoft.Identity.Web pacchetto.

L'app Server di una soluzione ospitata Blazor creata dal Blazor WebAssembly modello include il Microsoft.Identity.Web.UI pacchetto. Il pacchetto aggiunge l'interfaccia utente per l'autenticazione utente nelle app Web e non viene usata dal Blazor framework. Se l'app Server non verrà usata per autenticare direttamente gli utenti, è possibile rimuovere il riferimento al pacchetto dal Server file di progetto dell'app.

Supporto del servizio di autenticazione

Questa sezione riguarda l'app della Server soluzione.

Il AddAuthentication metodo configura i servizi di autenticazione all'interno dell'app e configura il gestore bearer JWT come metodo di autenticazione predefinito. Il AddMicrosoftIdentityWebApi metodo configura i servizi per proteggere l'API Web con la piattaforma Microsoft identity v2.0. Questo metodo prevede una AzureAd sezione della configurazione dell'app con le impostazioni necessarie per inizializzare le opzioni di autenticazione.

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddMicrosoftIdentityWebApi(Configuration.GetSection("AzureAd"));

UseAuthentication e UseAuthorization assicurarsi che:

• L'app tenta di analizzare e convalidare i token nelle richieste in ingresso.
• Qualsiasi richiesta che tenta di accedere a una risorsa protetta senza credenziali appropriate non riesce.

app.UseAuthentication();
app.UseAuthorization();

WeatherForecast controllore

Questa sezione riguarda l'app della Server soluzione.

Il WeatherForecast controller (Controllers/WeatherForecastController.cs) espone un'API protetta con l'attributo [Authorize] applicato al controller. È importante comprendere che:

• L'attributo [Authorize] in questo controller API è l'unica cosa che protegge questa API dall'accesso non autorizzato.
• L'attributo [Authorize] usato nell'app Blazor WebAssembly funge solo da suggerimento per l'app che l'utente deve essere autorizzato per il corretto funzionamento dell'app.

[Authorize]
[ApiController]
[Route("[controller]")]
[RequiredScope(RequiredScopesConfigurationKey = "AzureAd:Scopes")]
public class WeatherForecastController : ControllerBase
{
    [HttpGet]
    public IEnumerable<WeatherForecast> Get()
    {
        ...
    }
}

Configurazione wwwroot/appsettings.json

Questa sezione riguarda l'app della Client soluzione.

La configurazione viene fornita dal wwwroot/appsettings.json file :

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

Esempio:

{
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/e86c78e2-...-918e0565a45e",
    "ClientId": "11112222-bbbb-3333-cccc-4444dddd5555",
    "ValidateAuthority": true
  }
}

Pacchetto di autenticazione

Questa sezione riguarda l'app della Client soluzione.

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.

Il Microsoft.Authentication.WebAssembly.Msal pacchetto aggiunge in modo transitivo il Microsoft.AspNetCore.Components.WebAssembly.Authentication pacchetto all'app.

Supporto del servizio di autenticazione

Questa sezione riguarda l'app della Client soluzione.

Viene aggiunto il supporto per HttpClient le istanze che includono i token di accesso durante l'esecuzione di richieste all'app Server .

Nel file Program:

builder.Services.AddHttpClient("{PROJECT NAME}.ServerAPI", client => 
        client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
    .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
    .CreateClient("{PROJECT NAME}.ServerAPI"));

Il {PROJECT NAME} segnaposto è il nome del progetto durante la creazione della soluzione. Ad esempio, specificando un nome di progetto di BlazorSample produce un nome denominato HttpClient .BlazorSample.ServerAPI

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 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);
    options.ProviderOptions.DefaultAccessTokenScopes.Add("{SCOPE URI}");
});

Il AddMsalAuthentication metodo accetta un callback per configurare i parametri necessari per autenticare un'app. I valori necessari per configurare l'app possono essere ottenuti dalla configurazione ME-ID del portale di Azure quando si registra l'app.

Ambiti del token di accesso

Questa sezione riguarda l'app della Client soluzione.

Gli ambiti predefiniti del token di accesso rappresentano l'elenco degli ambiti del token di accesso seguenti:

• Incluso nella richiesta di accesso.
• Usato per effettuare il provisioning di un token di accesso immediatamente dopo l'autenticazione.

È possibile aggiungere ambiti aggiuntivi in base alle esigenze nel Program file:

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

Specificare ambiti aggiuntivi con AdditionalScopesToConsent:

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

Esempio di ambito del token di accesso predefinito:

options.ProviderOptions.DefaultAccessTokenScopes.Add(
    "api://00001111-aaaa-2222-bbbb-3333cccc4444/API.Access");

Per altre informazioni, vedere le sezioni seguenti dell'articolo Scenari aggiuntivi :

• Richiedere token di accesso aggiuntivi
• Collegare i token alle richieste in uscita

Modalità di accesso

Questa sezione riguarda l'app della Client soluzione.

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 è popupe il valore stringa non fa distinzione tra maiuscole e minuscole.

Importa il file

Questa sezione riguarda l'app della Client soluzione.

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

Questa sezione riguarda l'app della Client soluzione.

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

Questa sezione riguarda l'app della Client soluzione.

Il App componente (App.razor) è simile al App componente presente nelle Blazor Server app:

• 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 nella ProjectTemplates cartella del repository perché la App posizione del componente è cambiata 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

Questa sezione riguarda l'app della Client soluzione.

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.

Componente LoginDisplay

Questa sezione riguarda l'app della Client soluzione.

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 per Hosted uguale a true .

  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

Questa sezione riguarda l'app della Client soluzione.

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

Componente FetchData

Questa sezione riguarda l'app della Client soluzione.

Il FetchData componente mostra come:

• Effettuare il provisioning di un token di accesso.
• Usare il token di accesso per chiamare un'API risorsa protetta nell'app Server .

La @attribute [Authorize] direttiva indica al Blazor WebAssembly sistema di autorizzazione che l'utente deve essere autorizzato per visitare questo componente. La presenza dell'attributo nell'app Client non impedisce che l'API nel server venga chiamata senza credenziali appropriate. L'app Server deve essere usata [Authorize] anche negli endpoint appropriati per proteggerli correttamente.

IAccessTokenProvider.RequestAccessToken richiede un token di accesso che può essere aggiunto alla richiesta per chiamare l'API. Se il token viene memorizzato nella cache o il servizio è in grado di effettuare il provisioning di un nuovo token di accesso senza interazione dell'utente, la richiesta di token ha esito positivo. In caso contrario, la richiesta di token ha esito negativo con un AccessTokenNotAvailableExceptionoggetto , che viene intercettato in un'istruzione try-catch .

Per ottenere il token effettivo da includere nella richiesta, l'app deve verificare che la richiesta sia riuscita chiamando tokenResult.TryGetToken(out var token).

Se la richiesta ha esito positivo, la variabile del token viene popolata con il token di accesso. La AccessToken.Value proprietà del token espone la stringa letterale da includere nell'intestazione della Authorization richiesta.

Se non è stato possibile effettuare il provisioning del token senza l'interazione dell'utente, si verifica una richiesta non riuscita:

• ASP.NET Core in .NET 7 o versione successiva: l'app passa all'uso AccessTokenResult.InteractiveRequestUrl dell'oggetto specificato AccessTokenResult.InteractionOptions per consentire l'aggiornamento del token di accesso.
• ASP.NET Core in .NET 6 o versioni precedenti: il risultato del token contiene un URL di reindirizzamento. Passando a questo URL, l'utente passa alla pagina di accesso e torna alla pagina corrente dopo l'autenticazione completata.

@page "/fetchdata"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using {APP NAMESPACE}.Shared
@attribute [Authorize]
@inject HttpClient Http

...

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
        }
        catch (AccessTokenNotAvailableException exception)
        {
            exception.Redirect();
        }
    }
}

Uso di un tenant di Azure Active Directory B2C

Se l'app è registrata in un tenant di Azure Active Directory B2C , come descritto in Esercitazione: Creare un tenant di Azure Active Directory B2C, ma segue le indicazioni riportate in questo articolo, l'URI ID app viene gestito in modo diverso da ME-ID.

È possibile controllare il tipo di tenant di un tenant esistente selezionando il collegamento Gestisci tenant nella parte superiore della panoramica dell'organizzazione ME-ID. Esaminare il valore della colonna Tipo di tenant per l'organizzazione. Questa sezione riguarda le app che seguono le indicazioni contenute in questo articolo, ma registrate in un tenant di Azure Active Directory B2C .

Anziché l'URI ID app corrispondente al formato api://{SERVER API APP CLIENT ID OR CUSTOM VALUE}, l'URI ID app ha il formato https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}. Questa differenza influisce sulle Client configurazioni delle app:Server

• Per l'app per le API server, impostare Audience nel file di impostazioni dell'app (appsettings.json) in modo che corrisponda al gruppo di destinatari dell'app (URI ID app) fornito dal portale di Azure senza barra finale:

  "Audience": "https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}"
  

  Esempio:

  "Audience": "https://contoso.onmicrosoft.com/00001111-aaaa-2222-bbbb-3333cccc4444"
  

• Program Nel file dell'app Client impostare il gruppo di destinatari dell'ambito (URI ID app) in modo che corrisponda al gruppo di destinatari dell'app per le API del server:

  options.ProviderOptions.DefaultAccessTokenScopes
      .Add("https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE}/{DEFAULT SCOPE}");
  

  Nell'ambito precedente, l'URI/gruppo di destinatari dell'ID app è la https://{TENANT}.onmicrosoft.com/{SERVER API APP CLIENT ID OR CUSTOM VALUE} parte del valore, che non include una barra finale (/) e non include il nome dell'ambito ({DEFAULT SCOPE}).

  Esempio:

  options.ProviderOptions.DefaultAccessTokenScopes
      .Add("https://contoso.onmicrosoft.com/00001111-aaaa-2222-bbbb-3333cccc4444/API.Access");
  

  Nell'ambito precedente, l'URI/gruppo di destinatari dell'ID app è la https://contoso.onmicrosoft.com/00001111-aaaa-2222-bbbb-3333cccc4444 parte del valore, che non include una barra finale (/) e non include il nome dell'ambito (API.Access).

Uso di un URI ID app personalizzato

Se l'URI ID app è un valore personalizzato, è necessario aggiornare manualmente l'URI dell'ambito del token di accesso predefinito nell'app Client e aggiungere il gruppo di destinatari alla Server configurazione ME-ID dell'app.

URI ID app di esempio di urn://custom-app-id-uri e nome dell'ambito di API.Access:

• Program Nel file dell'appClient:

  options.ProviderOptions.DefaultAccessTokenScopes.Add(
      "urn://custom-app-id-uri/API.Access");
  

• In appsettings.json dell'app Server aggiungere una Audience voce con solo l'URI ID app e nessuna barra finale:

  "Audience": "urn://custom-app-id-uri"
  

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:

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

  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/aspnetcorerepository 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:

  1. Nella portale di Azure accedere al manifesto dell'app.
  2. Impostare l'attributo allowPublicClient su null o .true

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
  • 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).
  • 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:

1. Cancellare le cache dei pacchetti NuGet del sistema locale eseguendo dotnet nuget locals all --clear da una shell dei comandi.
2. Eliminare le cartelle e obj del bin progetto.
3. Ripristinare e ricompilare il progetto.
4. Eliminare tutti i file nella cartella di distribuzione nel server prima di ridistribuire l'app.

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

• Configurare il dominio di pubblicazione di un'app
• Manifesto dell'app Microsoft Entra ID: attributo identifierUris
• 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 (da .NET 5 a .NET 7)
• Piattaforma Microsoft identity e MICROSOFT Entra ID con ASP.NET Core
• Documentazione della piattaforma Microsoft identity
• Guida introduttiva: Registrare un'applicazione con la piattaforma Microsoft identity
• Procedure consigliate per la sicurezza per le proprietà dell'applicazione in Microsoft Entra ID