Tutoriel : Ajouter l'authentification et la déconnexion à votre application à une seule page Angular

Pour activer la fonctionnalité de connexion et de déconnexion dans votre application Angular, procédez comme suit :

1. Ouvrez le fichier src/app/app.component.html et remplacez son contenu par le code suivant.

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

   Le code implémente une barre de navigation dans une application Angular. Il affiche dynamiquement les boutons Connexion et Déconnexion en fonction de l’état d’authentification utilisateur et inclut un bouton Afficher le profil pour les utilisateurs connectés, améliorant l’interface utilisateur de l’application. Les méthodes login() et logout() dans src/app/app.component.ts sont appelées lorsque les boutons sont sélectionnés.

2. Ouvrez le fichier src/app/app-routing.module.ts et remplacez son contenu par le code suivant.

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

   L’extrait de code configure le routage dans une application Angular en établissant des chemins d’accès aux composants Profil et Accueil. Il utilise MsalGuard pour appliquer l’authentification sur l’itinéraire Profil, tandis que tous les chemins d’accès non correspondants redirigent vers le composant Accueil.

3. Ouvrez le fichier src/app/home/home.component.ts et remplacez son contenu par le code suivant.

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

   Le code configure un composant Angular appelé HomeComponent qui s’intègre à la bibliothèque d’authentification Microsoft (MSAL). Dans le hook de cycle de vie ngOnInit, le composant s’abonne au msalSubject$ observable à partir de MsalBroadcastService, en filtrant les événements de réussite de connexion. Lorsqu’un événement de connexion se produit, il récupère le résultat d’authentification et définit le compte actif dans le MsalService, ce qui permet à l’application de gérer les sessions utilisateur.

4. Ouvrez le fichier src/app/home/home.component.html et remplacez son contenu par le code suivant.

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

   Le code accueille les utilisateurs dans l’application et les invite à afficher leurs données Microsoft Graph en cliquant sur le lien Afficher le profil.

5. Ouvrez le fichier src/main.ts et remplacez son contenu par le code suivant.

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

   L’extrait de code importe platformBrowserDynamic depuis le module dynamique du navigateur de la plateforme Angular et AppModule depuis le fichier module de l’application. Il utilise ensuite platformBrowserDynamic() pour démarrer le AppModule, initialisant l’application Angular. Toutes les erreurs qui se produisent pendant le processus de démarrage sont interceptées et enregistrées dans la console.

6. Ouvrez le fichier src/index.html et remplacez son contenu par le code suivant.

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

   L’extrait de code définit un document HTML5 avec l’anglais comme langue et un codage de caractères UTF-8. Il définit le titre sur « MSAL For JavaScript : Angular SPA ». Le corps inclut le composant <app-root> comme point d’entrée principal et le composant <app-redirect> pour les fonctionnalités de redirection.

7. Ouvrez le fichier src/styles.css et remplacez son contenu par le code suivant.

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

   Le code CSS met en forme la page web en définissant la police du corps sur une pile sans serif moderne, en supprimant les marges par défaut et en appliquant un lissage de la police pour améliorer la lisibilité. Il centre le texte et ajoute une marge intérieure aux classes .app, .title et .profile, tandis que la classe .profileButton utilise Flexbox pour centrer ses éléments.

1. Ouvrez src/app/app.component.html et remplacez le code existant par l’extrait de code suivant.

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

   Cet extrait de code ajoute une barre de navigation à l’application Angular. La barre de navigation inclut un titre et des boutons Connexion et Déconnexion qui permettent aux utilisateurs de se connecter et de sortir de l’application.

2. Ouvrez src/app/app.component.css et remplacez le code par l’extrait de code suivant.

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

   Cet extrait de code styles la barre de navigation et le pied de page de l’application Angular. Il définit la couleur du titre sur blanc, aligne le texte du pied de page au centre et ajuste la taille du texte du pied de page.

3. Ouvrez src/app/app-routing.module.ts et remplacez l’intégralité du contenu du fichier par l’extrait de code suivant. Cela ajoutera des itinéraires aux composants home et guarded.

   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. Ouvrez src/styles.css et remplacez le code existant par l’extrait de code suivant.

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

   Cet extrait de code importe le thème prédéfini Angular Material et définit la hauteur des éléments HTML et corps. Elle supprime la marge par défaut et définit la famille de polices.

5. Ouvrez src/app/home/home.component.ts et remplacez le code existant par l’extrait de code suivant.

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

   Cet extrait de code définit la HomeComponent classe, qui est responsable de la gestion de la page d’accueil de l’application Angular. Le composant s’abonne à l’observable inProgress$ depuis MsalBroadcastService pour surveiller l’état d’authentification de l’application. Lorsque l’état de l’authentification change, le composant met à jour l’affichage de connexion et récupère les revendications à partir du jeton d’ID du compte actif. La signUp() méthode est appelée lorsque l’utilisateur clique sur le bouton Inscription , en lançant le processus d’authentification.

6. Ouvrez src/app/home/home.component.html et remplacez le code existant par l’extrait de code suivant. Ce code définit les éléments HTML de la page d’accueil de l’application.

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

   Cet extrait de code définit les éléments HTML de la page d’accueil de l’application Angular. Il inclut une section de carte avec un bouton d’inscription pour que les utilisateurs s’authentifient avec l’ID externe Microsoft Entra.

7. Ouvrez src/app/home/home.component.css. Remplacez tout code existant par l’extrait de code suivant.

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

   Cet extrait de code styles les éléments HTML de la page d’accueil de l’application Angular. Il définit les propriétés de hauteur et de dépassement de capacité du conteneur de table, ajuste la marge et la largeur du tableau et aligne le texte dans l’élément de paragraphe.