Eventos no MSAL Angular

Antes de começar aqui, certifique-se de entender como inicializar o objeto do aplicativo.

@azure/msal-angular usa o sistema de eventos exposto por @azure/msal-browser, que emite eventos relacionados à autenticação e MSAL, e pode ser usado para atualizar a interface do usuário, mostrando mensagens de erro e assim por diante.

Consumindo eventos em seu aplicativo

Os eventos em @azure/msal-angular são gerenciados pelo MsalBroadcastService e podem ser acessados por meio da assinatura do observable msalSubject$ no MsalBroadcastService.

Aqui está um exemplo de como você pode consumir os eventos emitidos em seu aplicativo:

import { MsalBroadcastService } from '@azure/msal-angular';
import { EventMessage, EventType } from '@azure/msal-browser';

export class AppComponent implements OnInit, OnDestroy {
  private readonly _destroying$ = new Subject<void>();

  constructor(
    //...
    private msalBroadcastService: MsalBroadcastService
  ) {}

  ngOnInit(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        // Optional filtering of events.
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS), 
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
        // Do something with the result
      });
  }

  ngOnDestroy(): void {
    this._destroying$.next(null);
    this._destroying$.complete();
  }
}

Observe que você pode precisar converter o result.payload em um tipo específico para evitar erros de compilação. O tipo de conteúdo dependerá do evento e poderá ser encontrado em nossa documentação aqui.

ngOnInit(): void {
  this.msalBroadcastService.msalSubject$
    .pipe(
      filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
    )
    .subscribe((result: EventMessage) => {
      // Casting payload as AuthenticationResult to access account
      const payload = result.payload as AuthenticationResult;
      this.authService.instance.setActiveAccount(payload.account);
    });
}

Para obter o exemplo completo de como usar eventos, consulte nosso exemplo aqui.

Tabela de eventos

Para obter mais informações sobre o objeto EventMessage, incluindo a tabela completa dos eventos atualmente emitidos por @azure/msal-browser (incluindo descrições e payloads relacionados), consulte a documentação aqui.

Lidando com erros em eventos

Como EventError em EventMessage é definido como AuthError | Error | null, é preciso validar se um erro é do tipo correto antes de acessar propriedades específicas desse erro.

Veja o exemplo abaixo de como um erro pode ser convertido para AuthError para evitar erros do TypeScript:

import { MsalBroadcastService } from '@azure/msal-angular';
import { EventMessage, EventType } from '@azure/msal-browser';

export class AppComponent implements OnInit, OnDestroy {
  private readonly _destroying$ = new Subject<void>();

  constructor(
    //...
    private msalBroadcastService: MsalBroadcastService
  ) {}

  ngOnInit(): void {
    this.msalBroadcastService.msalSubject$
      .pipe(
        // Optional filtering of events
        filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_FAILURE), 
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
        if (result.error instanceof AuthError) {
          // Do something with the error
        }
      });
  }

  ngOnDestroy(): void {
    this._destroying$.next(null);
    this._destroying$.complete();
  }
}

Um exemplo de tratamento de erros também pode ser encontrado em nosso exemplo do MSAL Angular B2C.

Sincronização do estado de login entre guias e janelas

Se você quiser atualizar sua interface do usuário quando um usuário entrar ou sair do seu aplicativo em uma guia ou janela diferente, poderá se inscrever nos eventos ACCOUNT_ADDED e ACCOUNT_REMOVED. A carga útil será o objeto AccountInfo que foi adicionado ou removido.

import { MsalService, MsalBroadcastService } from '@azure/msal-angular';
import { EventMessage, EventType } from '@azure/msal-browser';

export class AppComponent implements OnInit, OnDestroy {
  private readonly _destroying$ = new Subject<void>();

  constructor(
    //...
    private authService: MsalService,
    private msalBroadcastService: MsalBroadcastService
  ) {}

  ngOnInit(): void {
    this.authService.instance.enableAccountStorageEvents(); // Register the storage listener that will be emitting the events
    this.msalBroadcastService.msalSubject$
      .pipe(
        // Optional filtering of events
        filter((msg: EventMessage) => msg.eventType === EventType.ACCOUNT_ADDED || msg.eventType === EventType.ACCOUNT_REMOVED), 
        takeUntil(this._destroying$)
      )
      .subscribe((result: EventMessage) => {
        if (this.authService.msalInstance.getAllAccounts().length === 0) {
          // Account logged out in a different tab, redirect to homepage
          window.location.pathname = "/";
        } else {
          // Update UI to show user is signed in. result.payload contains the account that was logged in
        }
      });
  }

  ngOnDestroy(): void {
    this._destroying$.next(null);
    this._destroying$.complete();
  }
}

Um exemplo completo também pode ser encontrado em nossos exemplos.

O Observable inProgress$

O observable inProgress$ também é gerenciado pelo MsalBroadcastService e deve ser inscrito quando o aplicativo precisar saber o status das interações, principalmente para verificar se as interações foram concluídas. Recomendamos verificar se o status das interações é InteractionStatus.None antes de funções relacionadas a contas de usuário.

Observe que o último/mais recente InteractionStatus também estará disponível ao se inscrever no observable inProgress$.

Veja o exemplo abaixo para seu uso. Um exemplo completo também pode ser encontrado em nossos exemplos. Uma lista completa de status de interação pode ser encontrada aqui.

import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
import { MsalBroadcastService} from '@azure/msal-angular';
import { InteractionStatus } from '@azure/msal-browser';
import { Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private readonly _destroying$ = new Subject<void>();

  constructor(
    private msalBroadcastService: MsalBroadcastService
  ) {}

  ngOnInit(): void {
    this.msalBroadcastService.inProgress$
      .pipe(
        // Filtering for all interactions to be completed
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this._destroying$)
      )
      .subscribe(() => {
        // Do something related to user accounts or UI here
      })
  }

  ngOnDestroy(): void {
    this._destroying$.next(null);
    this._destroying$.complete();
  }
}

Configurações opcionais MsalBroadcastService

O MsalBroadcastService pode ser opcionalmente configurado para reproduzir eventos passados quando houver uma inscrição nele. Por padrão, os eventos emitidos após a inscrição no MsalBroadcastService estão disponíveis. Pode haver instâncias em que os eventos anteriores à assinatura são necessários. Ao fornecer uma configuração para o MsalBroadcastService parâmetro e definir o eventsToReplay parâmetro como um número, esse número de eventos anteriores estará disponível na assinatura.

Para obter mais informações sobre como reproduzir eventos, consulte os documentos do RxJS em ReplaySubjects aqui.

O MsalBroadcastService arquivo de app.module.ts pode ser configurado da seguinte maneira:

// app.module.ts
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MsalModule, MsalService, MsalGuard, MsalInterceptor, MsalBroadcastService, MsalRedirectComponent, MSAL_BROADCAST_CONFIG } from "@azure/msal-angular"; // Import MsalBroadcastService and MSAL_BROADCAST_CONFIG here
import { PublicClientApplication, InteractionType, BrowserCacheLocation } from "@azure/msal-browser";

@NgModule({
    imports: [
        MsalModule.forRoot( new PublicClientApplication({ // MSAL Configuration
            auth: {
                clientId: "clientid",
                authority: "https://login.microsoftonline.com/common/",
                redirectUri: "http://localhost:4200/",
                postLogoutRedirectUri: "http://localhost:4200/",
                navigateToLoginRequestUrl: true
            },
            cache: {
                cacheLocation : BrowserCacheLocation.LocalStorage,
            },
            system: {
                loggerOptions: {
                    loggerCallback: () => {},
                    piiLoggingEnabled: false
                }
            }
        }), {
            interactionType: InteractionType.Popup, // MSAL Guard Configuration
            authRequest: {
              scopes: ['user.read']
            },
            loginFailedRoute: "/login-failed" 
        }, {
            interactionType: InteractionType.Redirect, // MSAL Interceptor Configuration
            protectedResourceMap
        })
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: MsalInterceptor,
            multi: true
        },
        {
          provide: MSAL_BROADCAST_CONFIG, // Add configuration to providers here
          useValue: {
            eventsToReplay: 2 // Set how many events you want to replay when subscribing
          }
        },
        MsalGuard,
        MsalBroadcastService // Ensure the MsalBroadcastService is provided
    ],
    bootstrap: [AppComponent, MsalRedirectComponent]
})
export class AppModule {}