Share via

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

  • Articolo

Microsoft Authentication Library per JavaScript (MSAL.js) v2.0 offre 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:

  1. Modificare gli URI di reindirizzamento di registrazione app dalla piattaforma Web alla piattaforma di tipo applicazione a pagina singola.
  2. Aggiornare il codice da MSAL.js 1.x a 2.x.
  3. 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 vuoi continuare a usare la registrazione dell'app esistente per le tue applicazioni, usa l'interfaccia di amministrazione di Microsoft Entra per aggiornare gli URI di reindirizzamento 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:

  1. Accedi all'Interfaccia di amministrazione di Microsoft Entra.

  2. Passare a Applicazioni> di identità>Registrazioni app, selezionare l'applicazione e quindi Autenticazione.

  3. Nel riquadro della piattaforma Web sotto gli URI di reindirizzamento selezionare il banner di avviso che indica che è necessario eseguire la migrazione degli URI.

    Implicit flow warning banner on web app tile in Azure portal

  4. Selezionare solo gli URI di reindirizzamento le cui applicazioni useranno MSAL.js 2.x e quindi selezionare Configura.

    Select redirect URI pane in SPA pane in Azure portal

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.

Single-page application tile in app registration in Azure portal

È 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 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 [PublicClientApplication][msal-js-publicclientapplication]:

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

const msalInstance = new msal.PublicClientApplication(config);

Per una procedura dettagliata completa dell'aggiunta di MSAL 2.x all'applicazione, vedere Esercitazione: Accedere agli utenti e chiamare l'API Microsoft Graph da un'app a pagina singola JavaScript usando il 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 la registrazione dell'app e il relativo ID client a MSAL 2.x e il flusso del codice di autorizzazione, è necessario deselezionare le impostazioni di concessione implicita nel menu Autenticazione della registrazione dell'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, è possibile creare un'applicazione a pagina singola React che consente agli utenti di accedere alla serie di esercitazioni in più parti seguente.