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

Dieses Tutorial ist Teil 3 einer Reihe, in der das Erstellen einer Single-Page-Webanwendung (SPA) in Angular veranschaulicht wird, die die Microsoft Identity Platform zur Authentifizierung verwendet. In diesem Lernprogramm fügen Sie Anmelde- und Abmeldefunktionen zu Ihrer Angular-SPA hinzu.

In diesem Tutorial wird Folgendes durchgeführt:

Voraussetzungen

• Tutorial: Erstellen einer Angular-Single-Page-Webanwendung

Hinzufügen von Anmelde- und Abmeldefunktionen zu Ihrer App

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-Lebenszyklus-Hook abonniert die Komponente die msalSubject$ beobachtbar von MsalBroadcastService, die nach Anmeldeerfolgsereignissen filtert. 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 starten, wobei die Angular-Anwendung initialisiert wird. 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. Der Titel wird auf „MSAL For Javascript - Angular SPA” festgelegt. Der Text 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 serifenlosen 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.

Nächste Schritte