Exercice : se connecter à votre application à l’aide du composant de connexion au Kit de ressources Microsoft Graph

12 minutes

Dans cette unité, vous allez créer une application web et explorer un projet de démarrage. Vous utiliserez ensuite le composant Connexion du Kit de ressources pour vous connecter à votre application et accéder aux fonctionnalités de Microsoft Graph.

Installer le proxy de développement

Pour effectuer cet exercice, vous devez installer la dernière version de Dev Proxy. Dev Proxy est un outil qui simule les réponses de l’API. Il vous permet de générer et de tester votre application sans avoir besoin d’un locataire Microsoft 365. Suivez les instructions de prise en main et vérifiez que dev Proxy est en cours d’exécution avant de continuer.

Remarque

Lorsque vous utilisez dev Proxy pour effectuer cet exercice, votre application utilise des données statiques simulées. Le code que vous écrivez fonctionne avec les configurations de données dynamiques et simulées. Pour utiliser les données actives d’un locataire Microsoft 365, vous devez uniquement créer une inscription d’application Microsoft Entra et mettre à jour la référence de l’ID client dans votre application.

Télécharger la présélection du proxy de développement

Pour effectuer cet exercice, vous devez télécharger la présélection du proxy de développement pour ce module. La présélection contient les données et les réponses fictives que vous utilisez pour générer votre application. Pour télécharger la présélection, exécutez la commande suivante dans votre terminal :

devproxy preset get learn-msgraph-toolkit-intro

Configurer la structure de l’application pour votre application web

Créer un dossier pour le projet

Ouvrez Visual Studio Code. Sélectionnez Fichier>Ouvrir le dossier du menu de commande.
Lorsque vous ouvrez d’un dossier, le système d’exploitation fournit un bouton pour créer un Nouveau dossier.
Accédez à l’emplacement dans lequel vous voulez créer le dossier, puis sélectionnez Nouveau dossier. Nommer le dossier mgt-app.
Ouvrez le dossier mgt-app dans Visual Studio Code.

Créer des fichiers et des dossiers sous le dossier de projet

Votre application web contient un fichier HTML et un dossier pour paramètres Live Server. Live Server est une extension de Visual Studio Code. Créons la structure du projet.

Sélectionnez Fichier>Nouveau Fichier.
Nommez le fichier index.html, et enregistrez le fichier en utilisant CTRL+S (Windows) ou COMMAND+S (macOS).

Ajoutez le code HTML suivant dans index.html et enregistrez le fichier.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Ajouter un dossier nommé .vscode à la racine de votre dossier de projet
Ajoutez un fichier nommé settings.json dans le dossier .vscode. Copiez, puis collez le code suivant dans settings.json, puis enregistrez le fichier.
```
{
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}
```

Ces paramètres assurent le bon déroulement des tests de l'application en local lorsque vous utilisez Live Server.

Avant de commencer à ajouter du code pour utiliser le kit de ressources dans votre application web, vous devez configurer une application Microsoft Entra.

Vous allez utiliser les détails de l’application Microsoft Entra pour authentifier votre application à l’aide du fournisseur Microsoft Authentication Library (MSAL) v2.

Configurer une application Microsoft Entra

Dans le navigateur, accédez au Centre d’administration Microsoft Entra, connectez-vous, puis accédez à Microsoft Entra ID.
Sélectionnez Inscriptions des applications dans le volet gauche, puis sélectionnez Nouvelle Inscription.
Dans l’écran Inscrire une application, entrez les valeurs suivantes :
- Nom : entrez le nom de votre application.
- Types de comptes pris en charge : sélectionnez Comptes dans n’importe quel annuaire organisationnel (n’importe quel annuaire Microsoft Entra - Multilocataire) et comptes Microsoft personnels (par exemple, Skype, Xbox).
- URI de redirection (facultatif) : sélectionnez Application à page unique (SPA) et entrez http://localhost:3000.
- Sélectionnez Inscrire.

Maintenant que vous avez réussi à configurer l'application, nous allons ajouter du code !

Ajout du Kit de ressources Microsoft Graph à votre projet

Vous avez appris précédemment que vous pouvez référencer le Kit de ressources directement à partir du réseau de distribution de contenu. Pour ce faire, ajoutez le bout de code suivant juste avant la </head>balise dans votre fichier index.html.

<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

Initialiser le fournisseur MSAL v2

Pour authentifier votre application, initialiser le fournisseur MSAL v2 en utilisant l' ID de l'application (client) que vous avez enregistré dans la section précédente.

Ajoutez le code suivant dans le corps de votre <body> fichier index.html.

<mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>

Remplacez YOUR-CLIENT-IDpar l'ID de l'application (client) que vous avez enregistré dans la section précédente.

Pour authentifier votre application, initialisez le fournisseur MSAL v2 en utilisant f601c4cb-6902-4675-8415-7db28a4a332d comme ID d’application. Le proxy de développement simule le processus d’authentification pour cette inscription d’application fictive.

Ajoutez le code suivant dans le corps de votre <body> fichier index.html.

<mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>

Pour ajouter le composant Connexion, ajoutez l’élément suivant dans le corps du fichier index.html.

<mgt-login></mgt-login>

Après toutes les modifications, votre fichier .html doit ressembler à ce qui suit :

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

Enregistrez le fichier et testons les résultats.

Tester votre application dans un navigateur

Démarrer le proxy de développement

Commencez par démarrer le proxy de développement. Dans un terminal, exécutez la commande suivante :

devproxy --config-file "~appFolder/presets/learn-msgraph-toolkit-intro/devproxyrc.json"

Laissez le terminal ouvert et exécutez le proxy de développement pendant que vous testez votre application.

Démarrer l’application

Pour tester votre application dans un navigateur, vous devez avoir installé Visual Studio Code Live Server.

Pour exécuter votre application dans Live Server, appuyez sur la combinaison de touches suivante dans Visual Studio Code et recherchez Live Server :

Windows : Ctrl+Maj+P
macOS : COMMAND+SHIFT+P

Ouvrez avec Live Server, sélectionnez l’option, puis appuyez sur Entrer.

Une fois Live Server en cours d’exécution, il se peut qu’il ouvre la page http://localhost:3000/index.html. Ouvrir http://localhost:3000 dans le navigateur.

Sélectionnez Se connecter, Dev Proxy simule le processus d’authentification et l’application affiche les informations de connexion fictives.

Sélectionnez Se connecter, puis entrez votre compte de client développeur Microsoft 365. Vous serez invité à donner votre accord pour les autorisations requises la première fois. Une fois que vous avez donné votre consentement, l’application affiche vos informations de connexion.

Capture d’écran qui illustre résultats finaux de votre application une fois que l’utilisateur s’est connecté.

Vous savez désomais implémenté un mécanisme d’authentification pour accéder aux données Microsoft 365.