Esercitazione: Aggiungere accesso e uscita nella tua applicazione a pagina singola Angular

Si applica a: I tenant della forza lavoro I tenant esterni (Altre informazioni)

Questa esercitazione è la parte 2 di una serie che illustra la creazione di un'applicazione a pagina singola Angular e l'aggiunta dell'autenticazione tramite Microsoft Identity Platform. Nella parte 1 di questa serie è stata creata un'applicazione a pagina singola Angular e sono state aggiunte le configurazioni iniziali.

In questa esercitazione, farai:

• Aggiungi accedere e disconnettersi

Prerequisiti

• Completamento dei prerequisiti e dei passaggi descritti in Esercitazione: Creare un'applicazione a pagina singola Angular

Aggiungere la funzionalità di accesso e disconnessione all'app

In questa sezione verranno aggiunti componenti per supportare la funzionalità di accesso e disconnessione nell'applicazione Angular. Questi componenti consentono agli utenti di autenticare e gestire le sessioni. Si aggiungerà il routing all'applicazione per indirizzare gli utenti ai componenti appropriati in base al relativo stato di autenticazione.

Gestore del personale

Per abilitare la funzionalità di accesso e disconnesso nell'applicazione Angular, seguire questa procedura:

1. Aprire il file src/app/app.component.html e sostituirne il contenuto con il codice seguente.

   <a class="navbar navbar-dark bg-primary" variant="dark" href="/">
       <a class="navbar-brand"> Microsoft Identity Platform </a>
       <a>
           <button *ngIf="!loginDisplay" class="btn btn-secondary" (click)="login()">Sign In</button>
           <button *ngIf="loginDisplay" class="btn btn-secondary" (click)="logout()">Sign Out</button>
       </a>
   </a>
   <a class="profileButton">
       <a [routerLink]="['profile']" class="btn btn-secondary" *ngIf="loginDisplay">View Profile</a> 
   </a>
   <div class="container">
       <router-outlet></router-outlet>
   </div>
   

   Il codice implementa una barra di spostamento in un'app Angular. Visualizza dinamicamente i pulsanti Accedi e Disconnetti in base allo stato di autenticazione utente e include un pulsante Visualizza profilo per gli utenti connessi, migliorando l'interfaccia utente dell'applicazione. I metodi login() e logout() in src/app/app.component.ts vengono chiamati quando i pulsanti vengono selezionati.

2. Aprire il file src/app/app-routing.module.ts e sostituirne il contenuto con il codice seguente.

   // Required for Angular
   import { NgModule } from '@angular/core';
   
   // Required for the Angular routing service
   import { Routes, RouterModule } from '@angular/router';
   
   // Required for the "Profile" page
   import { ProfileComponent } from './profile/profile.component';
   
   // Required for the "Home" page
   import { HomeComponent } from './home/home.component';
   
   // MsalGuard is required to protect routes and require authentication before accessing protected routes
   import { MsalGuard } from '@azure/msal-angular';
   
   // Define the possible routes
   // Specify MsalGuard on routes to be protected
   // '**' denotes a wild card
   const routes: Routes = [
     {
       path: 'profile',
       component: ProfileComponent,
       canActivate: [
         MsalGuard
       ]
     },
     {
       path: '**',
       component: HomeComponent
     }
   ];
   
   // Create an NgModule that contains all the directives for the routes specified above
   @NgModule({
     imports: [RouterModule.forRoot(routes, {
       useHash: true
     })],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }
   

   Il frammento di codice configura il routing in un'applicazione Angular stabilendo i percorsi per i componenti Profilo e Home . Usa MsalGuard per applicare l'autenticazione sul percorso Profile, mentre tutti i percorsi non riconosciuti vengono reindirizzati al componente Home.

3. Aprire il file src/app/home/home.component.ts e sostituirne il contenuto con il codice seguente.

   // Required for Angular
   import { Component, OnInit } from '@angular/core';
   
   // Required for MSAL
   import { MsalBroadcastService, MsalService } from '@azure/msal-angular';
   
   // Required for Angular multi-browser support
   import { EventMessage, EventType, AuthenticationResult } from '@azure/msal-browser';
   
   // Required for RJXS observables
   import { filter } from 'rxjs/operators';
   
   @Component({
     selector: 'app-home',
     templateUrl: './home.component.html'
   })
   export class HomeComponent implements OnInit {
     constructor(
       private authService: MsalService,
       private msalBroadcastService: MsalBroadcastService
     ) { }
   
     // Subscribe to the msalSubject$ observable on the msalBroadcastService
     // This allows the app to consume emitted events from MSAL
     ngOnInit(): void {
       this.msalBroadcastService.msalSubject$
         .pipe(
           filter((msg: EventMessage) => msg.eventType === EventType.LOGIN_SUCCESS),
         )
         .subscribe((result: EventMessage) => {
           const payload = result.payload as AuthenticationResult;
           this.authService.instance.setActiveAccount(payload.account);
         });
     }
   }
   

   Il codice configura un componente Angular denominato HomeComponent che si integra con Microsoft Authentication Library (MSAL). Nell'hook del ngOnInit ciclo di vita, il componente si sottoscrive all'osservabile di msalSubject$, filtrando gli eventi di successo del loginMsalBroadcastService. Quando si verifica un evento di accesso, recupera il risultato dell'autenticazione e imposta l'account attivo in MsalService, consentendo all'applicazione di gestire le sessioni utente.

4. Aprire il file src/app/home/home.component.html e sostituirne il contenuto con il codice seguente.

   <div class="title">
       <h5>
           Welcome to the Microsoft Authentication Library For JavaScript - Angular SPA
       </h5>
       <p >View your data from Microsoft Graph by clicking the "View Profile" link above.</p>
   </div>
   

   Il codice accoglie gli utenti nell'app e chiede loro di visualizzare i dati di Microsoft Graph facendo clic sul collegamento Visualizza profilo .

5. Aprire il file src/main.ts e sostituirne il contenuto con il codice seguente.

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   
   import { AppModule } from './app/app.module';
   
   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

   Il frammento di codice importa platformBrowserDynamic dal modulo dinamico del browser della piattaforma Angular e AppModule dal file del modulo dell'applicazione. Viene quindi usato platformBrowserDynamic() per eseguire il bootstrap dell'oggetto AppModule, inizializzando l'applicazione Angular. Tutti gli errori che si verificano durante il processo di bootstrap vengono rilevati e registrati nella console.

6. Aprire il file src/index.html e sostituirne il contenuto con il codice seguente.

   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="utf-8">
       <title>MSAL For JavaScript - Angular SPA</title>
     </head>
     <body>
       <app-root></app-root>
       <app-redirect></app-redirect>
     </body>
   </html>
   

   Il frammento di codice definisce un documento HTML5 con inglese come lingua e codifica dei caratteri UTF-8. Imposta il titolo su "MSAL per JavaScript - Angular SPA". Il corpo include il <app-root> componente, come punto di ingresso principale, e il <app-redirect> componente per le funzionalità di reindirizzamento.

7. Aprire il file src/styles.css e sostituirne il contenuto con il codice seguente.

   body {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
       'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
       sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
       monospace;
   }
   
   .app {
     text-align: center;
     padding: 8px;
   }
   
   .title{
     text-align: center;
     padding: 18px;
   }
   
   
   .profile{
     text-align: center;
     padding: 18px;
   }
   
   .profileButton{
     display: flex;
     justify-content: center;
     padding: 18px;
   }
   

   Il codice CSS stilizza la pagina Web impostando il tipo di carattere del corpo su uno stack sans-serif moderno, rimuovendo i margini predefiniti e applicando lo smussamento del carattere per migliorare la leggibilità. Centra il testo e aggiunge spaziatura interna alle .appclassi , .titlee .profile , mentre la .profileButton classe usa flexbox per centrarne gli elementi.

Tenant esterno

1. Aprire src/app/app.component.html e sostituire il codice esistente con il frammento di codice seguente.

     <mat-toolbar color="primary">
         <a class="title" href="/">{{ title }}</a>
         <div class="toolbar-spacer"></div>
         <a mat-button [routerLink]="['guarded']">Guarded Component</a>
         <button mat-raised-button *ngIf="!loginDisplay" (click)="login()">Login</button>
         <button mat-raised-button color="accent" *ngIf="loginDisplay" (click)="logout()">Logout</button>
       </mat-toolbar>
       <div class="container">
         <!--This is to avoid reload during acquireTokenSilent() because of hidden iframe -->
         <router-outlet *ngIf="!isIframe"></router-outlet>
       </div>
       <footer *ngIf="loginDisplay">
         <mat-toolbar>
           <div class="footer-text"> How did we do? <a
               href="https://forms.office.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR_ivMYEeUKlEq8CxnMPgdNZUNDlUTTk2NVNYQkZSSjdaTk5KT1o4V1VVNS4u"
               target="_blank"> Share your experience with us!</a>
           </div>
         </mat-toolbar>
       </footer>
   

   Questo frammento di codice aggiunge una barra di spostamento all'applicazione Angular. La barra di spostamento include i pulsanti Titolo e Accesso e Disconnessione che consentono agli utenti di accedere e uscire dall'applicazione.

2. Aprire src/app/app.component.css e sostituire il codice con il frammento di codice seguente.

   .toolbar-spacer {
     flex: 1 1 auto;
   }
   
   a.title {
     color: white;
   }
   
   footer {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     color: white;
     text-align: center;
   }
   
   .footer-text {
     font-size: small;
     text-align: center;
     flex: 1 1 auto;
   }
   

   Questo frammento di codice stile la barra di navigazione e il footer dell'applicazione Angular. Imposta il colore del titolo su bianco, allinea il testo del piè di pagina al centro e regola le dimensioni del testo del piè di pagina.

3. Aprire src/app/app-routing.module.ts e sostituire l'intero contenuto del file con il frammento di codice seguente. Verranno aggiunte delle route ai componenti home e guarded.

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { BrowserUtils } from '@azure/msal-browser';
   import { MsalGuard } from '@azure/msal-angular';
   
   import { HomeComponent } from './home/home.component';
   import { GuardedComponent } from './guarded/guarded.component';
   
   /**
    * MSAL Angular can protect routes in your application
       * using MsalGuard. For more info, visit:
       * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/initialization.md#secure-the-routes-in-your-application
       */
   const routes: Routes = [
       {
       path: 'guarded',
       component: GuardedComponent,
       canActivate: [
           MsalGuard
       ]
       },
       {
       path: '',
       component: HomeComponent,
       },
   ];
   
   @NgModule({
       imports: [
       RouterModule.forRoot(routes, {
           // Don't perform initial navigation in iframes or popups
           initialNavigation:
           !BrowserUtils.isInIframe() && !BrowserUtils.isInPopup()
               ? 'enabledNonBlocking'
               : 'disabled', // Set to enabledBlocking to use Angular Universal
       }),
       ],
       exports: [RouterModule],
   })
   export class AppRoutingModule { }
   

4. Aprire src/styles.css e sostituire il codice esistente con il frammento di codice seguente.

   @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
   html, body { height: 100%; }
   body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   

   Questo frammento di codice importa il tema predefinito Angular Material e imposta l'altezza degli elementi HTML e corpo. Rimuove il margine predefinito e imposta la famiglia di caratteri.

5. Aprire src/app/home/home.component.ts e sostituire il codice esistente con il frammento di codice seguente.

   import { Component, Inject, OnInit } from '@angular/core';
   import { Subject } from 'rxjs';
   import { filter } from 'rxjs/operators';
   
   import { MsalBroadcastService, MsalGuardConfiguration, MsalService, MSAL_GUARD_CONFIG } from '@azure/msal-angular';
   import { AuthenticationResult, InteractionStatus, InteractionType } from '@azure/msal-browser';
   
   import { createClaimsTable } from '../claim-utils';
   
   @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.css'],
   })
   export class HomeComponent implements OnInit {
     loginDisplay = false;
     dataSource: any = [];
     displayedColumns: string[] = ['claim', 'value', 'description'];
   
     private readonly _destroying$ = new Subject<void>();
   
     constructor(
       @Inject(MSAL_GUARD_CONFIG)
       private msalGuardConfig: MsalGuardConfiguration,
       private authService: MsalService,
       private msalBroadcastService: MsalBroadcastService
     ) { }
   
     ngOnInit(): void {
   
       this.msalBroadcastService.inProgress$
         .pipe(
           filter((status: InteractionStatus) => status === InteractionStatus.None)
         )
         .subscribe(() => {
           this.setLoginDisplay();
           this.getClaims(
             this.authService.instance.getActiveAccount()?.idTokenClaims
           );
         });
     }
   
     setLoginDisplay() {
       this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
     }
   
     getClaims(claims: any) {
       if (claims) {
         const claimsTable = createClaimsTable(claims);
         this.dataSource = [...claimsTable];
       }
     }
   
     signUp() {
       if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
         this.authService.loginPopup({
           scopes: [],
           prompt: 'create',
         })
           .subscribe((response: AuthenticationResult) => {
             this.authService.instance.setActiveAccount(response.account);
           });
       } else {
         this.authService.loginRedirect({
           scopes: [],
           prompt: 'create',
         });
       }
   
     }
   
     // unsubscribe to events when component is destroyed
     ngOnDestroy(): void {
       this._destroying$.next(undefined);
       this._destroying$.complete();
     }
   }
   

   Questo frammento di codice definisce la HomeComponent classe , responsabile della gestione della home page dell'applicazione Angular. Il componente si iscrive all'osservabile inProgress$ da MsalBroadcastService per monitorare lo stato di autenticazione dell'applicazione. Quando lo stato di autenticazione cambia, il componente aggiorna il display del login e recupera le informazioni dal token ID dell'account attivo. Il signUp() metodo viene chiamato quando l'utente fa clic sul pulsante Iscrizione , avviando il processo di autenticazione.

6. Aprire src/app/home/home.component.html e sostituire il codice esistente con il frammento di codice seguente. Questo codice definisce gli elementi HTML della home page dell'applicazione.

   <mat-card class="card-section" *ngIf="!loginDisplay">
     <mat-card-title>Angular single-page application built with MSAL Angular</mat-card-title>
     <mat-card-subtitle>Sign in with Microsoft Entra External ID</mat-card-subtitle>
     <mat-card-content>This sample demonstrates how to configure MSAL Angular to sign up, sign in and sign out with Microsoft Entra External ID</mat-card-content>
     <button mat-raised-button color="primary" (click)="signUp()">Sign up</button>
   </mat-card>
   <br>
   <p class="text-center" *ngIf="loginDisplay"> See below the claims in your <strong> ID token </strong>. For more
     information, visit: <span>
       <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens#claims-in-an-id-token">
         docs.microsoft.com </a>
     </span>
   </p>
   <div id="table-container">
     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" *ngIf="loginDisplay">
       <!-- Claim Column -->
       <ng-container matColumnDef="claim">
         <th mat-header-cell *matHeaderCellDef> Claim </th>
         <td mat-cell *matCellDef="let element"> {{element.claim}} </td>
       </ng-container>
       <!-- Value Column -->
       <ng-container matColumnDef="value">
         <th mat-header-cell *matHeaderCellDef> Value </th>
         <td mat-cell *matCellDef="let element"> {{element.value}} </td>
       </ng-container>
       <!-- Value Column -->
       <ng-container matColumnDef="description">
         <th mat-header-cell *matHeaderCellDef> Description </th>
         <td mat-cell *matCellDef="let element"> {{element.description}} </td>
       </ng-container>
       <tr mat-header-row *matHeaderRowDef="displayedColumns sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>
   

   Questo frammento di codice definisce gli elementi HTML della home page dell'applicazione Angular. Include una sezione della scheda con un pulsante Iscrizione per consentire agli utenti di eseguire l'autenticazione con Microsoft Entra External ID.

7. Aprire src/app/home/home.component.css. Sostituire qualsiasi codice esistente con il frammento di codice seguente.

   #table-container {
     height: '100vh';
     overflow: auto;
   }
   
   table {
     margin: 3% auto 1% auto;
     width: 70%;
   }
   
   .mat-row {
     height: auto;
   }
   
   .mat-cell {
     padding: 8px 8px 8px 0;
   }
   
   p {
     text-align: center;
   }
   
   .card-section {
     margin: 10%;
     padding: 5%;
   }
   

   Questo frammento di codice stila gli elementi HTML della pagina iniziale dell'applicazione Angular. Imposta le proprietà height e overflow del contenitore di tabelle, regola il margine e la larghezza della tabella e allinea il testo nell'elemento paragrafo.

Passaggio successivo

Esercitazione: Esercitazione: Estrarre i dati utente con una SPA Angular