Zelfstudie: Aanmelden en afmelden toevoegen aan uw Angular-toepassing met één pagina

Van toepassing op: Workforce-huurders Externe huurders (meer informatie)

Deze zelfstudie is deel 2 van een reeks die laat zien hoe u een Angular-toepassing met één pagina (SPA) bouwt en verificatie toevoegt met behulp van het Microsoft Identity Platform. In deel 1 van deze reekshebt u een Angular SPA gemaakt en initiële configuraties toegevoegd.

In deze handleiding:

• De inlog- en uitlogfunctionaliteit toevoegen

Vereisten

• Voltooiing van de vereisten en stappen in Zelfstudie: Een Angular-toepassing met één pagina maken

Functionaliteit voor aanmelden en afmelden toevoegen aan uw app

In deze sectie voegt u onderdelen toe ter ondersteuning van de functionaliteit voor aanmelden en afmelden in uw Angular-toepassing. Met deze onderdelen kunnen gebruikers hun sessies verifiëren en beheren. U voegt routering toe aan de toepassing om gebruikers naar de juiste onderdelen te leiden op basis van hun verificatiestatus.

Arbeidskracht-huurder

Volg deze stappen om de functionaliteit voor aanmelden en afmelden in te schakelen in uw Angular-toepassing:

1. Open het src/app/app.component.html bestand en vervang de inhoud door de volgende code.

   <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>
   

   De code implementeert een navigatiebalk in een Angular-app. Er worden dynamisch knoppen voor aanmelden en afmelden weergegeven op basis van de gebruikersverificatiestatus en bevat een knop Profiel weergeven voor aangemelde gebruikers, waardoor de gebruikersinterface van de toepassing wordt verbeterd. De login() en logout() methoden in src/app/app.component.ts worden aangeroepen wanneer de knoppen worden geselecteerd.

2. Open het src/app/app-routing.module.ts bestand en vervang de inhoud door de volgende code.

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

   Het codefragment configureert routering in een Angular-toepassing door paden voor de onderdelen Profiel en Start in te stellen. Het gebruikt MsalGuard om verificatie af te dwingen op de Profile route, terwijl alle niet-overeenkomende paden worden omgeleid naar het Home component.

3. Open het src/app/home/home.component.ts bestand en vervang de inhoud door de volgende code.

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

   Met de code wordt een Angular-onderdeel HomeComponent ingesteld dat wordt geïntegreerd met de Microsoft Authentication Library (MSAL). In de ngOnInit levenscyclushook abonneert de component zich op de msalSubject$ observable van MsalBroadcastService, filterend op succesvolle login-gebeurtenissen. Wanneer er een aanmeldings gebeurtenis optreedt, wordt het verificatieresultaat opgehaald en wordt het actieve account ingesteld in de MsalServicetoepassing, zodat de toepassing gebruikerssessies kan beheren.

4. Open het src/app/home/home.component.html bestand en vervang de inhoud door de volgende code.

   <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>
   

   De code verwelkomt gebruikers in de app en vraagt hen om hun Microsoft Graph-gegevens weer te geven door op de koppeling Profiel weergeven te klikken.

5. Open het src/main.ts bestand en vervang de inhoud door de volgende code.

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

   Het codefragment wordt geïmporteerd platformBrowserDynamic uit de dynamische module van de platformbrowser van Angular en AppModule uit het modulebestand van de toepassing. Vervolgens wordt platformBrowserDynamic() gebruikt om de Angular-toepassing te initialiseren en op te starten met AppModule. Eventuele fouten die optreden tijdens het bootstrapproces, worden opgevangen en geregistreerd bij de console.

6. Open het src/index.html bestand en vervang de inhoud door de volgende code.

   <!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>
   

   Het codefragment definieert een HTML5-document met Engels als taal en UTF-8-tekencodering. De titel wordt ingesteld op 'MSAL for JavaScript - Angular SPA'. De hoofdtekst bevat het <app-root> onderdeel als het hoofdinvoerpunt en het <app-redirect>-onderdeel voor omleidingsfunctionaliteiten.

7. Open het src/styles.css bestand en vervang de inhoud door de volgende code.

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

   De CSS-code past de webpagina aan door het hoofdlettertype in te stellen op een moderne sans-serif-stack, standaardmarges te verwijderen en lettertype glad te maken voor verbeterde leesbaarheid. Het centreert tekst en voegt opvulling toe aan de .app, .titleen .profile klassen, terwijl de .profileButton klasse flexbox gebruikt om de elementen te centreren.

externe huurder

1. Open src/app/app.component.html en vervang de bestaande code door het volgende codefragment.

     <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>
   

   Met dit codefragment wordt een navigatiebalk toegevoegd aan de Angular-toepassing. De navigatiebalk bevat een titel en aanmeldings- en knoppen voor afmelden waarmee gebruikers zich kunnen aanmelden en afmelden bij de toepassing.

2. Open src/app/app.component.css en vervang de code door het volgende codefragment.

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

   Met dit codefragment wordt de navigatiebalk en voettekst van de Angular-toepassing weergegeven. Hiermee wordt de kleur van de titel ingesteld op wit, wordt de voettekst uitgelijnd op het midden en wordt de grootte van de voettekst aangepast.

3. Open src/app/app-routing.module.ts en vervang de volledige inhoud van het bestand door het volgende fragment. Hiermee worden routes toegevoegd aan de home- en guarded-onderdelen.

   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. Open src/styles.css en vervang de bestaande code door het volgende codefragment.

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

   Met dit codefragment wordt het vooraf samengestelde thema Angular Material geïmporteerd en wordt de hoogte van de HTML- en hoofdtekstelementen ingesteld. Hiermee verwijdert u de standaardmarge en stelt u de lettertypefamilie in.

5. Open src/app/home/home.component.ts en vervang de bestaande code door het volgende codefragment.

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

   Dit codefragment definieert de HomeComponent-klasse, die verantwoordelijk is voor het beheren van de startpagina van de Angular-toepassing. Het onderdeel abonneert zich op de inProgress$ observable vanuit MsalBroadcastService om de authenticatiestatus van de toepassing te controleren. Wanneer de verificatiestatus wordt gewijzigd, wordt de aanmeldingsweergave bijgewerkt en worden de claims opgehaald uit het id-token van het actieve account. De methode signUp() wordt aangeroepen wanneer de gebruiker op de knop Registreren klikt, waardoor het verificatieproces wordt gestart.

6. Open src/app/home/home.component.html en vervang de bestaande code door het volgende codefragment. Deze code definieert de HTML-elementen van de startpagina van de toepassing.

   <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>
   

   Dit codefragment definieert de HTML-elementen van de startpagina van de Angular-toepassing. Het bevat een kaartsectie met een Registreren-knop waarmee gebruikers zich kunnen verifiëren met Microsoft Entra External ID.

7. Open src/app/home/home.component.css. Vervang bestaande code door het volgende codefragment.

   #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%;
   }
   

   Met dit codefragment worden de HTML-elementen van de startpagina van de Angular-toepassing weergegeven. Hiermee stelt u de hoogte- en overloopeigenschappen van de tabelcontainer in, past u de marge en breedte van de tabel aan en wordt de tekst in het alinea-element uitgelijnd.

Volgende stap

Tutorial: Tutorial: Gebruikersgegevens extraheren met een Angular SPA