練習 - 將 JavaScript 應用程式連接至 Microsoft 365

已完成

在此練習中，您將建立連線至 Microsoft 365 的 JavaScript 應用程式。 您將使用 Microsoft 驗證程式庫 JavaScript 程式庫，讓使用者使用他們的 Microsoft 365 帳戶來登入您的應用程式，並使用 Microsoft Graph JavaScript SDK 顯示其名稱。

執行您的應用程式

1. 若要取得此練習中使用的初始應用程式碼，請選擇下列其中一個選項：

   如果您使用 Git，請使用 git clone 命令複製該專案:

   git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
   

   如果您未使用 Git，請在網頁瀏覽器中前往 https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart。 選取 [程式碼] 按鈕，然後選取 [下載 ZIP]。 將 zip 檔案解壓縮到您的電腦。

2. 在程式碼編輯器中開啟該資料夾。

3. 開啟 auth.js 檔案，並尋找常數 msalConfig：

   const msalConfig = {
     auth: { .. }
   }
   

4. 以您稍早註冊的 clientIdspa-aad-app) ，從 Microsoft Entra (應用程式複製的 Application (用戶端) 標識碼值取代 屬性的值。 您可以從 spa-aad-app) (Microsoft Entra 應用程式的概觀頁面取得此值。

5. 在相同的 auth.js 檔案中 msalConfig.auth.authority ，尋找 屬性。 <your directory ID here>以您稍早註冊的spa-aad-app) Microsoft Entra 應用程式的目錄 ( (租使用者) 標識符值取代值。 您可以從 spa-aad-app) (Microsoft Entra 應用程式的概觀頁面取得此值。

   常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'
     }
   };
   

6. 在終端機中執行下列命令來預覽 Web 應用程式：

   npm start
   

7. 您的預設瀏覽器應該開啟並指向 http://localhost:8080。

8. 選取 [使用 Microsoft 帳戶登入] 按鈕以使用 Microsoft 365 帳戶登入。

9. 在使用您的帳戶登入並同意應用程式之後，您應該會看到應用程式顯示您的使用者名稱。

10. 在終端機視窗中選取 CTRL+C 以停止 Node.js 伺服器。