Aggiornare MSAL Angular dalla versione v4 alla v5

MSAL Angular v5 richiede una versione minima di Angular 19 ed elimina il supporto per Angular 15, 16, 17 e 18.

Vedere la guida alla migrazione da MSAL Browser v4 a v5 per il supporto del browser e altre modifiche chiave nella libreria sottostante @azure/msal-browser .

Cambiamenti dirompenti in @azure/msal-angular@5

Corrispondenza rigorosa per protectedResourceMap

In msal-angular v5, la corrispondenza dei modelli URL per le voci protectedResourceMap utilizza per impostazione predefinita una semantica di corrispondenza rigorosa. La corrispondenza rigorosa considera i metacharacter dei criteri come valori letterali, gli ancoraggi corrispondono al componente URL completo e applica regole con caratteri jolly host che non estendono i separatori di punti. Se la configurazione v4 si basava su criteri di corrispondenza meno rigorosi, aggiorna i modelli protectedResourceMap per allinearli alla corrispondenza rigorosa oppure imposta strictMatching su false per mantenere temporaneamente il comportamento precedente. Per altri dettagli, vedere la documentazione dell'intercettore MSAL .

Elenco di controllo rapido

1. Rivedi i tuoi protectedResourceMap codici. Le chiavi costituite da semplici URL di base (ad esempio https://api.example.com), senza caratteri jolly o sottopercorsi, non corrisponderanno più alle richieste dirette ai sottopercorsi di quell'URL. Vedere modelli di errore comuni.
2. Aggiorna le chiavi in modo che utilizzino percorsi esatti o caratteri jolly. Ogni chiave deve corrispondere esattamente all'URL richiesto dall'applicazione, oppure utilizzare un suffisso jolly /* per corrispondere ai sottopercorsi. Vedere Opzioni di correzione.
3. Se le chiavi vengono caricate dinamicamente in fase di esecuzione, impostare strictMatching: false come predefinito temporaneo sicuro. Vedere le linee guida per le configurazioni guidate dall'ambiente.

Guidato dall'ambiente protectedResourceMap

Se le protectedResourceMap chiavi provengono da file Angular environment , APP_INITIALIZER, configurazione JSON o platformBrowserDynamic, impostate strictMatching: false come predefinito sicuro durante la migrazione:

export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
  const protectedResourceMap = new Map<string, Array<string>>();
  protectedResourceMap.set(environment.apiConfig.uri, environment.apiConfig.scopes);

  return {
    interactionType: InteractionType.Redirect,
    protectedResourceMap,
    // TODO: Remove once protectedResourceMap keys are updated to use
    // exact paths or wildcard patterns (e.g. "https://api.example.com/*").
    strictMatching: false,
  };
}

Una volta migrate tutte le chiavi in percorsi esatti o wildcard, rimuovi strictMatching: false (oppure impostalo su true) per beneficiare di un comportamento di corrispondenza più rigoroso e sicuro. Per altri dettagli, vedere le linee guida per le configurazioni guidate dall'ambiente .

logout() rimosso

logout() è stato rimosso. In sostituzione utilizzare logoutRedirect() o logoutPopup().

// BEFORE (v4)
this.authService.logout();

// AFTER (v5)
this.authService.logoutRedirect();
// or
this.authService.logoutPopup();

Altre modifiche in @azure/msal-angular@5

Sintassi inject(TOKEN)

MSAL_INSTANCE, MSAL_GUARD_CONFIG, MSAL_INTERCEPTOR_CONFIGe MSAL_BROADCAST_CONFIG ora si risolvono in tipi anziché in stringhe per supportare inject(TOKEN) la sintassi. Questa modifica può causare errori TypeScript nelle applicazioni senza tipizzazione esplicita.

Opzioni handleRedirectObservable()

handleRedirectObservable() accetta ora un oggetto facoltativo HandleRedirectPromiseOptions , che include l'opzione navigateToLoginRequestUrl spostata dalla configurazione in @azure/msal-browser@5. Per altri dettagli, vedere la documentazione sui reindirizzamenti .

// BEFORE (msal-browser v4 configuration)
const msalConfig = {
  auth: {
    clientId: 'your-client-id',
    navigateToLoginRequestUrl: false // This option has moved
  }
};

// AFTER (msal-angular v5)
this.authService.handleRedirectObservable({
  navigateToLoginRequestUrl: false
}).subscribe();

Esempi

Sono ora disponibili gli esempi di sviluppatori seguenti:

• Esempio di Angular B2C
• Esempio di moduli Angular
• Esempio autonomo di Angular

Vedere qui per un elenco degli esempi correnti di ANGULAR MSAL e delle funzionalità illustrate.