Exercice : accéder aux événements de calendrier d’un utilisateur à l’aide de Microsoft Graph

12 minutes

Nous allons utiliser tous les concepts abordés jusqu’à ce stade et apporter des modifications à l’exemple d’application pour accéder aux événements de calendrier.

Recherchez le fichier index.html dans votre éditeur de code. Ajoutez ce code HTML dans la balise <main> juste avant la balise de fermeture </main>.

<button id="btnShowEvents" style="display: none;" onclick="displayEvents();">Show events</button>
<div id="eventWrapper" style="display: none;">
  <p>Your events retrieved from Microsoft Graph for the upcoming week:</p>
  <ul id="events"></ul>
</div>

Recherchez le fichier graph.js dans votre éditeur. Ajoutez une nouvelle fonction pour obtenir les événements de calendrier de l’utilisateur connecté pour la semaine à venir, à l’aide du point de terminaison de l’API Microsoft Graph /me/calendarView. Vous appellerez cette fonction getEvents().

Ajoutez le code suivant à la fin du fichier :

async function getEvents() {
  ensureScope('Calendars.read');
  const dateNow = new Date();
  const dateNextWeek = new Date();
  dateNextWeek.setDate(dateNextWeek.getDate() + 7);
  const query = `startDateTime=${dateNow.toISOString()}&endDateTime=${dateNextWeek.toISOString()}`;

  return await graphClient
  .api('/me/calendarView').query(query)
  .select('subject,start,end')
  .orderby(`start/DateTime`)
  .get();
}

Recherchez le fichier ui.js et ajoutez une nouvelle fonction pour afficher des événements de calendrier reçus de Microsoft Graph dans l’élément de liste. Vous appellerez cette fonction displayEvents().

Ajoutez le code suivant à la fin du fichier :

async function displayEvents() {
  var events = await getEvents();
  if (!events || events.value.length < 1) {
    var content = document.getElementById('content');
    var noItemsMessage = document.createElement('p');
    noItemsMessage.innerHTML = `No events for the coming week!`;
    content.appendChild(noItemsMessage)

  } else {
    var wrapperShowEvents = document.getElementById('eventWrapper');
    wrapperShowEvents.style = "display: block";
    const eventsElement = document.getElementById('events');
    eventsElement.innerHTML = '';
    events.value.forEach(event => {
      var eventList = document.createElement('li');
      eventList.innerText = `${event.subject} - From  ${new Date(event.start.dateTime).toLocaleString()} to ${new Date(event.end.dateTime).toLocaleString()} `;
      eventsElement.appendChild(eventList);
    });
  }
  var btnShowEvents = document.getElementById('btnShowEvents');
  btnShowEvents.style = "display: none";
}

Dans le même fichier ui.js, mettez à jour la fonction displayUI() pour afficher le bouton Afficher des événements uniquement sur l’autorisation réussie.

Ajoutez le code suivant à la fin de la fonction displayUI() :
```
var btnShowEvents = document.getElementById('btnShowEvents');
btnShowEvents.style = "display: block";
```

À présent que vous avez ajouté toutes les autres fonctions et les extraits de code aux événements d’un utilisateur connecté pour la semaine à venir, l’étape suivante consiste à exécuter l’application localement.

Exécuter l’application

Pour exécuter et tester l’application, vous devrez ajouter des événements de calendrier dans votre calendrier à l’aide de Microsoft Outlook ou Microsoft Teams. Les événements doivent se tenir dans la pérode d’une semaine.

Conseil

Pour cette étape, vérifiez que vous avez installé Node.js sur votre machine.

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

Dans la fenêtre de terminal, accédez au dossier de projet où se trouve le code source.
Exécutez le script suivant dans la ligne de commande pour démarrer votre application localement, en ouvrant http://localhost:8080 dans le navigateur.
```
npm start
```
Si vous avez correctement configuré l’application, un bouton de connexion s’affiche.
Connectez-vous à l’aide d’un compte dans le même locataire développeur Microsoft 365 que celui utilisé dans l’unité 2, où vous avez inscrit l’application Microsoft Entra.
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 d’authentification Microsoft gère cette étape pour vous.
Une fois le jeton de retour dans l’application, le programme envoie une demande GET au point de terminaison /me Microsoft Graph. Le jeton d’accès est transmis 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 reçue de Microsoft Graph, un message d’accueil et le nom de l’utilisateur connecté s’affichent. Sélectionnez le bouton Afficher les événements.
Une autre boîte de dialogue de consentement s’affiche. Notez l’étendue d’autorisation Lire votre calendrier que vous acceptez.
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 d’authentification Microsoft gère cette étape pour vous.
Une fois le jeton de retour dans l’application, le programme envoie une demande GET au point de terminaison /me/calendarView Microsoft Graph. Le jeton d’accès est transmis dans l’en-tête d’autorisation. L’appel à /me/calendarView récupère alors les données du service de façon sûre.
Une fois la réponse reçue de Microsoft Graph, les événements de calendrier de l’utilisateur connecté pour la semaine à venir sont répertoriés.

Vous avez montré comment accéder aux événements de calendrier Microsoft 365 d’un utilisateur connecté, puis les afficher à l’aide de Microsoft Graph.

Continuer

Exercice : accéder aux événements de calendrier d’un utilisateur à l’aide de Microsoft Graph

Exécuter l’application

Commentaires