練習 - 使用 Microsoft Graph 工具組登入元件登入您的應用程式

12 分鐘

在本單元中，您會建立 Web 應用程式並探索入門專案。接著您會使用工具組中的登入元件登入應用程式，並存取 Microsoft Graph 功能。

安裝開發人員 Proxy

若要完成此練習，您必須安裝 最新版 的開發人員 Proxy。開發人員 Proxy 是模擬 API 回應的工具。它可讓您建置和測試應用程式，而不需要 Microsoft 365 租使用者。請遵循用戶入門指示，並確認開發人員 Proxy 正在執行中，然後再繼續進行。

注意事項

當您使用 Dev Proxy 完成此練習時，您的應用程式會使用靜態的模擬數據。您撰寫的程式代碼同時適用於模擬和實時數據組態。若要使用來自 Microsoft 365 租使用者的實時數據，您只需要建立 Microsoft Entra 應用程式註冊，並在您的應用程式中更新用戶端標識元參考。

下載開發人員 Proxy 預設值

若要完成此練習，您必須下載此課程模組的開發人員 Proxy 預設。預設值包含您用來建置應用程式的模擬數據和回應。若要下載預設值，請在終端機中執行下列命令：

devproxy preset get learn-msgraph-toolkit-intro

設定 Web 應用程式的應用程式結構

建立專案的新資料夾

開啟 Visual Studio Code。在選取命令功能表中的 [檔案]> [開啟資料夾]。
開啟資料夾時，作業系統會提供建立 [新增資料夾] 的按鈕。
請前往您想要建立新資料夾的位置，然後選取 [新增資料夾]。將資料夾命名為 [mgt-app]。
在 Visual Studio Code 中開啟 [mgt-app] 資料夾。

在專案資料夾下建立檔案和資料夾

您的 Web 應用程式會有一個 HTML 檔案和 Live Server 設定的資料夾。 Live Server 是 Visual Studio Code 的延伸模組。開始建立專案結構。

選取 [檔案]> [新增檔案]。
將檔案命名為 index.html，並使用 CTRL+S (Windows) 或 COMMAND+S (macOS) 來儲存檔案。

將下列 HTML 新增至 [index.html] 中，然後儲存檔案。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

將名為 [.vscode] 的資料夾新增到專案資料夾的根中。
將名為 [settings.json] 的檔案新增到 [.vscode] 資料夾中。將下列程式碼複製並貼上至 [settings.json]，然後儲存檔案。
```
{
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}
```

當您使用 Live Server 時，這些設定可確保應用程式在本機的順利測試。

開始新增程式代碼以在 Web 應用程式中使用工具群組之前，您必須設定 Microsoft Entra 應用程式。

您將使用 Microsoft Entra 應用程式的詳細數據，使用 Microsoft 驗證連結庫 (MSAL) v2 提供者來驗證您的應用程式。

設定 Microsoft Entra 應用程式

在瀏覽器中，移至 Microsoft Entra 系統管理中心，登入並移至 Microsoft Entra ID。
選取左窗格中的 [應用程式註冊]，然後選取 [新增註冊]。
在 [註冊應用程式] 畫面上，輸入下列值：
- 名稱：輸入您的應用程式名稱。
- 支援的帳戶類型：選取 任何組織目錄中的帳戶 (任何 Microsoft Entra 目錄 - 多租使用者) 和個人 Microsoft 帳戶 (例如 Skype、Xbox) 。
- [重新導向 URI (選用)]：選取 [單一頁面應用程式 (SPA)] 並輸入 http://localhost:3000。
- 選取 [註冊]。

現在您已成功設定應用程式，讓我們新增一些程式碼！

將 Microsoft Graph 工具組新增至您的專案

稍早您已學到可以直接從內容傳遞網路參考工具組。若要這樣做，請在 index.html 檔案中的 </head> 標記前面新增下列程式碼片段。

<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

初始化 MSAL v2 提供者

若要驗證您的應用程式，請使用上一節儲存的 [應用程式 (用戶端) 識別碼] 初始化 MSAL v2 提供者。

將下列程式碼片段新增到 index.html 的 <body> 中。

<mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>

以上一節儲存的 [應用程式 (用戶端) 識別碼] 取代 YOUR-CLIENT-ID。

若要驗證您的應用程式，請使用 f601c4cb-6902-4675-8415-7db28a4a332d 作為應用程式識別碼，初始化 MSAL v2 提供者。開發人員 Proxy 會模擬此模擬應用程式註冊的驗證程式。

將下列程式碼片段新增到 index.html 的 <body> 中。

<mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>

若要新增登入元件，請在 [index.html] 檔案本文中新增下列元素。

<mgt-login></mgt-login>

完成所有變更之後，您的 [index.html] 檔案應看起來如下：

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

儲存檔案，然後讓我們測試結果！

在瀏覽器中測試您的應用程式

啟動開發人員 Proxy

從啟動Dev Proxy開始。在終端機中，執行下列命令：

devproxy --config-file "~appFolder/presets/learn-msgraph-toolkit-intro/devproxyrc.json"

測試應用程式時，讓終端機保持開啟並執行開發 Proxy。

啟動應用程式

若要在瀏覽器中測試您的應用程式，您必須先安裝好 Visual Studio Code Live Server。

若要在 Visual Studio 中執行應用程式，請在 Visual Studio Code 中按以下按鍵組合，並搜尋 Live Server：

Windows： CTRL+SHIFT+P
macOS: COMMAND+SHIFT+P

使用 Live Server 開啟，選取選項，然後按 Enter。

執行 Live Server 之後，可能網頁 http://localhost:3000/index.html 會隨之開啟。在瀏覽器中開啟 http://localhost:3000。

選 取 [登入]，[開發 Proxy] 會模擬驗證程式，而應用程式將會顯示模擬登入資訊。

選取 [登入]，然後輸入您的 Microsoft 365 開發人員租用戶帳戶。第一次系統會要求您同意所需的權限。同意之後，應用程式會顯示您的登入資訊。

顯示使用者登入後應用程式最終結果的螢幕擷取畫面。

您現在已成功實作存取 Microsoft 365 資料的驗證機制。