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

12 分鐘

在這個練習中，您將建立連接至 Microsoft 365 的 JavaScript 應用程式。您將使用 Microsoft 驗證文件庫 JavaScript 文件庫，允許使用者使用他們的 Microsoft 365 帳戶來登入您的應用程式。接著會使用 Microsoft Graph JavaScript SDK 顯示其名稱。

執行您的應用程式

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

如果您使用 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 檔案解壓縮到您的電腦。
在程式碼編輯器中開啟該資料夾。
開啟 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'
  }
};
```
在終端機中執行下列命令來預覽 Web 應用程式：
```
npm start
```
您的預設瀏覽器應該開啟並指向 http://localhost:8080。
選取 [使用 Microsoft 帳戶登入] 按鈕以使用 Microsoft 365 帳戶登入。
在使用您的帳戶登入並同意應用程式之後，您應該會看到應用程式顯示您的使用者名稱。
在終端機視窗中選取 CTRL+C 以停止 Node.js 伺服器。

繼續

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

執行您的應用程式

意見反應