Események az MSAL Angularban

Mielőtt elkezdené, győződjön meg arról, hogy tisztában van az alkalmazásobjektum inicializálásával.

@azure/msal-angular az általa közzétett @azure/msal-browsereseményrendszert használja, amely a hitelesítéssel és az MSAL-sel kapcsolatos eseményeket bocsát ki, és használható a felhasználói felület frissítéséhez, a hibaüzenetek megjelenítéséhez stb.

Események felhasználása az alkalmazásban

A(z) @azure/msal-angular eseményeit a MsalBroadcastService kezeli, és a MsalBroadcastService objektum msalSubject$ observable elemére való feliratkozással érhetők el.

Íme egy példa arra, hogyan használhatja fel a kibocsátott eseményeket az alkalmazásban:

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

Vegye figyelembe, hogy a fordítási hibák elkerülése érdekében előfordulhat, hogy a(z) result.payload elemet egy adott típusra kell konvertálnia. A payload adattípusa az eseménytől függ, és a dokumentációnkban itt található.

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);
    });
}

Az események használatának teljes példáját itt találja.

Események táblázata

Az objektummal kapcsolatos EventMessage további információkért, beleértve a jelenleg kibocsátott @azure/msal-browser események teljes táblázatát (beleértve a leírásokat és a kapcsolódó hasznos adatokat is), tekintse meg a dokumentációt itt.

Események hibáinak kezelése

Mivel a(z) EventMessage elemben a(z) EventError típusa AuthError | Error | null értékkel van definiálva, a hibát a megfelelő típusként kell ellenőrizni, mielőtt annak konkrét tulajdonságaihoz hozzáférne.

Az alábbi példában látható, hogyan lehet egy hibát AuthError típussá alakítani a TypeScript-hibák elkerülése érdekében:

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

A hibakezelésre példa az MSAL Angular B2C-mintán is megtalálható.

Naplózott állapot szinkronizálása lapok és ablakok között

Ha frissíteni szeretné a felhasználói felületet, amikor egy felhasználó egy másik lapon vagy ablakban be- vagy kijelentkezik az alkalmazásba, feliratkozhat a ACCOUNT_ADDED és ACCOUNT_REMOVED eseményekre. A tartalom a hozzáadott vagy eltávolított AccountInfo objektum lesz.

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

A mintákban is megtalálható egy teljes példa.

Az inProgress$ megfigyelhető

A inProgress$ observable objektumot a MsalBroadcastService is kezeli, és fel kell rá iratkozni, ha az alkalmazásnak ismernie kell az interakciók állapotát, különösen annak ellenőrzéséhez, hogy az interakciók lezárultak-e. Javasoljuk, hogy a felhasználói fiókokat érintő függvények előtt ellenőrizze, hogy az interakciók állapota InteractionStatus.None.

Vegye figyelembe, hogy az utolsó / legutóbbi InteractionStatus is rendelkezésre áll a inProgress$ Observable-ra való előfizetéskor.

A használatát lásd az alábbi példában. A mintákban is megtalálható egy teljes példa. Az interakciós állapotok teljes listája itt található.

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

Választható MsalBroadcastService konfigurációk

A MsalBroadcastService korábbi események visszajátszására is konfigurálható, ha előfizetnek rá. Alapértelmezés szerint a(z) MsalBroadcastService elemre való feliratkozás után kibocsátott események állnak rendelkezésre. Előfordulhatnak olyan esetek, amikor szükség van az előfizetést megelőző eseményekre. Ha megad egy konfigurációt a MsalBroadcastService paraméterhez, és egy számra állítja be a eventsToReplay paramétert, az előfizetéskor elérhető lesz a múltbeli események száma.

Az események újrajátszásával kapcsolatos további információkért tekintse meg az RxJS ReplaySubjectról szóló dokumentációját itt.

A MsalBroadcastService app.module.ts fájlban az alábbiak szerint konfigurálható:

// 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 {}