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

Questo articolo usa un'applicazione Web di esempio ASP.NET 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 si fa riferimento in questo articolo non può essere usata per chiamare un'API REST, perché restituisce un token ID e non un token di accesso. Per un'app Web in grado di chiamare un'API REST, vedere Proteggere un'API Web compilata con ASP.NET Core usando Azure AD B2C.

Panoramica

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

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 token ID all'app.
  5. L'app convalida il token ID, legge le attestazioni e restituisce una pagina sicura agli utenti.

Quando il token ID è scaduto o la sessione dell'app viene invalidata, l'app avvia una nuova richiesta di autenticazione e reindirizza gli utenti ad Azure AD B2C. Se la sessione SSO di Azure AD B2C è attiva, Azure AD B2C rilascia un token di accesso senza chiedere agli utenti di accedere di nuovo. Se la sessione di Azure AD B2C scade o diventa non valida, agli utenti viene richiesto di eseguire di nuovo l'accesso.

Disconnettersi

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 che esegue una delle operazioni seguenti:

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 un'applicazione Web

Per consentire all'applicazione di accedere con Azure AD B2C, registrare l'app nella directory di Azure AD B2C. La registrazione dell'app stabilisce una relazione di trust tra l'app e Azure AD B2C.

Durante la registrazione dell'app, si specificherà l'URI di reindirizzamento. L'URI di reindirizzamento è l'endpoint a cui gli utenti vengono reindirizzati da Azure AD B2C dopo l'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. Dopo la registrazione dell'app, Azure AD B2C usa sia l'ID applicazione che l'URI di reindirizzamento per creare richieste di autenticazione.

Per creare la registrazione dell'app Web, seguire questa procedura:

  1. Accedi al portale di Azure.

  2. Se si ha accesso a più tenant, selezionare l'icona Impostazioni nel menu in alto per passare al tenant di Azure AD B2C dal menu Directory e sottoscrizioni.

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

  4. Selezionare Registrazioni app e quindi Nuova registrazione.

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

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

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

  8. In Autenticazione passare a Concessione implicita e flussi ibridi, selezionare la casella di controllo Token ID (usati per i flussi impliciti e ibridi).

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

  10. Selezionare Registra.

  11. Selezionare Panoramica.

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

    Screenshot of the web app Overview page for recording your web application ID.

Passaggio 3: Ottenere l'esempio di app Web

Scaricare il file ZIP o 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'app Web di esempio

Nella cartella di esempio, nella cartella 1-WebApp-OIDC/1-5-B2C/ aprire il progetto WebApp-OpenID Connessione-DotNet.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. Aggiornare le proprietà delle impostazioni dell'app seguenti:

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 app Web (client) del passaggio 2.
AzureAdB2C SignUpSignInPolicyId I flussi utente o i criteri personalizzati creati nel passaggio 1.

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>",
  "SignedOutCallbackPath": "/signout/<your-sign-up-in-policy>",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

Passaggio 5: Eseguire l'app Web di esempio

  1. Compilare ed eseguire il progetto.

  2. Vai a https://localhost:44316.

  3. Selezionare Iscrizione/Accesso.

    Screenshot of the sign in and sign up button on the project Welcome page.

  4. Completare il processo di iscrizione o accesso.

Al termine dell'autenticazione, nella barra di spostamento verrà visualizzato il nome visualizzato. Per visualizzare le attestazioni restituite dal token di Azure AD B2C all'app, selezionare Attestazioni.

Screenshot of the web app token claims.

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.

Passaggi successivi