Exercice : afficher les courriers électroniques d’un utilisateur

Effectué

Dans cet exercice, vous allez étendre l’application pour permettre aux utilisateurs de consulter leurs 10 derniers e-mails.

Charger les e-mails depuis Microsoft Graph

Commencez par ajouter un appel à Microsoft Graph pour charger les 10 derniers e-mails de l’utilisateur actuel.

1. Dans votre éditeur de code. ouvrez le fichier graph.js.

2. À la fin du fichier, ajoutez une nouvelle fonction asynchrone pour récupérer les 10 derniers e-mails. Chargez l’objet de chaque e-mail et la date et l’heure de réception.

   async function getEmails() {
     ensureScope('mail.read');
   
     return await graphClient
       .api('/me/messages')
       .select('subject,receivedDateTime')
       .orderby('receivedDateTime desc')
       .top(10)
       .get();
   }
   

Ajouter un espace réservé pour afficher les e-mails

Étendez ensuite l’application avec un bouton de chargement des e-mails, puis ajoutez un espace réservé pour les afficher.

1. Dans votre éditeur de code, ouvrez le fichier index.html.

2. Recherchez la ligne <h4>Welcome <span id="userName"></span></h4> et ajoutez le balisage suivant immédiatement après :

   <button onclick="displayEmail();" id="displayEmail">Show email</button>
   <ul id="emails"></ul>
   

3. Étendez l’application avec un bouton de chargement des e-mails et un espace réservé permettant de les afficher.

   <div id="content" style="display: none;">
     <h4>Welcome <span id="userName"></span></h4>
     <button onclick="displayEmail();" id="displayEmail">Show email</button>
     <ul id="emails"></ul>
   </div>
   

Afficher les e-mails dans l’application

La dernière étape consiste à demander les e-mails à l’aide de Microsoft Graph, puis à les afficher dans l’espace réservé.

1. Dans votre éditeur de code, ouvrez le fichier ui.js.

2. À la fin du fichier, ajoutez la fonction displayEmail :

   async function displayEmail() {
     var emails = await getEmails();
     if (!emails || emails.value.length < 1) {
       return;
     }
   
     document.getElementById('displayEmail').style = 'display: none';
   
     var emailsUl = document.getElementById('emails');
     emails.value.forEach(email => {
       var emailLi = document.createElement('li');
       emailLi.innerText = `${email.subject} (${new Date(email.receivedDateTime).toLocaleString()})`;
       emailsUl.appendChild(emailLi);
     });
   }
   

Exécuter votre application

Vous avez étendu votre application pour afficher les e-mails d’un utilisateur à l’aide de Microsoft Graph. Exécuter 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 doit pointer vers http://localhost:8080.

3. Sélectionnez Se connecter avec Microsoft pour vous connecter avec votre compte Microsoft 365.

4. Après vous être connecté avec votre compte, sélectionnez le bouton Afficher l’e-mail.

5. Si vous exécutez l’application pour la première fois, vous devrez, à l’invite, autoriser l’accès de l’application à votre e-mail. Pour continuer, acceptez la demande.

6. Les 10 derniers e-mails doivent s’afficher dans l’application.

Conseil

Si vous ne voyez aucun e-mail, assurez-vous que les e-mails sont dans la boîte de réception du compte que vous utilisez pour vous connecter à l’application.

Continuer