Exercice – Récupérer un jeton d’accès à l’aide de MSAL - Training

10 minutes

Il est temps de créer quelque chose en appliquant tous les concepts appris jusqu’à ce stade.

Dans cet exercice, vous allez configurer votre propre application. L’application appellera Microsoft Graph pour obtenir les informations de profil d’un utilisateur connecté.

Configurer l’application

Cet exercice vous permet de prendre en main l’exécution d’une application qui connecte un utilisateur à Azure Active Directory (Azure AD), puis appelle Microsoft Graph. Vous allez accéder à un référentiel GitHub, puis configurer l’application pour qu’elle s’exécute localement sur votre machine.

Ouvrez une console sur votre ordinateur et accédez au dossier dans lequel vous souhaitez enregistrer l’application.
Pour obtenir le code source, consultez le Référentiel GitHub et choisissez l’une des options suivantes :
- Si vous utilisez Git, clonez le projet avec la commande git clone :
```
git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
```
- Si vous n’utilisez pas Git, sélectionnez le bouton Code, suivi de Télécharger le fichier ZIP. Extrayez le fichier *.zip sur votre ordinateur.
Ouvrez le dossier racine du projet téléchargé ou cloné, mslearn-retrieve-m365-data-with-msgraph-quickstart, dans votre éditeur favori.

L’application contient les fichiers suivants :
- index.html : définit l’interface utilisateur que l’utilisateur voit lorsqu’il accède au site web. Il charge le script Bibliothèque d’authentification Microsoft (MSAL) et les scripts d’application personnalisés. Il permet également aux utilisateurs de se connecter et affiche leur nom après leur connexion.
- auth.js : définit la configuration MSAL pour associer l’application à Azure AD. Il connecte également les utilisateurs à l’application et gère la récupération d’un jeton d’accès que Microsoft Graph peut utiliser.
- graph.js : appelle Microsoft 365 pour accéder au profil /me connecté. Il s’appuie sur le fichier auth.js pour récupérer le jeton d’accès utilisé pour l’appel de l’API Microsoft Graph.
- ui.js : gère les éléments de l’interface utilisateur définis dans index.html.
Ouvrez le fichier auth.js et recherchez la constante msalConfig:
```
const msalConfig = {
    auth: { .. }
}
```
Remplacez la valeur de la clientId propriété par la valeur d’ID d’application (client) copiée de l’application Azure AD (spa-aad-app) que vous avez inscrite précédemment. Vous trouverez cette valeur sur la page de présentation de l’application Azure AD (spa-aad-app).
Dans le même fichier auth.js , recherchez la msalConfig.auth.authority propriété . Remplacez la valeur <your directory ID here> par la valeur de l’ID d’annuaire (client) de l’application Azure AD (spa-aad-app) enregistrée précédemment. Vous trouverez cette valeur sur la page de présentation de l’application Azure AD (spa-aad-app).

La constante msalConfig doit ressembler au code suivant, avec les ID uniques de votre locataire Azure AD et de l’application inscrite :
```
const msalConfig = {
  auth: {
    clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
    authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
    redirectUri: 'http://localhost:8080'
  }
};
```
Maintenant que vous avez ajouté les ID Azure AD appropriés dans auth.js, prenez quelques instants pour explorer le code dans le fichier. Notez qu’il contient les fonctions suivantes :
- signIn() : connecte l’utilisateur.
- getToken() : gère l’obtention d’un jeton d’accès qui peur être utilisé par Microsoft Graph.
Ouvrez le fichier graph.js. Il saisit un jeton d’accès, appelle l’API /me Microsoft Graph, puis sélectionne les valeurs ID et displayName de l’utilisateur. Le programme récupère, puis ajoute le jeton d’accès à l’en-tête d’autorisation envoyé avec la demande à /me.
Enfin, ouvrez ui.js, puis prenez quelques instants pour explorer la fonction displayUI(). Cette fonction affiche et masque des éléments dans index.html et affiche les noms des utilisateurs après leur connexion.

Exécuter l’application

Pour cette procédure, vérifiez que vous avez installé Node.js sur votre ordinateur.

Il est temps de voir votre application s’exécuter en local.

Dans la console, accédez au dossier du projet où se trouve le code source.
Exécutez le script suivant sur la ligne de commande. Le script démarrera votre application localement et ouvrira http://localhost:8080 dans le navigateur.
```
npm start
```
Si vous avez correctement configuré l’application, un bouton de connexion s’affiche.
Connectez-vous en utilisant un compte dans le même locataire développeur Microsoft 365 que vous avez utilisé une unité précédente lorsque vous avez enregistré l'application Azure AD.
Une fois connecté, vous êtes invité à donner votre consentement.
Sélectionnez Accepter pour permettre à l’application d’effectuer des opérations au nom de l’utilisateur.
Après avoir donné votre consentement, l’application essaie d’obtenir un jeton d’accès à l’aide des informations sur le compte validées. La bibliothèque MSAL gère cela à votre place.
Une fois le jeton renvoyé dans l’application, le programme envoie une demande GET au point de terminaison /me Microsoft Graph, puis transmet le jeton d’accès dans l’en-tête d’autorisation. L’appel à /me récupère alors les données du service de façon sûre.
Une fois la réponse de Microsoft Graph reçue, le nom de l’utilisateur connecté s’affiche dans le navigateur.

Vous avez réussi à créer une application qui utilise Microsoft Graph pour récupérer des données Microsoft 365.

Continuer

Exercice – Récupérer un jeton d’accès à l’aide de MSAL

Configurer l’application

Exécuter l’application

Commentaires