Actualización de MSAL Angular v1 a v2

MSAL Angular v2 pone nuestro contenedor para Angular al día con la versión más reciente de MSAL Common y ofrece compatibilidad inmediata con las versiones modernas de Angular (9-12) y RxJS (6).

En esta guía se muestran los cambios necesarios para migrar una aplicación existente de @azure/msal-angular v1 a v2.

Puede encontrar documentación específica para MSAL Angular v2 aquí.

Installation

El primer cambio fundamental a MSAL Angular v2 es que ya no usa el paquete principal msal , pero encapsula el @azure/msal-browser paquete como una dependencia del mismo nivel.

En primer lugar, desinstale las versiones anteriores de MSAL que se están usando actualmente.

Para instalar @azure/msal-browser y @azure/msal-angular:

npm install @azure/msal-browser @azure/msal-angular@latest

Cambios importantes en @azure/msal-browser@2

@azure/msal-browser@2 incluye una serie de cambios importantes de msal@1.x. Muchos de estos deben abstraerse de la aplicación, pero hay algunos que requerirán cambios de código.

MsalModule.forRoot ahora toma tres argumentos

Anteriormente, @azure/msal-angular aceptaba dos objetos de configuración a través MsalModule.forRoot()de , uno para la biblioteca principal y otro para @azure/msal-angular. Se ha modificado para que acepte una instancia de MSAL, así como dos objetos de configuración específicos de Angular.

  1. El primer argumento es la instancia de MSAL. Esto se puede proporcionar como una factoría que crea una instancia de MSAL, o pasando la instancia de MSAL junto con la configuración.
  2. El segundo argumento es un objeto MsalGuardConfiguration, que especifica el interactionType, así como un authRequest opcional y un loginFailedRoute opcional.
  3. El tercer argumento es un objeto MsalInterceptorConfiguration, que contiene los valores para interactionType, un protectedResourceMap y un authRequest opcional. unprotectedResourceMap ha quedado en desuso.

Consulte nuestra documentación de configuración y documentos específicos para MsalInterceptor y MsalGuard para obtener más información. También puede ver nuestros ejemplos actualizados para ver ejemplos de cómo pasar estos objetos de configuración.

Logger

  • logger ahora se configura mediante la configuración de la instancia de MSAL, en system.loggerOptions, que incluye un loggerCallback, piiLoggingEnabled y logLevel, en lugar de una instancia de logger. logger También se puede establecer dinámicamente mediante MsalService.setLogger(). Consulte para obtener más información y ver el logger documentationejemplo de uso.

Cambios de API

  • Los acquireToken métodos y login ahora toman objetos de solicitud diferentes como parámetros. Consulte la msal.service.ts para obtener más información.
  • Los eventos de difusión ahora emiten un objeto EventMessage, en lugar de solo cadenas de texto. Consulte el ejemplo de Angular para obtener un ejemplo de cómo implementar.
  • Las aplicaciones que usan métodos Redirect deben importar MsalRedirectComponent e inicializarlo junto con AppComponent en su app.component.ts, que se encargarán de todas las redirecciones. Las aplicaciones que no puedan hacerlo deben implementar el método handleRedirectObservable (y ejecutarlo en cada carga de la página), que capturará el resultado de las operaciones de redirección. Consulte la documentación de redirección para obtener más detalles.

MSAL Interceptor

  • Consulte la documentación de MsalInterceptor para obtener más información sobre cómo configurar las diferencias actuales MsalInterceptorentre la versión 1 y la versión 2.

MSAL Guard

  • Consulte nuestra documentación de MsalGuard para obtener más detalles sobre cómo configurar las diferencias actuales MsalGuardentre la versión 1 y la versión 2.

Accounts

  • Recomendamos suscribirse al observable inProgress$ y filtrar por InteractionStatus.None antes de obtener la información de la cuenta. Esto garantiza que todas las interacciones se hayan completado antes de obtener información de la cuenta. Consulte nuestro ejemplo para obtener un ejemplo de este uso.
  • Al obtener cuentas, se recomienda usar getAccountByHomeId() y getAccountByLocalId(), disponibles en la instancia de MSAL. getAccount() ahora es getAccountByUsername(), pero debería ser una opción secundaria, ya que puede ser menos fiable y solo se ofrece por comodidad.
  • getAllAccounts() también está disponible en la instancia de MSAL. Consulte la documentación@azure/msal-browser para obtener más información sobre los métodos de la cuenta.
  • Además, ahora puede obtener y establecer cuentas activas mediante getActiveAccount() y setActiveAccount(). Consulte nuestras preguntas más frecuentes para obtener más información.

Angular 9+ y rxjs@6

MSAL Angular espera ahora que la aplicación se compila con @angular/core@>=9, @angular/common@>=9, rxjs@6. Al igual que con MSAL Angular v1, rxjs-compat no es necesario.

Steps:

  1. Instale las versiones más recientes de Angular y rxjs: npm install @angular/core @angular/common rxjs
  2. Desinstalar rxjs-compat (suponiendo que no es necesario para otras bibliotecas): npm uninstall rxjs-compat

Samples

Hemos reunido aplicaciones de ejemplo básicas para Angular 9, 10, 11 y 12. Estos ejemplos muestran la configuración y el uso básicos, y se irán mejorando y ampliando de forma gradual.

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

  • Last updated on