Atualizando do MSAL Angular v1 para v2

O MSAL Angular v2 atualiza nosso wrapper para Angular com a versão mais recente do MSAL Common e oferece suporte imediato a versões modernas do Angular (9 a 12) e rxjs (6).

Este guia demonstrará as alterações necessárias para migrar um aplicativo existente da @azure/msal-angular v1 para a v2.

A documentação especificamente para MSAL Angular v2 pode ser encontrada aqui.

Installation

A primeira alteração fundamental para o MSAL Angular v2 é que não usa mais o pacote principal msal , mas encapsula o @azure/msal-browser pacote como uma dependência de par.

Primeiro, desinstale todas as versões anteriores da MSAL que estão sendo usadas no momento.

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

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

Alterações interruptivas em @azure/msal-browser@2

@azure/msal-browser@2 inclui várias alterações interruptivas de msal@1.x. Muitos deles devem ser abstraídos do seu aplicativo, mas há alguns que exigirão alterações de código.

MsalModule.forRoot agora usa três argumentos

Anteriormente, @azure/msal-angular aceitava dois objetos de configuração por meio MsalModule.forRoot()de um para a biblioteca principal e outro para @azure/msal-angular. Isso foi alterado para usar uma instância da MSAL, bem como dois objetos de configuração específicos do Angular.

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

Consulte nosso documento de configuração e documentos específicos para MsalInterceptor e MsalGuard para obter mais informações. Você também pode ver nossos exemplos atualizados para obter exemplos de como passar esses objetos de configuração.

Logger

  • O logger agora é definido por configurações para a instância do MSAL, sob system.loggerOptions, que incluem um loggerCallback, piiLoggingEnabled e logLevel, em vez de uma instância de um logger. O logger também pode ser definido dinamicamente usando MsalService.setLogger(). Confira mais logger documentation informações e exemplos de uso.

Alterações de API

  • Os acquireToken métodos e login agora tomam objetos de solicitação diferentes como parâmetros. Consulte o msal.service.ts para obter detalhes.
  • Eventos de difusão agora emitem um EventMessage objeto, em vez de apenas cadeias de caracteres. Consulte o exemplo em Angular para ver como implementar.
  • Aplicativos que usam métodos Redirect devem importar MsalRedirectComponent e bootstrap, junto com AppComponent, no arquivo app.component.ts, que cuidará de todos os redirecionamentos. Os aplicativos que não conseguem fazer isso devem implementar o método handleRedirectObservable (e executá-lo a cada carregamento de página), que capturará o resultado das operações de redirecionamento. Consulte a documentação de redirecionamento para obter mais detalhes.

Interceptador MSAL

MSAL Guard

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

Accounts

  • Recomendamos inscrever-se no inProgress$ observável e filtrar por InteractionStatus.None antes de recuperar as informações da conta. Isso garante que todas as interações tenham sido concluídas antes de obter informações da conta. Consulte nosso exemplo para obter um exemplo desse uso.
  • Ao obter contas, é recomendável usar getAccountByHomeId() e getAccountByLocalId(), disponível na instância da MSAL. getAccount() é agora getAccountByUsername(), mas deve ser uma escolha secundária, pois pode ser menos confiável e é apenas para conveniência.
  • getAllAccounts() também está disponível na instância da MSAL. Consulte os documentos para @azure/msal-browser obter mais detalhes sobre métodos de conta.
  • Além disso, agora você pode obter e definir acccounts ativos usando getActiveAccount() e setActiveAccount(). Consulte nossas perguntas frequentes para obter mais informações.

Angular 9+ e rxjs@6

O MSAL Angular agora espera que seu aplicativo seja criado com @angular/core@>=9, @angular/common@>=9, rxjs@6. Assim como acontece com o MSAL Angular v1, rxjs-compat não é necessário.

Steps:

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

Exemplos

Reunimos aplicativos de exemplo básicos para Angular 9, 10, 11 e 12. Esses exemplos demonstram a configuração e o uso básicos e serão aprimorados e adicionados de forma incremental.

Veja aqui uma lista dos exemplos do MSAL Angular v2 e os recursos demonstrados.

  • Last updated on