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

已完成

在此單元中,您將了解如何顯示使用者未來一週的行事曆活動。 您也會了解如何查詢特定期間的資料活動,並使用選取排序等概念來顯示您想要的資訊。

決定您的應用程式需要的權限

Microsoft Graph 公開的所有資料都受到保護。 您的應用程式必須擁有適當的許可權才能存取它。 需要的權限取決於您的應用程式需要存取的資訊類型。 例如,若要存取使用者的行事曆,您的應用程式必須具有 Calendars.Read 許可權。 Microsoft Graph API 參考中提供每項作業所需權限的確切清單。

如果您的應用程式載入不同類型的資料,使用者必須授與其存取此資訊所需的多個權限。 在您的應用程式中,僅要求您需要的權限。 在此課程模組中,您的應用程式會要求一開始讀取使用者名稱的許可權,並要求只在您選取按鈕以顯示事件時才讀取其行事曆。 此模式稱為動態同意,而這是要求權限的建議方式。 有了動態同意,使用者可以控制他們與使用的應用程式共用的資料,將安全性風險降至最低。

指定必要權限

授與您應用程式的權限清單會一併放入存取權杖中。 OAuth 標準將其稱為範圍。 當您的應用程式使用 Microsoft 驗證連結庫來取得存取令牌時,它必須在 Microsoft Entra ID 的要求中包含範圍清單。 Microsoft Graph 中的每個作業都有自己的範圍清單。 如果您的存取令牌沒有其中一個,則要求會遭到拒絕。

範例應用程式將目前的 Microsoft 驗證程式庫要求儲存在名為 msalRequest 的全域變數中。 一開始,它會包含空的範圍陣列。

const msalRequest = { scopes: [] };

以下是範例應用程式用來新增更多範圍至要求的協助程式函數。

function ensureScope (scope) {
  if (!msalRequest.scopes.some((s) => s.toLowerCase() === scope.toLowerCase())) {
    msalRequest.scopes.push(scope);
  }
}

呼叫 Microsoft Graph 以擷取資料時,您會呼叫協助程式函數,以確保包含必要的權限。

async function getEvents() {
  ensureScope('Calendars.read');
  // ...
}

擷取使用者一段指定時間的行事曆活動

若要透過 Microsoft Graph 取得使用者的行事曆活動,請呼叫 /me/calendarview 端點 (如稍早所述)。 它會傳回已登入使用者預設行事曆中的項目清單和單一行事曆活動執行個體。 您可以使用 Microsoft Graph SDK 呼叫 Microsoft Graph 端點,以指定您要執行的端點和要求類型。

若要只顯示未來一週的行事曆活動,請使用下列查詢來傳遞結果的時間範圍:

graphClient
    .api('/me/calendarview')
    .query(`startDateTime=${dateNow.toISOString()}&endDateTime=${dateNextWeek.toISOString()}`);

在這裡,dateNow 是目前的日期,而 dateNextWeek 是目前日期加七天,以獲得一整週的時段。

將 Microsoft Graph 所擷取和傳輸的資料量最小化,可大幅改善您應用程式的效能。 select 方法可用來在應用程式將使用的結果中選取特定屬性。 要傳回的屬性會以逗號分隔的清單傳遞至 select

graphClient
    .api('/me/calendarview')
    .query(` startDateTime=${dateNow.toISOString()}&endDateTime=${dateNextWeek.toISOString()} `)
    .select('subject,start,end');

使用 orderby 方法來指定如何排序結果中的項目。 若要依多個欄位排序,請指定以逗號分隔的欄位清單。 您也可以透過將 ascdesc 關鍵字附加到查詢,指定以遞增或遞減順序排序項目。

在此應用程式中,您可以依開始欄位以遞增順序排序資料。 如果未指定關鍵字 (例如 ascdesc),則此順序為預設值:

graphClient
    .api('/me/calendarview')
    .query(` startDateTime=${dateNow.toISOString()}&endDateTime=${dateNextWeek.toISOString()} `)
    .select('subject,start,end')
    .orderby('Start/DateTime');

以下是最終 Microsoft Graph 呼叫的外觀。

graphClient
    .api('/me/calendarview')
    .query(` startDateTime=${dateNow.toISOString()}&endDateTime=${dateNextWeek.toISOString()} `)
    .select('subject,start,end')
    .orderby('Start/DateTime')
    .get();