練習 - 顯示使用者的電子郵件

已完成

在本練習中，您將擴充應用程式，讓使用者檢視上 10 封電子郵件。

從 Microsoft Graph 載入電子郵件

首先，新增對 Microsoft Graph 的呼叫，以載入目前使用者的前 10 封電子郵件。

1. 在程式碼編輯器中，開啟 graph.js 檔案。

2. 在檔案結尾處，新增非同步函式以擷取前 10 封電子郵件。 載入每封電子郵件的主旨，以及收到電子郵件的日期和時間。

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

新增預留位置以顯示電子郵件

接下來，使用按鈕擴充應用程式以載入電子郵件，並新增預留位置以顯示電子郵件。

1. 在程式碼編輯器中，開啟 index.html 檔案。

2. 找到該行 <h4>Welcome <span id="userName"></span></h4>，並在其後緊接著新增下列標記:

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

3. 使用按鈕擴充內容區塊以載入電子郵件，並新增預留位置以顯示電子郵件。

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

在應用程式中顯示電子郵件

最後一個步驟是使用 Microsoft Graph 要求電子郵件，並將其顯示在預留位置中。

1. 在程式碼編輯器中，開啟 ui.js 檔案。

2. 在檔案結尾處，新增 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);
     });
   }
   

執行您的應用程式

您已經使用 Microsoft Graph 擴充應用程式以顯示使用者的電子郵件。 讓我們在本機執行應用程式。

1. 在終端機中執行下列命令來預覽 Web 應用程式。

   npm start
   

2. 您的瀏覽器應該會指向 http://localhost:8080。

3. 選取 [使用 Microsoft 帳戶登入] 按鈕以使用您的 Microsoft 365 帳戶登入。

4. 使用帳戶登入之後，選取 [顯示電子郵件] 按鈕。

5. 如果您是第一次執行應用程式，系統會提示您將應用程式存取權授予電子郵件。 若要繼續，請同意要求。

6. 您應該會看到應用程式中顯示前 10 封電子郵件。

提示

如果您看不到任何電子郵件，請確定電子郵件位在您用於登入應用程式的帳戶的收件匣中。