Návod: Přidání přihlášení a odhlášení do vaší jednostránkové aplikace Angular

Platí pro: Tenanti pracovních sil Externí tenanti (další informace)

Tento kurz je druhou částí série, která ukazuje vytvoření jednostránkové aplikace Angular (SPA) a přidání ověřování pomocí platformy Microsoft Identity Platform. V 1. části této sériejste vytvořili Angular SPA a přidali jste počáteční konfigurace.

V tomto kurzu se naučíte:

• Přidejte přihlášení a odhlášení

Požadavky

• Dokončení požadavků a kroků v kurzu : Vytvoření jednostrákové aplikace Angular

Přidání funkce přihlášení a odhlášení do aplikace

V této části přidáte komponenty pro podporu funkcí přihlašování a odhlášení v aplikaci Angular. Tyto komponenty umožňují uživatelům ověřovat a spravovat relace. Do aplikace přidáte směrování, které uživatele nasměruje na příslušné komponenty na základě jejich stavu ověřování.

Nájemce pracovní síly

Pokud chcete ve své aplikaci Angular povolit funkci přihlášení a odhlášení, postupujte takto:

1. src/app/app.component.html Otevřete soubor a nahraďte obsah následujícím kódem.

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

   Kód implementuje navigační panel v aplikaci Angular. Dynamicky zobrazuje tlačítka Přihlásit se a Odhlásit se na základě stavu ověřování uživatele a obsahuje tlačítko Zobrazit profil pro přihlášené uživatele a vylepšuje uživatelské rozhraní aplikace. Metody login() a logout() v src/app/app.component.ts jsou volány, když jsou tlačítka vybrána.

2. src/app/app-routing.module.ts Otevřete soubor a nahraďte obsah následujícím kódem.

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

   Fragment kódu konfiguruje směrování v aplikaci Angular vytvořením cest pro součásti Profile a Home . Používá MsalGuard k vynucení ověřování na trase Profil, zatímco všechny nesouladné cesty jsou přesměrovány na komponentu Domov.

3. src/app/home/home.component.ts Otevřete soubor a nahraďte obsah následujícím kódem.

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

   Kód nastaví komponentu Angular, HomeComponent která se integruje s knihovnou MSAL (Microsoft Authentication Library). ngOnInit V háku životního cyklu se komponenta přihlásí k odběru msalSubject$ pozorovatelných událostí z MsalBroadcastService, filtrování událostí úspěšného přihlášení. Když dojde k události přihlášení, načte výsledek ověřování a nastaví aktivní účet v aplikaciMsalService, čímž umožní aplikaci spravovat uživatelské relace.

4. src/app/home/home.component.html Otevřete soubor a nahraďte obsah následujícím kódem.

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

   Kód vítá uživatele v aplikaci a vyzve je k zobrazení dat Microsoft Graphu kliknutím na odkaz Zobrazit profil .

5. src/main.ts Otevřete soubor a nahraďte obsah následujícím kódem.

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

   Fragment kódu importuje platformBrowserDynamic z dynamického modulu platformy prohlížeče Angular a AppModule ze souboru modulu aplikace. Pak se použije platformBrowserDynamic() k zavedení AppModule, čímž se inicializuje aplikace Angular. Všechny chyby, ke kterým dojde během procesu bootstrap, se zachytí a zaprotokolují do konzoly.

6. src/index.html Otevřete soubor a nahraďte obsah následujícím kódem.

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

   Fragment kódu definuje dokument HTML5 s angličtinou jako jazyk a kódování znaků UTF-8. Nastaví název na "MSAL For JavaScript - Angular SPA." Tělo obsahuje komponentu <app-root> jako hlavní vstupní bod a komponentu <app-redirect> s funkcemi pro přesměrování.

7. src/styles.css Otevřete soubor a nahraďte obsah následujícím kódem.

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

   CSS kód stylizuje webovou stránku nastavením základního písma na moderní sadu bezpatkových písem, odstraněním výchozích okrajů a použitím vyhlazování písma pro lepší čitelnost. Zacentruje text a přidává odsazení do .app, .title a .profile tříd, zatímco .profileButton třída používá flexbox k vystředění svých prvků.

Externí klient

1. Otevřete src/app/app.component.html a nahraďte stávající kód následujícím fragmentem kódu.

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

   Tento fragment kódu přidá navigační panel do aplikace Angular. Navigační panel obsahuje nadpis a tlačítka Přihlášení a Odhlášení, která uživatelům umožňují přihlásit se a odhlásit se z aplikace.

2. Otevřete src,app/app.component.css a nahraďte kód následujícím fragmentem kódu.

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

   Tento fragment kódu styluje navigační panel a zápatí aplikace Angular. Nastaví barvu názvu na bílou, zarovná text zápatí na střed a upraví velikost textu zápatí.

3. Otevřete src,app/app-routing.module.ts a nahraďte celý obsah souboru následujícím fragmentem kódu. Tím se do komponent home a guarded přidají trasy.

   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. Otevřete src/styles.css a nahraďte stávající kód následujícím fragmentem kódu.

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

   Tento fragment kódu importuje předem připravený motiv Angular Material a nastaví výšku elementů HTML a těla. Odebere výchozí okraj a nastaví rodinu písem.

5. Otevřete src/app/home/home.component.ts a nahraďte stávající kód následujícím fragmentem kódu.

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

   Tento fragment kódu definuje třídu HomeComponent, která zodpovídá za správu domovské stránky aplikace Angular. Komponenta se přihlásí k odběru pozorovatelného prvku inProgress$ z MsalBroadcastService, aby sledovala stav ověřování aplikace. Když se stav ověřování změní, komponenta aktualizuje zobrazení přihlášení a načte deklarace identity z tokenu ID aktivního účtu. Metoda signUp() se volá, když uživatel klikne na tlačítko Zaregistrovat se a zahájí proces ověřování.

6. Otevřete src,app/home/home.component.html a nahraďte stávající kód následujícím fragmentem kódu. Tento kód definuje prvky HTML domovské stránky aplikace.

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

   Tento fragment kódu definuje prvky HTML domovské stránky aplikace Angular. Obsahuje oddíl karty s tlačítkem Zaregistrovat se, aby se uživatelé mohli ověřit pomocí externího ID Microsoft Entra.

7. Otevřete src/app/home/home.component.css. Nahraďte veškerý existující kód následujícím fragmentem kódu.

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

   Tento fragment kódu styluje prvky HTML domovské stránky aplikace Angular. Nastaví vlastnosti výšky a přetečení kontejneru tabulky, upraví okraj a šířku tabulky a zarovná text v elementu odstavce.

Další krok

Tutorial: Extrakce uživatelských dat pomocí Angular SPA