練習 - 使用 MSAL 來取得存取權杖

10 分鐘

現在是時候使用您到目前為止學習到的所有概念來建立作品。

在這個練習中，您將設定自己的應用程式。此應用程式會呼叫 Microsoft Graph 以取得已登入使用者的設定檔資訊。

設定應用程式

此練習可讓您開始執行應用程式，該應用程式會將使用者登入 Microsoft Entra ID，並呼叫 Microsoft Graph。您將存取 GitHub 存放庫，然後將應用程式設定為在電腦上本地執行。

開啟您電腦的主機，然後前往您想要儲存應用程式的資料夾。
若要取得原始程式碼，請造訪 GitHub 存放庫並選擇下列其中一個選項：
- 如果您使用 Git，請使用 git clone 命令複製專案：
```
git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
```
- 如果您不使用 Git，選取 [程式碼] 按鈕，然後選取 [下載 ZIP]。將 *.zip 檔案解壓縮到您的計算機。
在最愛的編輯器中開啟已下載或已複製專案的根資料夾 mslearn-retrieve-m365-data-with-msgraph-quickstart。

應用程式會包含以下檔案：
- index.html：定義使用者存取網站時，使用者看到的使用者介面。其會載入 Microsoft 驗證程式庫 (MSAL) 指令碼和自訂應用程式指令碼、提供使用者登入的方式，以及顯示在使用者登入後的名稱。
- auth.js：定義 MSAL 組態，將應用程式與 Microsoft Entra ID 建立關聯、將使用者登入應用程式，以及處理擷取 Microsoft Graph 可以使用的存取令牌。
- graph.js：呼叫 Microsoft 365 以存取登入的 /me 設定檔。其依賴 auth.js 來擷取在 Microsoft Graph API 呼叫所用的存取權杖。
- ui.js：處理在 index.html中定義的使用者介面元素。
開啟 auth.js 檔案，並尋找常數 msalConfig：
```
const msalConfig = {
    auth: { .. }
}
```
將屬性的clientId值取代為您稍早註冊的 microsoft Entra 應用程式 (spa-aad-app) 複製的 Application (client) 標識符值。您可以從 Microsoft Entra 應用程式的概觀頁面取得此值， (spa-aad-app) 。
在相同的 auth.js 檔案中 msalConfig.auth.authority ，尋找屬性。 <your directory ID here>將值取代為您稍早註冊之 Microsoft Entra 應用程式 (spa-aad-app) 的目錄 (租使用者) 標識符值。您可以從 Microsoft Entra 應用程式的概觀頁面取得此值， (spa-aad-app) 。

常 msalConfig 數看起來應該類似下列程序代碼，其中包含來自 Microsoft Entra 租使用者和已註冊應用程式的唯一標識碼：
```
const msalConfig = {
  auth: {
    clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
    authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
    redirectUri: 'http://localhost:8080'
  }
};
```
現在您已將適當的 Microsoft Entra 識別元新增至 auth.js，請花點時間探索檔案中的程序代碼。請注意，其中包含下列函數：
- signIn()：登入使用者。
- getToken()：處理 Microsoft Graph 可以使用的存取權杖取得過程。
開啟 graph.js 檔案，並留意其會抓取存取權杖、呼叫 Microsoft Graph /me API，並選取使用者的 ID 和 displayName 值。請留意存取權杖的擷取方式，並將該權杖新增到隨要求一起傳送到 /me 的授權標頭。
最後，開啟 ui.js，並花一點時間探索 displayUI() 函數。該函數負責顯示和隱藏 index.html 中的元素，以及在使用者登入後顯示其名稱。

執行應用程式

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

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

在主機中，前往原始程式碼所在的專案資料夾。
在命令列中，執行下列指令碼。指令碼將在本地啟動應用程式，並在瀏覽器中開啟 http://localhost:8080。
```
npm start
```
如果應用程式的設定正確，您就會看到登入按鈕。
使用您在註冊 Microsoft Entra 應用程式時使用上一個單元的相同 Microsoft 365 開發人員租使用者中的帳戶登入。
成功登入之後，系統會提示您同意。
選取 [接受]，以同意應用程式代表使用者執行作業。
同意之後，應用程式會嘗試使用已驗證的帳戶資訊來取得存取權杖。 MSAL 文件庫會為您處理問題。
權杖傳回應用程式之後，會向 Microsoft Graph /me 端點提出 GET 要求，且會將存取權杖傳入授權標頭。然後對 /me 的呼叫會安全地從服務擷取資料。
從 Microsoft Graph 收到回應之後，您會在瀏覽器中看到已登入的使用者名稱。

您已成功建立使用 Microsoft Graph 來擷取 Microsoft 365 資料的應用程式！

繼續

練習 - 使用 MSAL 來取得存取權杖

設定應用程式

執行應用程式

意見反應