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

10 分鐘

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

在編輯器中開啟 Startup.cs, 並花一些時間來探索 ConfigureServices 中所定義的 Microsoft 身分識別、Microsoft Graph, 和 ASP.NET Core 中介軟體。
在 ConfigureServices() 方法中尋找下列程式碼。這段程式碼會對名為 GraphProfileClient 及 GraphEmailClient 的自訂物件啟用相依性插入。物件的範圍是 HTTP 要求, 這表示它們會針對伺服器的每個要求建立一次。
```
services.AddScoped<GraphProfileClient>();
services.AddScoped<GraphCalendarClient>();
```
開啟 Graph/GraphCalendarClient.cs, 並花一些時間來探索現有的代碼。請注意下列欄位及方法:
- 類別中包含兩個名為 _logger 及 _graphServiceClient 的 readonly 欄位。插入到建構函式中的物件將會指派至這些欄位。
- 此類別中包括 GetEvents()、 GetUserMailboxSettings() 和 GetUtcStartOfWeekInTimeZone() 方法。
移除建構函式中的現有程式碼。

修改建構函式, 將 ILogger<GraphCalendarClient> 和 GraphServiceClient 插入並將參數值指派至相關聯的欄位:

public GraphCalendarClient(
  ILogger<GraphCalendarClient> logger,
  GraphServiceClient graphServiceClient)
{
    _logger = logger;
    _graphServiceClient = graphServiceClient;
}

找出現有的 GetEvents() 方法, 並將其取代為下列代碼。此程式碼會定義將檢索之行事曆事件的開始和結束日期。

_logger.LogInformation($"User timezone: {userTimeZone}");
// Configure a calendar view for the current week
var startOfWeek = DateTime.Now;
var endOfWeek = startOfWeek.AddDays(7);
var viewOptions = new List<QueryOption>
{
  new QueryOption("startDateTime", startOfWeek.ToString("o")),
  new QueryOption("endDateTime", endOfWeek.ToString("o"))
};

在緊接著前一個新增至 GetEvents() 的代碼下方, 新增下列 try/catch 代碼區塊:

try
{

}
catch (Exception ex)
{
    _logger.LogError($"Error calling Graph /me/calendaview: { ex.Message}");
    throw;
}

在 try 區塊內, 新增下列程式碼以使用 viewOptions、定義要傳回的行事曆活動屬性、定義如何排序結果, 以及開始呼叫 me/calendarView:

// Use GraphServiceClient to call Me.CalendarView
var calendarEvents = await _graphServiceClient
    .Me
    .CalendarView
    .Request(viewOptions)
    .Header("Prefer", $"outlook.timezone=\"{userTimeZone}\"")
    .Select(evt => new
    {
      evt.Subject,
      evt.Organizer,
      evt.Start,
      evt.End
    })
    .OrderBy("start/DateTime")
    .GetAsync();

return calendarEvents;

在繼續之前, 請先儲存 GraphCalendarClient.cs。
開啟 Pages/Calendar.cshtml.cs, 花一些時間來探索現有的程式碼。注意下列功能:
- 此 CalendarModel 類別包含數個欄位及屬性, 例如_logger、_graphCalendarClient、_graphProfileClient、MailboxSettings, 和 Events。
- ILogger<CalendarModel>、GraphCalendarClient 和 GraphProfileClient 會注入至建構函式中, 並指派至相關聯的欄位。
- FormatDateTimeZone() 方法包含在類別中。它是用來格式化 DateTime 物件。
找出現有的 OnGetAsync() 方法並將其取代為下列程式碼:
```
MailboxSettings = await _graphCalendarClient.GetUserMailboxSettings();
var userTimeZone = (String.IsNullOrEmpty(MailboxSettings.TimeZone))
    ? "Pacific Standard Time"
    : MailboxSettings.TimeZone;
Events = await _graphCalendarClient.GetEvents(userTimeZone);
```
此程式碼會擷取使用者的信箱設定、判斷是否已定義時區，並將使用者的時區傳遞至 GetEvents() 您稍早在 GraphCalendarClient 類別中建立的方法。擷取的事件會儲存在類別的 Events 屬性中。
在繼續之前, 請先儲存 Calendar.cshtml.cs。
開啟 Pages/Calendar.cshtml。這是一個 Razor 頁面檔, 用來呈現儲存在 CalendarModel 類別中的行事曆活動資料。它會重複查看儲存在 CalendarModel 類別事件屬性中的活動, 並寫出頁面中每個行事曆活動的詳細資料。
請花一點時間來查看 HTML 及 Razor 程式碼, 並請注意, 它會處理下列任務:
- 確保使用者已驗證。
- 會檢查 Model.Events 屬性, 以查看是否有任何活動可以重複查看並顯示在頁面中。
尋找檔案中的 @* Add foreach here *@ 註解, 並且以下列方法取代:
```
@foreach(var evt in Model.Events)
{
```
找出 @* Add foreach closing bracket here *@ 註解, 並將它取代為上一個步驟中所加入 foreach 語句的右括弧。
找到 @* Add event subject here *@ 註解，並以下列代碼取代, 以寫出每個活動的主題:
```
@evt.Subject
```
找到 @* Add event start date/time here *@ 註解, 並以下列代碼取代, 以寫出活動的開始日期和時間:
```
@Model.FormatDateTimeTimeZone(evt.Start)
```
最後, 請尋找 @* Add event end date/time here *@ 出註解, 並以下列代碼取代,　以寫出活動的結束日期和時間:
```
@Model.FormatDateTimeTimeZone(evt.End)
```
CalendarModel 類別中的 FormatDateTimeTimeZone() 函數會使用載入頁面時所找到的 MailboxSettings 資料, 將開始和結束日期時間值轉換為登入使用者定義的時區。
在繼續之前, 請儲存 Calendar.cshtml。

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

執行應用程式

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

請務必執行您的應用程式, 然後再試一次！

請根據您的程式碼編輯器執行下列步驟:
- Visual Studio
  
  按 F5 以組建及執行專案。
- Visual Studio Code 或另一個程式碼編輯器
  
  在 [ 開始 ] 資料夾中開啟終端視窗, 並執行下列命令:
```
dotnet run
```
開啟瀏覽器並前往 https://localhost:5001。
使用您在註冊 Azure Active Directory 應用程式時所用的 Microsoft 365 開發人員租用戶登入。
當您同意必要的權限後, 應用程式會嘗試使用已驗證的帳戶資訊取得存取權杖。這會透過上述 Startup.cs 中所述的中介軟體為您處理。
成功在應用程式中取得權杖之後，會對 Microsoft Graph /me 端點提出GET要求，並在授權標頭中傳遞存取權杖。然後對 /me 的呼叫會安全地從服務擷取資料。
從 Microsoft Graph 收到回應之後, 您會看到歡迎訊息包含已登入使用者的名稱。
選取標頭中的 [行事曆] 連結, 以查看使用者的行事曆活動。
載入頁面之後, 會向 Microsoft Graph /m*e/calendarView 端點提出 GET 要求, 且會將存取權杖傳入授權標頭。然後對 /me/calendarView 的呼叫會從服務安全地取得資料, 並顯示在頁面中。

注意事項

如果您未看到任何行事曆活動, 請將一些活動新增至您用來登入應用程式的使用者帳戶。
關閉瀏覽器, 然後在終端機視窗中按 CTRL+C 以停止伺服器之後再繼續。

注意事項

如果您已在 Visual Studio 中開啟專案, 可以關閉瀏覽器或選取 Visual Studio 中的 SHIFT+F5，以停止伺服器。關閉 Visual Studio 建立的終端視窗 (如果它仍為開啟)。

您已成功示範如何使用 Microsoft Graph 和 ASP.NET Core！存取及顯示已登入使用者的 Microsoft 365 行事曆活動。

繼續

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

執行應用程式

意見反應