Lernprogramm: Hinzufügen von Anmelden und Abmelden in Ihrer Angular-Single-Page-Webanwendung

Gilt für: Mitarbeitermandanten Externe Mandanten (weitere Informationen)

Dieses Lernprogramm ist Teil 2 einer Reihe, die das Erstellen einer Einzelseitenanwendung (Single Page Application, SPA) von Angular veranschaulicht und die Authentifizierung mithilfe der Microsoft Identity Platform hinzufügt. In Teil 1 dieser Reihe haben Sie einen Angular SPA erstellt und erste Konfigurationen hinzugefügt.

In diesem Tutorial führen Sie Folgendes durch:

• An- und Abmeldung hinzufügen

Voraussetzungen

• Abschluss der Voraussetzungen und Schritte im Lernprogramm: Erstellen einer Angular-Einzelseitenanwendung

Hinzufügen von Anmelde- und Abmeldefunktionen zu Ihrer App

In diesem Abschnitt fügen Sie Komponenten hinzu, um die Anmelde- und Abmeldefunktionalität in Ihrer Angular-Anwendung zu unterstützen. Mit diesen Komponenten können Benutzer ihre Sitzungen authentifizieren und verwalten. Sie fügen der Anwendung Das Routing hinzu, um Benutzer basierend auf ihrem Authentifizierungsstatus zu den entsprechenden Komponenten zu leiten.

Mandant für Mitarbeitende

Führen Sie die folgenden Schritte aus, um die Anmelde- und Abmeldefunktion in Ihrer Angular-Anwendung zu aktivieren:

1. Öffnen Sie die Datei src/app/app.component.html, und ersetzen Sie den Inhalt durch den folgenden 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>
   

   Der Code implementiert eine Navigationsleiste in einer Angular-App. Es zeigt dynamisch die Schaltflächen Anmelden und Abmelden basierend auf dem Benutzerauthentifizierungsstatus an und enthält eine Schaltfläche Profil anzeigen für angemeldete Benutzer, wodurch die Benutzeroberfläche der Anwendung verbessert wird. Die Methoden login() und logout() in src/app/app.component.ts werden aufgerufen, wenn die Schaltflächen ausgewählt werden.

2. Öffnen Sie die Datei src/app/app-routing.module.ts, und ersetzen Sie den Inhalt durch den folgenden 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 { }
   

   Der Codeausschnitt konfiguriert das Routing in einer Angular-Anwendung durch Einrichten von Pfaden für die Komponenten Profil und Startseite. Er verwendet MsalGuard, um die Authentifizierung für die Profil-Route zu erzwingen, während alle nicht übereinstimmenden Pfade zur Komponente Startseite umgeleitet werden.

3. Öffnen Sie die Datei src/app/home/home.component.ts, und ersetzen Sie den Inhalt durch den folgenden 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);
         });
     }
   }
   

   Der Code richtet eine Angular-Komponente namens HomeComponent ein, die in die Microsoft Authentication Library (MSAL) integriert wird. Im ngOnInit-Lebenszyklushook abonniert die Komponente das Observable-Element msalSubject$ von MsalBroadcastService und filtert nach erfolgreichen Anmeldeereignissen. Wenn ein Anmeldeereignis auftritt, ruft er das Authentifizierungsergebnis ab und legt das aktive Konto im MsalService fest, sodass die Anwendung Benutzersitzungen verwalten kann.

4. Öffnen Sie die Datei src/app/home/home.component.html, und ersetzen Sie den Inhalt durch den folgenden 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>
   

   Der Code begrüßt Benutzer in der App und fordert sie auf, ihre Microsoft Graph-Daten anzuzeigen, indem Sie auf den Link Profil anzeigen klicken.

5. Öffnen Sie die Datei src/main.ts, und ersetzen Sie den Inhalt durch den folgenden Code.

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

   Der Codeausschnitt importiert platformBrowserDynamic aus dem dynamischen Angular-Plattformbrowsermodul und AppModule aus der Moduldatei der Anwendung. Anschließend wird platformBrowserDynamic() verwendet, um das AppModule zu bootstrapen und die Angular-Anwendung zu initialisieren. Alle Fehler, die während des Bootstrap-Prozesses auftreten, werden abgefangen und in der Konsole protokolliert.

6. Öffnen Sie die Datei src/index.html, und ersetzen Sie den Inhalt durch den folgenden 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>
   

   Der Codeausschnitt definiert ein HTML5-Dokument mit Englisch als Sprache und UTF-8-Zeichencodierung. Er setzt den Titel auf "MSAL For JavaScript - Angular SPA." Der Hauptteil enthält die <app-root> Komponente als Haupteinstiegspunkt und die <app-redirect> Komponente für Umleitungsfunktionen.

7. Öffnen Sie die Datei src/styles.css, und ersetzen Sie den Inhalt durch den folgenden 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;
   }
   

   Der CSS-Code formatiert die Webseite durch Festlegen der Textkörperschriftart auf einen modernen sans-serif-Stapel, Entfernen von Standardrändern und Anwenden der Schriftglättung zur verbesserten Lesbarkeit. Er zentriert Text und fügt Abstand zu den Klassen .app, .title und .profile hinzu, während die Klasse .profileButton Flexbox verwendet, um die Elemente zu zentrieren.

Externer Mieter

1. Öffnen Sie src/app/app.component.html , und ersetzen Sie den vorhandenen Code durch den folgenden Codeausschnitt.

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

   Dieser Codeausschnitt fügt der Angular-Anwendung eine Navigationsleiste hinzu. Die Navigationsleiste enthält eine Titel- und Anmelde- und Abmeldeschaltfläche , mit der benutzer sich bei der Anwendung anmelden und abmelden können.

2. Öffnen Sie "src/app/app.component.css ", und ersetzen Sie den Code durch den folgenden Codeausschnitt.

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

   Dieser Codeausschnitt formatiert die Navigationsleiste und Fußzeile der Angular-Anwendung. Sie legt die Farbe des Titels auf Weiß fest, richtet den Fußzeilentext in der Mitte aus und passt die Größe des Fußzeilentexts an.

3. Öffnen Sie "src/app/app-routing.module.ts ", und ersetzen Sie den gesamten Inhalt der Datei durch den folgenden Codeausschnitt. Dadurch werden Routen zu den home Und guarded Komponenten hinzugefügt.

   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. Öffnen Sie src/styles.css , und ersetzen Sie den vorhandenen Code durch den folgenden Codeausschnitt.

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

   Dieser Codeausschnitt importiert das vordefinierte Angular Material-Design und legt die Höhe der HTML- und Textelemente fest. Er entfernt den Standardrand und legt die Schriftartfamilie fest.

5. Öffnen Sie src/app/home/home.component.ts , und ersetzen Sie den vorhandenen Code durch den folgenden Codeausschnitt.

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

   Dieser Codeausschnitt definiert die HomeComponent Klasse, die für die Verwaltung der Startseite der Angular-Anwendung verantwortlich ist. Die Komponente abonniert das Observable-Element inProgress$ von MsalBroadcastService, um den Authentifizierungsstatus der Anwendung zu überwachen. Wenn sich der Authentifizierungsstatus ändert, aktualisiert die Komponente die Anmeldeanzeige und ruft die Ansprüche aus dem ID-Token des aktiven Kontos ab. Die signUp() Methode wird aufgerufen, wenn der Benutzer auf die Schaltfläche " Registrieren " klickt und den Authentifizierungsprozess initiiert.

6. Öffnen Sie "src/app/home/home.component.html ", und ersetzen Sie den vorhandenen Code durch den folgenden Codeausschnitt. Dieser Code definiert die HTML-Elemente der Startseite der Anwendung.

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

   Dieser Codeausschnitt definiert die HTML-Elemente der Startseite der Angular-Anwendung. Sie enthält einen Kartenabschnitt mit einer Schaltfläche " Registrieren ", über die Benutzer sich mit der externen Microsoft Entra-ID authentifizieren können.

7. Öffnen Sie src/app/home/home.component.css. Ersetzen Sie vorhandenen Code durch den folgenden Codeausschnitt.

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

   Dieser Codeausschnitt formatiert die HTML-Elemente der Startseite der Angular-Anwendung. Sie legt die Höhen- und Überlaufeigenschaften des Tabellencontainers fest, passt den Rand und die Breite der Tabelle an und richtet den Text im Absatzelement aus.

Nächster Schritt

Tutorial: Extrahieren von Benutzerdaten mit einer Angular-SPA