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

Ce tutoriel est la quatrième partie d’une série qui présente la construction d’une application monopage (SPA) Angular, qui utilise la plateforme d’identités Microsoft pour l’authentification. Dans ce tutoriel, vous appelez l’API Microsoft Graph à partir de votre application monopage Angular.

Dans ce tutoriel :

• Créer l’appel d’API à Microsoft Graph
• Test de l’application

Prérequis

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

Créer l’appel d’API à Microsoft Graph

Pour configurer votre application Angular afin d’interagir avec l’API Microsoft Graph, effectuez ces étapes :

1. Ouvrez le fichier src/app/profile/profile.component.ts et remplacez son contenu par l’extrait de code suivant :

   // Required for Angular
   import { Component, OnInit } from '@angular/core';
   
   // Required for the HTTP GET request to Graph
   import { HttpClient } from '@angular/common/http';
   
   type ProfileType = {
     businessPhones?: string,
     displayName?: string,
     givenName?: string,
     jobTitle?: string,
     mail?: string,
     mobilePhone?: string,
     officeLocation?: string,
     preferredLanguage?: string,
     surname?: string,
     userPrincipalName?: string,
     id?: string
   }
   
   @Component({
     selector: 'app-profile',
     templateUrl: './profile.component.html'
   })
   export class ProfileComponent implements OnInit {
     profile!: ProfileType;
     tokenExpiration!: string;
   
     constructor(
       private http: HttpClient
     ) { }
   
     // When the page loads, perform an HTTP GET request from the Graph /me endpoint
     ngOnInit() {
       this.http.get('https://graph.microsoft.com/v1.0/me')
         .subscribe(profile => {
           this.profile = profile;
         });
   
       this.tokenExpiration = localStorage.getItem('tokenExpiration')!;
     }
   }
   

   Le ProfileComponent dans Angular extrait les données de profil utilisateur à partir du point de terminaison /me de Microsoft Graph. Il définit ProfileType afin de structurer des propriétés comme displayName et mail. Dans ngOnInit, il utilise HttpClient pour envoyer une requête GET, en affectant la réponse à profile. Il récupère et stocke également l’heure d’expiration du jeton à partir de localStorage dans tokenExpiration.

2. Ouvrez le fichier src/app/profile/profile.component.html et remplacez son contenu par l’extrait de code suivant :

   <div class="profile">
       <p><strong>Business Phones:</strong> {{profile?.businessPhones}}</p>
       <p><strong>Display Name:</strong> {{profile?.displayName}}</p>
       <p><strong>Given Name:</strong> {{profile?.givenName}}</p>
       <p><strong>Job Title:</strong> {{profile?.jobTitle}}</p>
       <p><strong>Mail:</strong> {{profile?.mail}}</p>
       <p><strong>Mobile Phone:</strong> {{profile?.mobilePhone}}</p>
       <p><strong>Office Location:</strong> {{profile?.officeLocation}}</p>
       <p><strong>Preferred Language:</strong> {{profile?.preferredLanguage}}</p>
       <p><strong>Surname:</strong> {{profile?.surname}}</p>
       <p><strong>User Principal Name:</strong> {{profile?.userPrincipalName}}</p>
       <p><strong>Profile Id:</strong> {{profile?.id}}</p>
       <br><br>
       <p><strong>Token Expiration:</strong> {{tokenExpiration}}</p>
       <br><br>
       <p>Refreshing this page will continue to use the cached access token until it nears expiration, at which point a new access token will be requested.</p>
   </div>
   

   Ce code définit un modèle HTML qui affiche les informations de profil utilisateur, en utilisant la syntaxe d’interpolation d’Angular pour lier des propriétés à partir de l’objet profile (par exemple, businessPhones, displayName, jobTitle). Il affiche également la valeur de tokenExpiration et inclut une note indiquant que l’actualisation de la page utilisera le jeton d’accès mis en cache jusqu’à son expiration, après quoi un nouveau jeton sera demandé.

Test de l’application

Pour tester l’application, effectuez les étapes suivantes :

1. Exécutez l’application Angular en exécutant la commande suivante dans le terminal :

   ng serve --open
   

2. Sélectionnez le bouton Se connecter pour vous authentifier auprès de votre locataire Microsoft Entra.

3. Une fois connecté, sélectionnez le lien Afficher le profil pour accéder à la page Profil. Vérifiez que les informations de profil utilisateur sont affichées, notamment le nom de l’utilisateur, son e-mail, son poste et d’autres détails.

   

4. Sélectionnez le bouton Se déconnecter pour vous déconnecter de l’application.

Étapes suivantes

Découvrez comment utiliser la plateforme d’identités Microsoft en essayant la série de tutoriels suivante sur la création d’une API web.

Tutoriel : Inscrire une API web auprès de la plateforme d’identités Microsoft