Atualização do MSAL Angular v1 para v2

O MSAL Angular v2 atualiza o nosso wrapper para Angular para a versão mais recente do MSAL common e inclui suporte imediato para versões modernas do Angular (9 - 12) e do RxJS (6).

Este guia irá demonstrar as alterações necessárias para migrar uma aplicação existente da @azure/msal-angular v1 para a v2.

Documentação específica para MSAL Angular v2 pode ser encontrada aqui.

Instalação

A primeira alteração fundamental no MSAL Angular v2 é que já não utiliza o pacote principal msal, mas encapsula o pacote @azure/msal-browser como uma dependência de mesmo nível.

Primeiro, desinstale quaisquer versões anteriores do MSAL atualmente em uso.

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

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

Mudanças significativas na @azure/msal-browser@2

@azure/msal-browser@2 inclui várias alterações marcantes em relação msal@1.xa . Muitos destes devem ser abstraídos da sua aplicação, mas há alguns que exigem alterações no código.

O MsalModule.forRoot agora assume três argumentos

Anteriormente, @azure/msal-angular aceitava dois objetos de configuração via MsalModule.forRoot(), um para a biblioteca central e outro para @azure/msal-angular. Isto foi alterado para incluir uma instância de MSAL, bem como dois objetos de configuração específicos de Angular.

  1. O primeiro argumento é a instância MSAL. Isto pode ser fornecido como uma função de fábrica que instancia o MSAL, ou através da passagem da instância do MSAL juntamente com as configurações.
  2. O segundo argumento é um MsalGuardConfiguration objeto, que especifica o interactionType assim como um opcional authRequest e um opcional loginFailedRoute.
  3. O terceiro argumento é um MsalInterceptorConfiguration objeto, que contém os valores para interactionType, a protectedResourceMap, e um opcional authRequest. unprotectedResourceMap foi preterido.

Consulte o nosso documento de configuração e os documentos específicos para MsalInterceptor e MsalGuard para mais informações. Também pode consultar os nossos exemplos atualizados para exemplos de como passar estes objetos de configuração.

Logger

  • O logger é agora definido através das configurações da instância MSAL, em system.loggerOptions, que incluem um loggerCallback, piiLoggingEnabled e logLevel, em vez de uma instância de logger. O logger também pode ser definido dinamicamente usando MsalService.setLogger(). Consulte o logger documentation para mais informações e o exemplo de utilização.

Alterações da API

  • Os acquireToken métodos e login agora tomam diferentes objetos de pedido como parâmetros. Consulte o msal.service.ts para mais detalhes.
  • Os eventos de transmissão agora emitem um objeto EventMessage, em vez de apenas cadeias de caracteres. Veja o exemplo do Angular para um exemplo de como implementar.
  • As aplicações que utilizam métodos Redirect devem importar o MsalRedirectComponent e o bootstrap, juntamente com AppComponent, no seu app.component.ts, para tratar todos os redirecionamentos. As aplicações não conseguem fazer isto devem implementar o handleRedirectObservable método (e fazê-lo correr em cada carregamento de página), o que irá capturar o resultado das operações de redirecionamento. Consulte a documentação de redirecionamento para mais detalhes.

Intercetador MSAL

Guarda MSAL

  • Por favor, consulte o nosso documento do MsalGuard para mais detalhes sobre como configurar o atual MsalGuard, e as diferenças entre v1 e v2.

Accounts

  • Recomendamos que subscreva o inProgress$ observável e que filtre por InteractionStatus.None antes de obter informações da conta. Isto garante que todas as interações foram concluídas antes de obter a informação da conta. Veja o nosso exemplo para um exemplo desta utilização.
  • Ao obter contas, recomendamos utilizar getAccountByHomeId() e getAccountByLocalId(), disponíveis na instância do MSAL. getAccount() é agora getAccountByUsername(), mas deve ser uma opção secundária, pois pode ser menos fiável e é apenas por conveniência.
  • getAllAccounts() está também disponível na instância MSAL. Consulte a documentação em @azure/msal-browser para mais detalhes sobre os métodos da conta.
  • Além disso, agora pode obter e definir contagens ativas usando getActiveAccount() e setActiveAccount(). Consulte o nosso FAQ para mais informações.

Angular 9+ e rxjs@6

O MSAL Angular agora espera que a sua aplicação seja construída com @angular/core@>=9, @angular/common@>=9, rxjs@6. Tal como no MSAL Angular v1, rxjs-compat não é obrigatório.

Passos:

  1. Instale versões mais recentes do Angular e do rxjs: npm install @angular/core @angular/common rxjs
  2. Desinstalar rxjs-compat (assumindo que não é necessário para outras bibliotecas): npm uninstall rxjs-compat

Samples

Reunimos aplicações básicas de exemplo para Angular 9, 10, 11 e 12. Estes exemplos demonstram a configuração e utilização básicas, e serão melhorados e adicionados de forma incremental.

Veja aqui uma lista dos exemplos do MSAL Angular v2 e das funcionalidades demonstradas.

  • Last updated on