Tutoriel : Connecter un utilisateur à une application monopage Angular - Microsoft identity platform

Article
11/13/2024

Ce tutoriel est la troisième partie d’une série qui présente la création d’une application monopage (SPA) Angular qui utilise la plateforme d’identités Microsoft pour l’authentification. Dans ce tutoriel, vous allez ajouter des expériences de connexion et de déconnexion à votre SPA Angular.

Dans ce tutoriel, vous allez :

Ajouter des fonctionnalités de connexion et de déconnexion à votre application.

Prérequis

Tutoriel : Créer une application monopage Angular

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

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.

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.

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.

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

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.

Étapes suivantes

Tutoriel : Appeler une API à partir d’une application monopage Angular

Partager via

Prérequis

Étapes suivantes

Commentaires

Ressources supplémentaires

Partager via

Tutoriel : Ajouter la connexion et la déconnexion à votre application monopage Angular

Prérequis

Ajoutez des fonctionnalités de connexion et de déconnexion à votre application

Étapes suivantes

Commentaires

Ressources supplémentaires