Exercice : utiliser Microsoft Graph dans votre application web pour récupérer la photo de profil d’un utilisateur

  • 10 minutes

Vous avez appris tous les concepts nécessaires pour accéder au profil d’un utilisateur à l’aide Microsoft Graph. À présent, il est temps de créer une application client qui récupérera, puis affichera la photo d’un vendeur connecté.

Pour terminer cette unité avec succès, vous avez besoin d’un compte d’utilisateur (par exemple, de votre client de développement Microsoft 365) avec une image de profil disponible dans l’application.

Configurer l’application

Dans cet exercice, vous allez accéder à un référentiel GitHub, ajouter des ID Azure Active Directory (Azure AD) dans l’application, puis ajouter du code pour accéder à une photo à l’aide de Microsoft Graph. Si vous n’avez pas encore créé d’inscription d’application Azure Active Directory, complétez le module de conditions préalables avant de continuer.

  1. Pour obtenir le code d’application initial utilisé dans cet exercice, choisissez l’une de ces options :

    Si vous utilisez Git, clonez le projet à l’aide de la commande git clone :

    git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git

    Si vous n’utilisez pas de compte git, accédez à https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart dans le navigateur web. Sélectionnez le bouton Code, suivi de Télécharger le fichier ZIP. Extrayez le fichier zip sur votre machine.

  2. Ouvrez le fichier dans votre éditeur de code.

  3. L’application contient les fichiers suivants :

    • index.html : définit l’interface affichée chez un utilisateur final 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.

  4. Ouvrez le fichier auth.js et recherchez la constante msalConfig:

    const msalConfig = {
  auth: { .. }
}

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

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

  7. Ouvrez le fichier index.html. Recherchez la ligne <h4>Welcome <span id="userName"></span></h4> et ajoutez le code suivant immédiatement après :

    <div>
  <button id="showProfilePhoto" style="display:none" onclick="displayProfilePhoto();">Show profile picture</button>
</div>
<img id="userPhoto" class="user" alt="User photo" style="display: none;" />

  8. Dans le même fichier index.html , recherchez la balise <head>. Ajoutez le code suivant afin de mettre en forme l’élément d’image que vous avez ajouté à l’étape précédente :

    <style>
.user {
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
  height: 150px;
  width: 150px;
}
</style>

  9. Enregistrez le fichier index.html.

  10. Ouvrez le fichier graph.js. Ajoutez une nouvelle fonction nommée getUserPhoto() au fichier, comme illustré dans le code suivant. Cette fonction obtient la photo de l’utilisateur connecté à l’aide du point de terminaison de l’API Microsoft Graph /me/photo/$value.

    async function getUserPhoto() {
   ensureScope('user.read');
    return await graphClient
        .api('/me/photo/$value')
        .get();
}

  11. Enregistrez le fichier graph.js.

  12. Ouvrez le fichier ui.js, puis ajoutez une nouvelle fonction nommée displayProfilePhoto() comme illustré dans le code suivant. Cette fonction affiche la réponse sous forme d’image reçue de Microsoft Graph dans l’élément d’image créé précédemment.

    async function displayProfilePhoto() {
  const userPhoto = await getUserPhoto();
  if (!userPhoto) {
      return;
  }

  //convert blob to a local URL
  const urlObject = URL.createObjectURL(userPhoto);
  // show user photo
  const userPhotoElement = document.getElementById('userPhoto');
  userPhotoElement.src = urlObject;
  var showPhotoButton= document.getElementById('showProfilePhoto');
  showPhotoButton.style = "display: none";
  var imgPhoto= document.getElementById('userPhoto');
  imgPhoto.style = "display: block";
}

  13. Ouvrez le fichier ui.js, puis ajoutez le code suivant à la fin de la fonction displayUI() existante. Ce code affiche un bouton qu’un utilisateur connecté peut sélectionner pour afficher sa photo de profil. Le bouton restera caché si l'utilisateur n'est pas connecté.

    var showPhotoButton= document.getElementById('showProfilePhoto');
showPhotoButton.style = "display: block";

Maintenant que vous avez ajouté les fonctions et les extraits de code supplémentaires pour obtenir la photo d’un utilisateur inscrit, l’étape suivante consiste à exécuter l’application.

Exécuter votre application

Vous avez à présent étendu votre application pour afficher certains fichiers de l’utilisateur à l’aide de Microsoft Graph. Assurez-vous qu'il y a des fichiers dans le dossier racine de l'instance OneDrive de l'utilisateur, puis exécutez l'application localement.

  1. Affichez un aperçu de l’application web en exécutant la commande suivante dans le terminal :

    npm start

  2. Votre navigateur par défaut doit s’ouvrir et pointer vers http://localhost:8080.

  3. Sélectionnez Se connecter avec Microsoft pour vous connecter avec votre compte Microsoft 365. Vérifiez que le compte avec lequel vous vous connectez dispose d’une photo de profil.

    Capture d’écran du bouton de connexion.

  4. Connectez-vous à l’aide d’un compte dans le même client de développeur Microsoft 365, où vous avez enregistré l’application Azure AD.

  5. Une fois la connexion réussie, confirmez qu'un message de bienvenue et un bouton pour afficher une photo de profil s'affichent.

    Capture d’écran du bouton pour afficher l’image de profil.

  6. Sélectionnez le bouton Afficher l’image de profil. L’image de profil de l’utilisateur connecté s’affiche. Si aucune photo n’est associée au profil, aucune photo n’est affichée.

    Capture d’écran d’une image de profil.