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

2025-05-13

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 i passaggi nelle sezioni seguenti per eseguire la migrazione dell'applicazione MSAL.js 1.x utilizzando il grant implicito per MSAL.js 2.0+ (qui dopo 2.x) e il flusso del codice di autorizzazione.

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.

Eseguire i passaggi di migrazione

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

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

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 delle app attualmente configurate con gli URI di reindirizzamento della piattaforma Web :

Accedere all'interfaccia di amministrazione di Microsoft Entra.
Passare a Entra ID>Registrazioni app, selezionare l'applicazione e quindi Autenticazione.
Nel riquadro Della piattaforma Web in 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 dovrebbero ora essere visualizzati nel riquadro della piattaforma applicazione a pagina singola, mostrando che il supporto CORS con il flusso del codice di autorizzazione e PKCE è abilitato per questi URI.

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

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, potrebbe essere necessario apportare al codice, vedere la guida alla migrazione in 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