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

Articolo
03/05/2025

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:

Modifica gli URI di reindirizzamento della registrazione dell'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.

Passa gli URI di reindirizzamento alla piattaforma SPA (Single Page Application)

Se desideri continuare a usare la registrazione dell'app esistente per le tue applicazioni, utilizza il centro di amministrazione di Microsoft Entra per aggiornare i redirect URI della registrazione alla piattaforma SPA. 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 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 dell'app e il relativo ID client a MSAL 2.x e il flusso del codice di autorizzazione, dovresti deselezionare le impostazioni per la concessione implicita nel menu Autenticazione della registrazione dell'app.

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

Non disabilitare il flusso di concessione implicita prima di aver aggiornato tutte le applicazioni a MSAL.js 2.x e a [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.
Approfondisci imparando a creare un'applicazione a pagina singola (SPA) in React che autentica gli utenti nella seguente serie di esercitazioni suddivisa in più parti.

Condividi tramite