Eseguire la migrazione di un'app a pagina singola JavaScript da una concessione implicita al flusso del codice di autorizzazione

Articolo
07/01/2024

Microsoft Authentication Library per JavaScript (MSAL.js) v2.0 fornisce il supporto per il flusso del codice di autorizzazione con PKCE e CORS alle applicazioni a pagina singola in Microsoft Identity Platform. Seguire la procedura descritta nelle sezioni seguenti per eseguire la migrazione dell'applicazione MSAL.js 1.x con la concessione implicita a MSAL.js 2.0+ (da qui in avanti 2.x) e il flusso del codice di autenticazione.

MSAL.js 2.x rappresenta un miglioramento rispetto a MSAL.js 1.x in quanto supporta il flusso del codice di autorizzazione nel browser invece del flusso di concessione implicita. MSAL.js 2.x NON supporta il flusso implicito.

Passaggi per la migrazione

Per aggiornare l'applicazione a MSAL.js 2.x e al flusso del codice di autenticazione, sono previsti tre passaggi principali:

Modificare gli URI di reindirizzamento di registrazione app dalla piattaforma Web alla piattaforma di tipo applicazione a pagina singola.
Aggiornare il codice da MSAL.js 1.x a 2.x.
Disabilitare la concessione implicita nella registrazione app quando tutte le applicazioni che condividono la registrazione sono state aggiornate a MSAL.js 2.x e al flusso del codice di autenticazione.

Le sezioni seguenti descrivono ogni passaggio in modo più dettagliato.

Modificare gli URI di reindirizzamento alla piattaforma di tipo applicazione a pagina singola

Suggerimento

I passaggi descritti in questo articolo possono variare leggermente in base al portale da cui si inizia.

Se si vuole continuare a usare la registrazione app esistente per le applicazioni, usare l'interfaccia di amministrazione di Microsoft Entra per aggiornare gli URI di reindirizzamento della registrazione alla piattaforma di tipo applicazione a pagina singola. In questo modo, si abilita il flusso del codice di autorizzazione con il supporto PKCE e CORS per le app che usano la registrazione (è comunque necessario aggiornare il codice dell'applicazione a MSAL.js v2.x).

Seguire questa procedura per le registrazioni app che sono attualmente configurate con gli URI di reindirizzamento della piattaforma Web:

Accedi all'Interfaccia di amministrazione di Microsoft Entra.
Passare a Identità>Applicazioni>Registrazioni app e selezionare l'applicazione, quindi Autenticazione.
Nel riquadro della piattaforma Web sotto gli URI di reindirizzamento selezionare il banner di avviso che indica che è necessario eseguire la migrazione degli URI.
Selezionare solo gli URI di reindirizzamento le cui applicazioni useranno MSAL.js 2.x e quindi selezionare Configura.

Questi URI di reindirizzamento verranno ora visualizzati nel riquadro della piattaforma di tipo applicazione a pagina singola, che mostra che il supporto CORS con il flusso del codice di autorizzazione e PKCE sono abilitati per questi URI.

Riquadro dell'applicazione a pagina singola nella registrazione app del portale di Azure

È anche possibile creare una nuova registrazione app invece di aggiornare gli URI di reindirizzamento nella registrazione esistente.

Aggiornare il codice a MSAL.js 2.x

In MSAL 1.x è stata creata un'istanza dell'applicazione inizializzando un oggetto UserAgentApplication come indicato di seguito:

// MSAL 1.x
import * as msal from "msal";

const msalInstance = new msal.UserAgentApplication(config);

In MSAL 2.x, inizializzare invece un oggetto [PublicClientApplication][msal-js-publicclientapplication]:

// MSAL 2.x
import * as msal from "@azure/msal-browser";

const msalInstance = new msal.PublicClientApplication(config);

Per la procedura dettagliata completa su come aggiungere MSAL 2.x all'applicazione, vedere Esercitazione: Concedere l'accesso agli utenti e chiamare l'API Microsoft Graph API da un'applicazione a pagina singola (SPA) di JavaScript usando un flusso del codice di autenticazione.

Per altre modifiche che potrebbe essere necessario apportare al codice, vedere la guida alla migrazione su GitHub.

Disabilitare le impostazioni per la concessione implicita

Dopo aver aggiornato tutte le applicazioni di produzione che usano questa registrazione app e il relativo ID client a MSAL 2.x e il flusso del codice di autorizzazione, deselezionare le impostazioni per la concessione implicita nel menu Autenticazione della registrazione app.

Quando si deselezionano le impostazioni per la concessione implicita nella registrazione app, il flusso implicito viene disabilitato per tutte le applicazioni che usano la registrazione e il relativo ID client.

Non disabilitare il flusso di concessione implicita prima di aver aggiornato tutte le applicazioni a MSAL.js 2.x e [PublicClientApplication][msal-js-publicclientapplication].

Passaggi successivi

Per altre informazioni sul flusso del codice di autorizzazione, incluse le differenze tra i flussi di codice implicito e di autenticazione, vedere Flusso del codice di autorizzazione di Microsoft Identity Platform e OAuth 2.0.
Per altre informazioni, creare un'applicazione a pagina singola (SPA) che connette gli utenti nella seguente serie di esercitazioni in più parti.

Condividi tramite