Registrare un'applicazione a pagina singola in Azure Active Directory B2C

Prima che le applicazioni possano interagire con Azure Active Directory B2C (Azure AD B2C), devono essere registrate in un tenant gestito. Questa guida illustra come registrare un'applicazione a pagina singola ("SPA") usando il portale di Azure.

Panoramica delle opzioni di autenticazione

Molte applicazioni Web moderne vengono compilate come applicazioni a pagina singola sul lato client. Gli sviluppatori li scrivono usando JavaScript o un framework SPA, ad esempio Angular, Vue e React. Queste applicazioni vengono eseguite in un Web browser e hanno caratteristiche di autenticazione diverse rispetto alle applicazioni Web lato server tradizionali.

Azure AD B2C offre due opzioni che consentono alle applicazioni a pagina singola di concedere l'accesso agli utenti e ottenere i token per l'accesso a servizi back-end o API Web:

Flusso di codice di autorizzazione (con PKCE)

Il flusso del codice di autorizzazione OAuth 2.0 (con PKCE) consente all'applicazione di scambiare un codice di autorizzazione per i token ID per rappresentare i token utente autenticati e i token di accesso necessari per chiamare le API protette. Restituisce inoltre token di aggiornamento che consentono l'accesso a lungo termine alle risorse per conto degli utenti senza richiedere l'interazione con tali utenti.

Questo è l'approccio consigliato. La presenza di token di aggiornamento a durata limitata consente all'applicazione di adattarsi alle limitazioni della privacy dei cookie dei browser moderni, ad esempio Safari ITP.

Per sfruttare questo flusso, l'applicazione può usare una libreria di autenticazione che la supporta, ad esempio MSAL.js.

Flusso di concessione implicita

Alcune librerie, ad esempio MSAL.js 1.x, supportano solo il flusso di concessione implicito o le applicazioni vengono implementate per usare il flusso implicito. In questi casi, Azure AD B2C supporta il flusso implicito OAuth 2.0. Questo tipo di flusso consente all'applicazione di ottenere i token ID e di accesso. A differenza del flusso del codice di autorizzazione, il flusso di concessione implicita non restituisce un token di aggiornamento.

Questo flusso di autenticazione non include scenari di applicazione che usano framework JavaScript multipiattaforma, ad esempio Electron e React-Native. Questi scenari richiedono ulteriori funzionalità per l'interazione con le piattaforme native.

Prerequisiti

• Se non si ha una sottoscrizione di Azure, creare un account gratuito prima di iniziare.

• Se non si ha un tenant di Azure AD B2C, crearne uno ora. Usare un tenant Azure AD B2C esistente.

Registrare l'applicazione a pagina singola

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. Immettere un nome per l'applicazione. Ad esempio, spaapp1.

6. In Tipi di account supportati selezionare Account in qualsiasi provider di identità o directory dell'organizzazione (per l'autenticazione di utenti con flussi utente).

7. In URI di reindirizzamento selezionare Applicazione a pagina singola, quindi immettere https://jwt.ms nella casella di testo URL.

   L'URI di reindirizzamento è l'endpoint in cui il server di autorizzazione (Azure AD B2C, in questo caso) invia l'utente dopo aver completato l'interazione con l'utente. Inoltre, l'endpoint dell'URI di reindirizzamento riceve il token di accesso o il codice di autorizzazione al termine dell'autorizzazione. In un'applicazione di produzione, si tratta in genere di un endpoint accessibile pubblicamente in cui l'app è in esecuzione, ad esempio https://contoso.com/auth-response. A scopo di test come questa guida, è possibile impostarlo su https://jwt.ms, un'applicazione Web di proprietà di Microsoft che visualizza il contenuto decodificato di un token (il contenuto del token non lascia mai il browser). Durante lo sviluppo di app, è possibile aggiungere l'endpoint in cui l'applicazione è in ascolto localmente, ad esempio http://localhost:5000. È 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, a meno che non si usi localhost.
   • 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. Ad esempio, se l'applicazione include come parte del percorso .../abc/response-oidc, non specificare .../ABC/response-oidc nell'URL di risposta. Poiché il Web browser rileva la distinzione tra maiuscole e minuscole nei percorsi, è possibile che i cookie associati a .../abc/response-oidc vengano esclusi se reindirizzati all'URL .../ABC/response-oidc senza la corrispondenza tra maiuscole e minuscole.

8. In Autorizzazioni, selezionare la casella di controllo Concedere il consenso amministratore alle autorizzazioni OpenID e offline_access.

9. Seleziona Registro.

Abilitare il flusso implicito

Se si usa MSAL.js 1.3 o una versione precedente con il flusso di concessione implicita nell'app a pagina singola o se si configura l'app https://jwt.ms/ per il test di un flusso utente o criteri personalizzati, è necessario abilitare il flusso di concessione implicita nella registrazione dell'app:

1. Nel menu a sinistra, in Gestisci, selezionare Autenticazione.

2. In Flussi di concessione implicita e ibridi selezionare entrambe le caselle di controllo Token di accesso (usati per i flussi impliciti) e Token ID (usati per i flussi impliciti e ibridi).

3. Seleziona Salva.

Se l'app usa MSAL.js 2.0 o versione successiva, non abilitare la concessione implicita del flusso come MSAL.js 2.0+ supporta il flusso del codice di autorizzazione con PKCE.

Eseguire la migrazione dal flusso implicito

Se si dispone di un'applicazione esistente che usa il flusso implicito, è consigliabile eseguire la migrazione per usare il flusso del codice di autorizzazione usando un framework che lo supporta, ad esempio MSAL.js 2.0+.

Quando tutta l'applicazione a pagina singola di produzione rappresentata da una registrazione dell'app inizia a usare il flusso del codice di autorizzazione, disabilitare le impostazioni implicite del flusso di concessione come indicato di seguito:

1. Nel menu a sinistra, in Gestisci, selezionare Autenticazione.
2. In Concessione implicita deselezionare le caselle di controllo Token di accesso e Token ID.
3. Seleziona Salva.

Le applicazioni che usano il flusso implicito possono continuare a funzionare se si lascia il flusso implicito abilitato (selezionato).

Passaggi successivi

Informazioni su come creare flussi utente in Azure Active Directory B2C.