Condividi tramite

Esercitazione: Aggiungere informazioni di accesso e disconnesione a un'applicazione a pagina singola Angular per un tenant esterno

  • Articolo

Questa esercitazione è la parte finale di una serie che illustra la creazione di un'applicazione a pagina singola e la preparazione per l'autenticazione tramite l'interfaccia di amministrazione di Microsoft Entra. Nella parte 3 di questa seriesono stati aggiunti flussi di autenticazione all'applicazione a pagina singola Angular e sono stati configurati i flussi per l'uso con il tenant esterno. In questo articolo si apprenderà come aggiungere funzionalità di accesso e disconnessione all'applicazione. Infine, si testerà l'applicazione.

Contenuto dell'esercitazione:

  • Aggiungere la funzionalità di accesso e di disconnessione all'app.
  • Testare l'applicazione

Prerequisiti

Accedere e disconnettere gli utenti

  1. Aprire src/app/app.component.ts e sostituire il codice con il codice seguente per accedere a un utente usando un punto di presenza (POP). Questo codice usa la libreria Angular MSAL per accedere a un utente.

      import { Component, OnInit, Inject, OnDestroy } from '@angular/core';
  import {
    MsalService,
    MsalBroadcastService,
    MSAL_GUARD_CONFIG,
    MsalGuardConfiguration,
  } from '@azure/msal-angular';
  import {
    AuthenticationResult,
    InteractionStatus,
    InteractionType,
    PopupRequest,
    RedirectRequest,
    EventMessage,
    EventType
  } 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 {
    title = 'Microsoft identity platform';
    loginDisplay = false;
    isIframe = false;

    private readonly _destroying$ = new Subject<void>();

    constructor(
      @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
      private authService: MsalService,
      private msalBroadcastService: MsalBroadcastService,
    ) { }

    ngOnInit(): void {
      this.isIframe = window !== window.parent && !window.opener;
      this.setLoginDisplay();
      this.authService.instance.enableAccountStorageEvents(); // Optional - This will enable ACCOUNT_ADDED and ACCOUNT_REMOVED events emitted when a user logs in or out of another tab or window

      /**
       * You can subscribe to MSAL events as shown below. For more info,
       * visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/events.md
       */
      this.msalBroadcastService.inProgress$
        .pipe(
          filter(
            (status: InteractionStatus) => status === InteractionStatus.None
          ),
          takeUntil(this._destroying$)
        )
        .subscribe(() => {
          this.setLoginDisplay();
          this.checkAndSetActiveAccount();
        });

      this.msalBroadcastService.msalSubject$
        .pipe(
          filter(
            (msg: EventMessage) => msg.eventType === EventType.LOGOUT_SUCCESS
          ),
          takeUntil(this._destroying$)
        )
        .subscribe((result: EventMessage) => {
          this.setLoginDisplay();
          this.checkAndSetActiveAccount();
        });

      this.msalBroadcastService.msalSubject$
        .pipe(
          filter(
            (msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS
          ),
          takeUntil(this._destroying$)
        )
        .subscribe((result: EventMessage) => {
          const payload = result.payload as AuthenticationResult;
          this.authService.instance.setActiveAccount(payload.account);
        });
    }

    setLoginDisplay() {
      this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
    }

    checkAndSetActiveAccount() {
      /**
       * If no active account set but there are accounts signed in, sets first account to active account
       * To use active account set here, subscribe to inProgress$ first in your component
       * Note: Basic usage demonstrated. Your app may require more complicated account selection logic
       */
      let activeAccount = this.authService.instance.getActiveAccount();

      if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
        let accounts = this.authService.instance.getAllAccounts();
        // add your code for handling multiple accounts here
        this.authService.instance.setActiveAccount(accounts[0]);
      }
    }

    login() {
      if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
        if (this.msalGuardConfig.authRequest) {
          this.authService.loginPopup({
            ...this.msalGuardConfig.authRequest,
          } as PopupRequest)
            .subscribe((response: AuthenticationResult) => {
              this.authService.instance.setActiveAccount(response.account);
            });
        } else {
          this.authService.loginPopup()
            .subscribe((response: AuthenticationResult) => {
              this.authService.instance.setActiveAccount(response.account);
            });
        }
      } else {
        if (this.msalGuardConfig.authRequest) {
          this.authService.loginRedirect({
            ...this.msalGuardConfig.authRequest,
          } as RedirectRequest);
        } else {
          this.authService.loginRedirect();
        }
      }
    }

    logout() {

      if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
        this.authService.logoutPopup({
          account: this.authService.instance.getActiveAccount(),
        });
      } else {
        this.authService.logoutRedirect({
          account: this.authService.instance.getActiveAccount(),
        });
      }
    }

    // unsubscribe to events when component is destroyed
    ngOnDestroy(): void {
      this._destroying$.next(undefined);
      this._destroying$.complete();
    }
  }

Testare l'applicazione

  1. Avviare il server Web in modo che rimanga eseguendo questi comandi da un prompt della riga di comando nella cartella dell'applicazione:

    npm install
npm start

  2. Nel browser immettere http://localhost:4200 per aprire l'applicazione.

    Screenshot di un Web browser che visualizza la finestra di dialogo di accesso

  3. Selezionare il pulsante di accesso nell'angolo in alto a destra dello schermo.

  4. Dopo aver eseguito l'accesso, nella pagina verranno visualizzate le informazioni sul profilo.

    Web browser che visualizza l'app con accesso

  5. Selezionare il pulsante Disconnessione nell'angolo superiore destro dello schermo per disconnettersi.

Vedi anche

Dopo aver completato questa esercitazione, è possibile ottenere altre informazioni su come: