Zelfstudie: Gebruiker aanmelden in Angular-toepassing met één pagina - Microsoft identity platform

Artikel
11/12/2024

Deze zelfstudie is deel 3 van een reeks die laat zien hoe u een Angular-app met één pagina (SPA) bouwt die gebruikmaakt van het Microsoft Identity Platform voor verificatie. In deze zelfstudie voegt u aanmeldings- en afmeldervaringen toe aan uw Angular SPA.

In deze zelfstudie:

Voeg de functionaliteit voor aanmelden en afmelden toe aan uw app.

Vereisten

Zelfstudie: Een Angular-toepassing met één pagina maken

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

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 worden src/app/app.component.ts aangeroepen wanneer de knoppen zijn geselecteerd.

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 profielroute , terwijl alle niet-overeenkomende paden worden omgeleid naar het basisonderdeel .

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 het onderdeel zich op het msalSubject$ waarneembare van MsalBroadcastService, filteren op geslaagde aanmeldingsevenementen. 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.

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.
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 het gebruikt platformBrowserDynamic() om de AppModuleAngular-toepassing te bootstrapen. Eventuele fouten die optreden tijdens het bootstrapproces, worden opgevangen en geregistreerd bij de console.
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 omleidingsfuncties.

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.

Volgende stappen

Zelfstudie: Een API aanroepen vanuit een Angular-app met één pagina

Delen via

Vereisten

Volgende stappen

Feedback

Aanvullende resources

Delen via

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

Vereisten

Functionaliteit voor aanmelden en afmelden toevoegen aan uw app

Volgende stappen

Feedback

Aanvullende resources