Actualización de MSAL Angular v4 a v5

MSAL Angular v5 requiere una versión mínima de Angular 19 y reduce la compatibilidad con Angular 15, 16, 17 y 18.

Consulte la guía de migración de MSAL Browser v4 a v5 para obtener compatibilidad con el explorador y otros cambios clave en la biblioteca subyacente @azure/msal-browser .

Cambios importantes en @azure/msal-angular@5

Coincidencia estricta para protectedResourceMap

En msal-angular v5, la coincidencia de patrones de URL para las entradas protectedResourceMap utiliza, por defecto, una semántica de coincidencia estricta. La coincidencia estricta trata los metacaracteres de patrón como literales, las anclas coinciden con el componente completo de la URL y aplica reglas de comodín para el host que no abarcan los separadores de punto. Si la configuración de la versión 4 se basa en el comportamiento de coincidencia más flexible, actualice protectedResourceMap los patrones para que se alineen con la coincidencia estricta o establezca strictMatching en false para conservar temporalmente el comportamiento heredado. Consulte los documentos del interceptor de MSAL para obtener más información.

Lista de comprobación rápida

1. Revise las protectedResourceMap claves. Las claves que sean URL base simples (p. ej., https://api.example.com) sin caracteres comodín ni subrutas ya no coincidirán con las solicitudes a subrutas de esa URL. Consulte patrones de error comunes.
2. Actualiza las claves para utilizar rutas exactas o comodines. Cada clave debe coincidir con la dirección URL exacta que solicita la aplicación o usar un /* sufijo comodín para que coincida con las subrutas. Consulte las opciones de corrección.
3. Si las claves se cargan dinámicamente en tiempo de ejecución, establezca strictMatching: false como valor predeterminado seguro temporal. Consulte las instrucciones para configuraciones controladas por el entorno.

Controlado por el entorno protectedResourceMap

Si sus claves protectedResourceMap proceden de archivos de Angular environment, APP_INITIALIZER, la configuración JSON o platformBrowserDynamic, establezca strictMatching: false como valor predeterminado seguro durante la migración:

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 vez que todas las claves se hayan migrado a rutas exactas o comodines, elimina strictMatching: false (o configúralo como true) para beneficiarte del comportamiento de coincidencia más estricto y seguro. Consulte instrucciones para configuraciones controladas por el entorno para obtener más información.

se ha eliminado logout()

Se ha eliminado logout(). Use logoutRedirect() o logoutPopup() en su lugar.

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

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

Otros cambios en @azure/msal-angular@5

sintaxis de inject(TOKEN)

MSAL_INSTANCE, MSAL_GUARD_CONFIG, MSAL_INTERCEPTOR_CONFIG y MSAL_BROADCAST_CONFIG ahora se resuelven como tipos en lugar de cadenas para admitir la sintaxis inject(TOKEN). Este cambio puede provocar errores de TypeScript en aplicaciones sin escribir explícitamente.

handleRedirectObservable() Opciones

handleRedirectObservable() ahora acepta un objeto opcional HandleRedirectPromiseOptions , que incluye la navigateToLoginRequestUrl opción que se ha movido de la configuración en @azure/msal-browser@5. Consulte la documentación de redirecciones para obtener más detalles.

// 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();

Samples

Ahora están disponibles los siguientes ejemplos para desarrolladores:

• Ejemplo de Angular B2C
• Ejemplo de módulos angulares
• Ejemplo independiente de Angular

Consulte aquí una lista de los ejemplos actuales de MSAL Angular y las características que se muestran.