練習 - 使用 Microsoft Graph 存取使用者的行事曆活動

12 分鐘

讓我們使用目前討論的所有概念，並對範例應用程式進行變更，以存取行事曆活動。

在程式碼編輯器中，找到 index.html 檔案。在 <main> 標籤中就在其結尾的 </main> 標籤前方新增下列 HTML 程式碼。

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

在編輯器中，找到 graph.js 檔案。新增函數以使用 Microsoft Graph API 端點 /me/calendarView 來取得已登入使用者未來一週的行事曆活動。您將此函數稱為 getEvents()。

將下列程式碼新增檔案的結尾：

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();
}

找出 ui.js 檔案，然後新增函數以顯示透過 Microsoft Graph 在 list 元素中接收到的行事曆活動。您將此函數稱為 displayEvents()。

將下列程式碼新增檔案的結尾：

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";
}

在相同 ui.js 檔案中，更新 displayUI() 函數，只在成功授權時顯示 [顯示活動] 按鈕。

將下列程式碼新增到 displayUI() 函數的結尾:
```
var btnShowEvents = document.getElementById('btnShowEvents');
btnShowEvents.style = "display: block";
```

現在，您已將所有其他函數和程式碼片段新增到已登入使用者未來一週的活動，下一個步驟是在本機執行應用程式。

執行應用程式

若要執行並測試應用程式，您將必須使用 Microsoft Outlook 或 Microsoft Teams 將一些行事曆活動新增至您的行事曆。活動應落在一週期間內。

提示

針對此步驟，請確定您的電腦上已安裝 Node.js。

現在是在查看應用程式在本機執行的時候。

在終端機視窗中，前往原始程式碼所在的專案資料夾。
在瀏覽器中開啟 http://localhost:8080，在命令列中執行下列指令碼，以在本機啟動您的應用程式。
```
npm start
```
如果應用程式已正確設定，則會看到登入按鈕。
使用您註冊 Microsoft Entra 應用程式之單元 2 中所使用之相同 Microsoft 365 開發人員租使用者中的帳戶登入。
成功登入之後，系統會提示您同意。
選取 [接受]，以同意應用程式為使用者執行作業。
同意之後，應用程式會嘗試使用已驗證的帳戶資訊來取得存取權杖。 Microsoft 驗證程式庫會為您處理此步驟。
權杖回到應用程式之後，會向 Microsoft Graph /me 端點提出 GET 要求。存取權杖會在授權標頭中傳遞。然後對 /me 的呼叫會安全地從服務擷取資料。
從 Microsoft Graph 收到回應之後，您會看到歡迎訊息包含已登入使用者的名稱。選取 [顯示活動] 按鈕。
隨即顯示另一個同意對話方塊。注意您要同意的 [讀取您的行事曆] 權限範圍。
選取 [接受]，以同意應用程式為使用者執行作業。
同意之後，應用程式會嘗試使用已驗證的帳戶資訊來取得存取權杖。 Microsoft 驗證程式庫會為您處理此步驟。
權杖回到應用程式之後，會向 Microsoft Graph /me/calendarView 端點提出 GET 要求。存取權杖會在授權標頭中傳遞。然後對 /me/calendarView 的呼叫會安全地從服務擷取資料。
從 Microsoft Graph 收到回應之後，您就會看到列出已登入使用者未來一週的行事曆活動。

您已成功示範如何使用 Microsoft Graph 來存取和顯示已登入使用者的 Microsoft 365 行事曆活動。

繼續

練習 - 使用 Microsoft Graph 存取使用者的行事曆活動

執行應用程式

意見反應