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

Importante

A partire dal 1° maggio 2025, Azure AD B2C non sarà più disponibile per l'acquisto per i nuovi clienti. Altre informazioni sono disponibili nelle domande frequenti.

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 ("SPA"). 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 presentano caratteristiche di autenticazione diverse rispetto alle applicazioni Web sul lato server tradizionali.

Azure AD B2C offre due opzioni per consentire alle applicazioni a pagina singola di accedere agli utenti e ottenere token per accedere ai servizi back-end o alle API Web:

Flusso del 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. Inoltre, restituisce i token di aggiornamento che forniscono 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 moderne della privacy dei cookie del browser, 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 implicita o le applicazioni vengono implementate per usare il flusso implicito. In questi casi, Azure AD B2C supporta il flusso implicito OAuth 2.0. Il flusso di concessione implicita consente all'applicazione di ottenere i token ID e Access dall'endpoint di autorizzazione. 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. È possibile usare un tenant di Azure AD B2C esistente.

Registrare l'applicazione a pagina singola

1. Accedi al portale di Azure.

2. Se si dispone dell'accesso a più tenant, selezionare l'icona Impostazioni nel menu superiore per passare al tenant di Azure AD B2C dal menu Directory + sottoscrizioni.

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

4. Selezionare l'opzione Registrazioni appe quindi selezionare Nuova registrazione.

5. Immettere un nome per l'applicazione. Ad esempio , spaapp1.

6. In Tipi di account supportati, selezionare Account presso qualsiasi provider di identità o directory organizzativa (per l'autenticazione degli utenti con flussi di utenti)

7. In URI di reindirizzamento selezionare Applicazione a pagina singola (SPA) e 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'URL dell'endpoint dove l'applicazione riceve richieste in locale, 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 browser web rileva la distinzione tra maiuscole e minuscole nei percorsi, è possibile che i cookie associati a .../abc/response-oidc vengano esclusi se reindirizzati a un URL .../ABC/response-oidc con una diversa corrispondenza di maiuscole e minuscole.

8. Nella sezione Autorizzazioni, selezionare la casella di controllo Concedi il consenso amministrativo per le autorizzazioni openid e offline_access.

9. Selezionare Registrazione.

Abilitare il flusso di concessione implicita

È possibile abilitare il flusso di concessione implicita per due motivi, quando si usa MSAL.js versione 1.3 o precedente o quando si usa una registrazione dell'app per testare un flusso utente a scopo di test.

Usare questi passaggi per abilitare il flusso di concessione implicita per l'app:

1. Selezionare la registrazione dell'app creata.

2. In Gestisci selezionare Autenticazione.

3. 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).

4. Seleziona Salva.

Annotazioni

Se l'app usa MSAL.js 2.0 o versione successiva, non abilitare il flusso di concessione implicita come MSAL.js 2.0+ supporta il flusso del codice di autorizzazione OAuth 2.0 (con PKCE). Se si abilita la concessione implicita per testare un flusso utente, assicurarsi di disabilitare le impostazioni implicite del flusso di concessione prima di distribuire l'app nell'ambiente di produzione.

Eseguire la migrazione dal flusso di concessione implicita

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

Quando tutte le SPA di produzione rappresentate da una registrazione dell'applicazione iniziano a usare il flusso del codice di autorizzazione, disabilitare le impostazioni del flusso di concessione implicito 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 abilitato il flusso implicito (selezionato).

Passaggi successivi

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