Esercitazione: visualizzare i messaggi di posta elettronica di un utente

Completato

In questo esercizio si estenderà l'app per consentire agli utenti di visualizzare gli ultimi 10 messaggi di posta elettronica.

Caricare i messaggi di posta elettronica da Microsoft Graph

Per iniziare, aggiungere una chiamata a Microsoft Graph per caricare gli ultimi 10 messaggi di posta elettronica dell'utente corrente.

1. Nell'editor di codice aprire il file graph.js.

2. Alla fine del file aggiungere una nuova funzione asincrona per ottenere gli ultimi 10 messaggi di posta elettronica. Caricare l'oggetto di ogni messaggio di posta elettronica e la data e l'ora di ricezione.

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

Aggiungere un segnaposto per visualizzare i messaggi di posta elettronica

Estendere quindi l'app con un pulsante per caricare i messaggi di posta elettronica e aggiungere un segnaposto per visualizzarli.

1. Nell'editor di codice aprire il file index.html.

2. Individuare la riga <h4>Welcome <span id="userName"></span></h4> e aggiungere il commento seguente subito dopo:

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

3. Estendere il blocco di contenuto con un pulsante per caricare i messaggi di posta elettronica e un segnaposto per visualizzarli.

   <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>
   

Visualizzare i messaggi di posta elettronica nell'app

L'ultimo passaggio consiste nel richiedere messaggi di posta elettronica usando Microsoft Graph e visualizzarli nel segnaposto.

1. Nell'editor di codice aprire il file ui.js.

2. Alla fine del file aggiungere la funzione 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);
     });
   }
   

Eseguire l'app

L'app è stata estesa per visualizzare i messaggi di posta elettronica di un utente con Microsoft Graph. Eseguire l'app in locale.

1. Visualizzare in anteprima l'app Web eseguendo il comando seguente nel terminale.

   npm start
   

2. Il browser deve puntare a http://localhost:8080.

3. Selezionare il pulsante Accedi con Microsoft per accedere con l'account Microsoft 365.

4. Dopo aver eseguito l'accesso con l'account, selezionare il pulsante Show email.

5. Se si esegue l'app per la prima volta, verrà richiesto di concedere all'app l'accesso alla posta elettronica. Per continuare, fornire il consenso alla richiesta.

6. Gli ultimi 10 messaggi di posta elettronica dovrebbero essere visualizzati nell'app.

Consiglio

Se non vengono visualizzati messaggi di posta elettronica, assicurarsi che i messaggi di posta elettronica si trovino nella cartella Posta in arrivo dell'account usato per accedere all'app.