Configurare l'autenticazione in un'app Web di esempio che chiama un'API Web usando Azure AD B2C

Questo articolo usa un'applicazione Web di esempio ASP.NET che chiama un'API Web per illustrare come aggiungere l'autenticazione di Azure Active Directory B2C (Azure AD B2C) alle applicazioni Web.

Importante

L'esempio ASP.NET'app Web a cui viene fatto riferimento in questo articolo viene usata per chiamare un'API Web con un token di connessione. Per un'app Web che non chiama un'API Web, vedere Configurare l'autenticazione in un'applicazione Web di esempio usando Azure AD B2C.

Panoramica

OpenID Connessione (OIDC) è un protocollo di autenticazione basato su OAuth 2.0. È possibile usare OIDC per consentire a un utente di accedere in modo sicuro a un'applicazione. Questo esempio di app Web usa Microsoft Identity Web. Microsoft Identity Web è un set di librerie di base di ASP.NET che semplificano l'aggiunta del supporto di autenticazione e autorizzazione alle app Web che possono chiamare un'API Web sicura.

Il flusso di accesso prevede i passaggi seguenti:

1. Gli utenti passano all'app Web e seleziona Accedi.

2. L'app avvia una richiesta di autenticazione e reindirizza gli utenti ad Azure AD B2C.

3. Gli utenti si registrano o accedono e reimpostano la password. In alternativa, possono accedere con un account di social networking.

4. Dopo l'accesso degli utenti, Azure AD B2C restituisce un codice di autorizzazione all'app.

5. L'app esegue quindi le operazioni seguenti:

   a. Scambia il codice di autorizzazione con un token ID, un token di accesso e un token di aggiornamento.
   b. Legge le attestazioni del token ID e salva in modo permanente un cookie di autorizzazione dell'applicazione.
   c. Archivia il token di aggiornamento in una cache in memoria per un uso successivo.

Panoramica della registrazione dell'app

Per abilitare l'accesso dell'app con Azure AD B2C e chiamare un'API Web, registrare due applicazioni nella directory di Azure AD B2C.

• La registrazione dell'applicazione Web consente all'app di accedere con Azure AD B2C. Durante la registrazione, si specifica l'URI di reindirizzamento. L'URI di reindirizzamento è l'endpoint a cui gli utenti vengono reindirizzati da Azure AD B2C dopo il completamento dell'autenticazione con Azure AD B2C. Il processo di registrazione dell'app genera un ID applicazione, noto anche come ID client, che identifica in modo univoco l'app. Si crea anche un segreto client, che l'app usa per acquisire in modo sicuro i token.

• La registrazione dell'API Web consente all'app di chiamare un'API Web sicura. La registrazione include gli ambiti dell'API Web. Gli ambiti consentono di gestire le autorizzazioni per le risorse protette, ad esempio l'API Web. Si concedono le autorizzazioni dell'applicazione Web agli ambiti dell'API Web. Quando viene richiesto un token di accesso, l'app specifica le autorizzazioni desiderate nel parametro di ambito della richiesta.

L'architettura e le registrazioni dell'app sono illustrate nel diagramma seguente:

Chiamare a un'API Web

Al termine dell'autenticazione, gli utenti interagiscono con l'app, che richiama un'API Web protetta. L'API Web usa l'autenticazione del token di connessione. Il token di connessione è il token di accesso ottenuto dall'app da Azure AD B2C. L'app passa il token nell'intestazione di autorizzazione della richiesta HTTPS.

Authorization: Bearer <access token>

Se l'ambito del token di accesso non corrisponde agli ambiti dell'API Web, la libreria di autenticazione ottiene un nuovo token di accesso con gli ambiti corretti.

Disconnessione

Il flusso di disconnesso prevede i passaggi seguenti:

1. Dall'app gli utenti si disconnetteno.
2. L'app cancella gli oggetti sessione e la libreria di autenticazione cancella la cache dei token.
3. L'app porta gli utenti all'endpoint di disconnesso di Azure AD B2C per terminare la sessione di Azure AD B2C.
4. Gli utenti vengono reindirizzati all'app.

Prerequisiti

Un computer in esecuzione:

Visual Studio

• Visual Studio 2022 17.0 o versione successiva con il carico di lavoro ASP.NET e sviluppo Web
• .NET 6.0 SDK

Visual Studio Code

• Visual Studio Code
• C# per Visual Studio Code (versione più recente)
• .NET 6.0 SDK

Passaggio 1: Configurare il flusso utente

Quando gli utenti tentano di accedere all'app, l'app avvia una richiesta di autenticazione all'endpoint di autorizzazione tramite un flusso utente. Il flusso utente definisce e controlla l'esperienza utente. Dopo aver completato il flusso utente, Azure AD B2C genera un token e quindi reindirizza gli utenti all'applicazione.

Se non è già stato fatto, creare un flusso utente o un criterio personalizzato. Ripetere i passaggi per creare tre flussi utente separati come indicato di seguito:

• Flusso utente di accesso e iscrizione combinato, ad esempio susi. Questo flusso utente supporta anche l'esperienza password dimenticata.
• Flusso utente di modifica del profilo, ad esempio edit_profile.
• Flusso utente di reimpostazione della password, ad esempio reset_password.

Azure AD B2C antepone B2C_1_ il nome del flusso utente. Ad esempio, susi diventa B2C_1_susi.

Passaggio 2: Registrare applicazioni Web

In questo passaggio si creano l'app Web e la registrazione dell'applicazione API Web e si specificano gli ambiti dell'API Web.

Passaggio 2.1: Registrare l'app per le API Web

Per creare la registrazione dell'app per le API Web (ID app: 2), seguire questa procedura:

1. Accedere al portale di Azure.

2. Assicurarsi di usare la directory che contiene il tenant di Azure AD B2C. Selezionare l'icona Directory e sottoscrizioni nella barra degli strumenti del portale.

3. Nelle impostazioni del portale | Pagina Directory e sottoscrizioni , trovare la directory di Azure AD B2C nell'elenco Nome directory e quindi selezionare Cambia.

4. Nel portale di Azure cercare e selezionare Azure AD B2C.

5. Selezionare Registrazioni app e quindi Nuova registrazione.

6. In Nome immettere un nome per l'applicazione, ad esempio my-api1. Lasciare i valori predefiniti per URI di reindirizzamento e Tipi di account supportati.

7. Selezionare Registra.

8. Al termine della registrazione dell'app, selezionare Panoramica.

9. Registrare il valore ID applicazione (client) per usarlo in un secondo momento quando si configura l'applicazione Web.

   

Passaggio 2.2: Configurare gli ambiti dell'app per le API Web

1. Selezionare l'applicazione my-api1 creata (ID app: 2) per aprire la relativa pagina Panoramica.

2. In Gestisci selezionare Esponi un'API.

3. Accanto a URI ID applicazione selezionare il collegamento Imposta. Sostituire il valore predefinito (GUID) con un nome univoco (ad esempio, tasks-api) e quindi selezionare Salva.

   Quando l'applicazione Web richiede un token di accesso per l'API Web, deve aggiungere questo URI come prefisso per ogni ambito definito per l'API.

4. In Ambiti definiti da questa API selezionare Aggiungi un ambito.

5. Per creare un ambito che definisce l'accesso in lettura all'API:

   1. In Nome ambito immettere tasks.read.
   2. Per Amministrazione nome visualizzato del consenso, immettere Accesso in lettura all'API attività.
   3. Per Amministrazione descrizione del consenso, immettere Consente l'accesso in lettura all'API delle attività.

6. Seleziona Aggiungi ambito.

7. Selezionare Aggiungi un ambito e quindi aggiungere un ambito che definisce l'accesso in scrittura all'API:

   1. In Nome ambito immettere tasks.write.
   2. Per Amministrazione nome visualizzato del consenso, immettere Accesso in scrittura all'API attività.
   3. Per Amministrazione descrizione del consenso, immettere Consenti l'accesso in scrittura all'API delle attività.

8. Seleziona Aggiungi ambito.

Passaggio 2.3: Registrare l'app Web

Per creare la registrazione dell'app Web, eseguire le operazioni seguenti:

1. Selezionare Registrazioni app e quindi Nuova registrazione.

2. In Nome immettere un nome per l'applicazione, ad esempio webapp1.

3. Sotto Tipi di account supportati, seleziona Account in qualsiasi provider di identità o directory dell'organizzazione (per autenticare gli utenti con flussi utente).

4. In URI di reindirizzamento selezionare Web e quindi immettere https://localhost:5000/signin-oidc nella casella URL.

5. In Autorizzazioni selezionare la casella di controllo Concedi consenso amministratore a openid e autorizzazioni di accesso offline.

6. Selezionare Registra.

7. Al termine della registrazione dell'app, selezionare Panoramica.

8. Registrare l'ID applicazione (client) per usarlo in un secondo momento, quando si configura l'applicazione Web.

   

Passaggio 2.4: Creare un segreto client dell'app Web

Creare un segreto client per l'applicazione Web registrata. L'applicazione Web usa il segreto client per dimostrare la propria identità al momento della richiesta dei token.

1. In Gestisci, selezionare Certificati e segreti.
2. Selezionare Nuovo segreto client.
3. Nella casella Descrizione immettere una descrizione per il segreto client, ad esempio clientsecret1.
4. In Scadenzaselezionare una durata per la quale il segreto è valido, quindi selezionare Aggiungi.
5. Registrare il Valore del segreto. Questo valore verrà usato per la configurazione in un passaggio successivo.

Passaggio 2.5: Concedere le autorizzazioni dell'app Web per l'API Web

Per concedere all'app (ID app: 1) le autorizzazioni, seguire questa procedura:

1. Selezionare Registrazioni app e quindi selezionare l'app creata (ID app: 1).

2. In Gestisci selezionare Autorizzazioni API.

3. In Autorizzazioni configurate selezionare Aggiungi un'autorizzazione.

4. Selezionare la scheda Le mie API.

5. Selezionare l'API (ID app: 2) a cui concedere l'accesso all'applicazione Web. Ad esempio, immettere my-api1.

6. In Autorizzazione espandere le attività e quindi selezionare gli ambiti definiti in precedenza, ad esempio tasks.read e tasks.write.

7. Selezionare Aggiungi autorizzazioni.

8. Selezionare Concedi consenso amministratore per <il nome> del tenant.

9. Selezionare Sì.

10. Selezionare Aggiorna e quindi verificare che Concesso per ... sia visualizzato in Stato per entrambi gli ambiti.

11. Nell'elenco Autorizzazioni configurate selezionare l'ambito e quindi copiare il nome completo dell'ambito.

    

Passaggio 3: Ottenere l'esempio di app Web

Scaricare il file ZIP oppure eseguire il comando Bash seguente per clonare l'applicazione Web di esempio da GitHub.

git clone https://github.com/Azure-Samples/active-directory-aspnetcore-webapp-openidconnect-v2

Estrarre il file di esempio in una cartella in cui la lunghezza totale del percorso è di 260 o meno caratteri.

Passaggio 4: Configurare l'API Web di esempio

Nella cartella di esempio, nella cartella 4-WebApp-your-API/4-2-B2C/TodoListService aprire il progetto TodoListService.csproj con Visual Studio o Visual Studio Code.

Nella cartella radice del progetto aprire il file appsettings.json . Questo file contiene informazioni sul provider di identità di Azure AD B2C. L'app per le API Web usa queste informazioni per convalidare il token di accesso passato dall'app Web come token di connessione. Aggiornare le proprietà seguenti delle impostazioni dell'app:

Sezione	Chiave	valore
AzureAdB2C	Istanza	Prima parte del nome del tenant di Azure AD B2C. Ad esempio: https://contoso.b2clogin.com.
AzureAdB2C	Domain	Nome completo del tenant di Azure AD B2C. Ad esempio: contoso.onmicrosoft.com.
AzureAdB2C	ClientId	ID applicazione API Web del passaggio 2.1.
AzureAdB2C	SignUpSignInPolicyId	I flussi utente o i criteri personalizzati creati nel passaggio 1.

Il file di configurazione finale dovrebbe essere simile al file JSON seguente:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-api-app-application-id>",
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  // More settings here
}

Passaggio 4.1: Impostare i criteri di autorizzazione

L'API Web verifica che l'utente sia autenticato con il token di connessione e che il token di connessione abbia gli ambiti accettati configurati. Se il token di connessione non ha uno di questi ambiti accettati, l'API Web restituisce il codice di stato HTTP 403 (Accesso negato) e scrive nel corpo della risposta un messaggio che indica quali ambiti sono previsti nel token.

Per configurare gli ambiti accettati, aprire la Controller/TodoListController.cs classe e impostare il nome dell'ambito, senza l'URI completo.

[RequiredScope("tasks.read")]

Passaggio 4.2: Eseguire l'app per le API Web di esempio

Per consentire all'app Web di chiamare l'esempio di API Web, eseguire l'API Web seguendo questa procedura:

1. Se si richiede di eseguire questa operazione, ripristinare le dipendenze.
2. Compilare ed eseguire il progetto.
3. Dopo aver compilato il progetto, Visual Studio o Visual Studio Code avvia l'API Web nei browser con l'indirizzo seguente: https://localhost:44332.

Passaggio 5: Configurare l'app Web di esempio

Nella cartella di esempio aprire 4-WebApp-your-API/4-2-B2C/Client il progetto TodoListClient.csproj con Visual Studio o Visual Studio Code.

Nella cartella radice del progetto aprire il appsettings.json file. Questo file contiene informazioni sul provider di identità di Azure AD B2C. L'app Web usa queste informazioni per stabilire una relazione di trust con Azure AD B2C, consentire l'accesso e l'uscita degli utenti, acquisire i token e convalidarli. Aggiornare le proprietà seguenti delle impostazioni dell'app:

Sezione	Chiave	valore
AzureAdB2C	Istanza	La prima parte del nome del tenant di Azure AD B2C, ad esempio https://contoso.b2clogin.com.
AzureAdB2C	Domain	Nome completo del tenant di Azure AD B2C, ad esempio contoso.onmicrosoft.com.
AzureAdB2C	ClientId	ID applicazione Web del passaggio 2.3.
AzureAdB2C	ClientSecret	Segreto dell'applicazione Web del passaggio 2.4.
AzureAdB2C	SignUpSignInPolicyId	I flussi utente o i criteri personalizzati creati nel passaggio 1.
TodoList	TodoListScope	Ambiti dell'API Web creati nel passaggio 2.5.
TodoList	TodoListBaseAddress	URI di base dell'API Web, ad esempio https://localhost:44332.

Il file di configurazione finale sarà simile al codice JSON seguente:

{
  "AzureAdB2C": {
    "Instance": "https://contoso.b2clogin.com",
    "Domain": "contoso.onmicrosoft.com",
    "ClientId": "<web-app-application-id>",
    "ClientSecret": "<web-app-application-secret>",  
    "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
    "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
  },
  "TodoList": {
    "TodoListScope": "https://contoso.onmicrosoft.com/api/demo.read",
    "TodoListBaseAddress": "https://localhost:44332"
  }
}

Passaggio 6: Eseguire l'app Web di esempio

1. Compilare ed eseguire il progetto.
2. Passa a https://localhost:5000.
3. Completare il processo di iscrizione o accesso.

Dopo l'autenticazione, il nome visualizzato verrà visualizzato nella barra di spostamento. Per visualizzare le attestazioni restituite dal token di Azure AD B2C all'app, selezionare TodoList.

Distribuire l'applicazione

In un'applicazione di produzione, l'URI di reindirizzamento della registrazione dell'app è in genere un endpoint accessibile pubblicamente in cui l'app è in esecuzione, ad esempio https://contoso.com/signin-oidc.

È possibile aggiungere e modificare gli URI di reindirizzamento nelle applicazioni registrate in qualsiasi momento. Agli URL di reindirizzamento si applicano le restrizioni seguenti:

• L'URL di risposta deve iniziare con lo schema https.
• L'URL di risposta rileva la distinzione tra maiuscole e minuscole. Le maiuscole e le minuscole devono corrispondere a quelle nel percorso URL dell'applicazione in esecuzione.

Cache dei token per un'app Web

L'esempio di app Web usa la serializzazione della cache dei token in memoria. Questa implementazione è ideale negli esempi. È utile anche nelle applicazioni di produzione, purché non ti dispiace se la cache dei token viene persa quando l'app Web viene riavviata.

Per l'ambiente di produzione, è consigliabile usare una cache di memoria distribuita. Ad esempio, cache Redis, NCache o una cache di SQL Server. Per informazioni dettagliate sulle implementazioni della cache di memoria distribuita, vedere Serializzazione della cache dei token.

Passaggi successivi

• Altre informazioni sull'esempio di codice.
• Informazioni su come abilitare l'autenticazione nella propria applicazione Web usando Azure AD B2C.
• Informazioni su come abilitare l'autenticazione nell'API Web.