組織數據：登入使用者並取得存取令牌

2025-06-13

用戶必須使用 Microsoft Entra 識別碼進行驗證，才能讓 Microsoft Graph 存取組織數據。在此練習中，您將瞭解如何使用 Microsoft Graph 工具組的 mgt-login 元件來驗證使用者及擷取存取令牌。接著，可以使用存取令牌來呼叫 Microsoft Graph。

備註

如果您不熟悉 Microsoft Graph，您可以在 Microsoft Graph 基本概念學習路徑中深入瞭解。

在本練習中，您將會：

瞭解如何將Microsoft Entra ID 應用程式與 Microsoft Graph 工具組產生關聯，以驗證使用者並擷取組織數據。
瞭解範圍的重要性。
瞭解 Microsoft Graph 工具組 的 mgt-login 元件如何用來驗證使用者及擷取存取令牌。

在上一個練習中，您已在 Microsoft Entra ID 中建立應用程式註冊，並啟動應用程式伺服器和 API 伺服器。您也會更新檔案中的 .env 下列值（TEAM_ID 且 CHANNEL_ID 為選擇性）：
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
請確定您已完成先前的練習，再繼續進行。
返回瀏覽器（http://localhost:4200），選取標頭中的 [ 登入 ]，然後使用您Microsoft 365 開發人員租用戶的系統管理員用戶帳戶登入。

小提示

使用您的 Microsoft 365 開發人員租用戶系統管理員帳戶登入。您可以移至 Microsoft 365 系統管理中心，以檢視開發人員租使用者中的其他使用者。
如果您第一次登入應用程式，系統會提示您同意應用程式所要求的許可權。您將在下一節探索程式代碼時深入瞭解這些許可權（也稱為「範圍」）。選取 [接受] 以繼續操作。
登入之後，您應該會看到標頭中顯示的用戶名稱。

現在您已登入，讓我們看看用來登入使用者並擷取存取令牌和使用者配置檔的程序代碼。您將了解屬於 Microsoft Graph 工具組一部分的 mgt-login Web 元件。

小提示

如果您使用 Visual Studio Code，您可以選取下列專案來直接開啟檔案：

Windows/Linux： Ctrl + P
Mac： Cmd + P

然後輸入您要開啟的檔案名。

開啟 用戶端/package.json ，並注意到 @microsoft/mgt 和 @microsoft/mgt-components 套件包含在相依性中。此 @microsoft/mgt 套件包含 MSAL（Microsoft 驗證連結庫）提供者功能和 Web 元件，例如 mgt-login 和其他可用來登入使用者及擷取及顯示組織數據的 Web 元件。
開啟 client/src/main.ts ，並注意下列從套件匯 @microsoft/mgt-components 入。匯入的符號可用來註冊應用程式中所使用的Microsoft Graph 工具元件。
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
捲動至檔案底部，並記下下列程序代碼：
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
此程式代碼會 mgt-login註冊、 mgt-search-results和 mgt-person Web 元件，並讓它們可用於應用程式。
若要使用 mgt-login 元件來登入使用者，Microsoft Entra ID 應用程式的用戶端標識碼（儲存在 ENTRAID_CLIENT_ID 檔案中）需要參考及使用。

開啟 graph.service.ts 並找出函 init() 式。檔案的完整路徑是 client/src/app/core/graph.service.ts。您會看到下列匯入和程式代碼：

import { Msal2Provider, Providers, ProviderState } from '@microsoft/mgt';

init() {
    if (!this.featureFlags.microsoft365Enabled) return;

    if (!Providers.globalProvider) {
        console.log('Initializing Microsoft Graph global provider...');
        Providers.globalProvider = new Msal2Provider({
            clientId: ENTRAID_CLIENT_ID,
            scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                    'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
        });
    }
    else {
        console.log('Global provider already initialized');
    }
}

此程式代碼會建立新的 Msal2Provider 物件，從您的應用程式註冊傳遞Microsoft Entra ID 用戶端識別碼，以及 scopes 應用程式將要求存取權的。 scopes用來要求存取應用程式將存取的 Microsoft Graph 資源。 Msal2Provider建立對象之後，它會指派給 Providers.globalProvider 物件，此物件是由 Microsoft Graph 工具元件用來從 Microsoft Graph 擷取數據。

在編輯器中開啟 header.component.html ，並找出 mgt-login 元件。檔案的完整路徑是 client/src/app/header/header.component.html。
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
mgt-login 元件可讓使用者登入，並提供與 Microsoft Graph 搭配使用的令牌存取權。成功登入時， loginCompleted 會觸發事件，其會呼叫函 loginCompleted() 式。雖然 mgt-login 在此範例中使用於 Angular 元件中，但它與任何 Web 應用程式相容。

mgt-login 元件的顯示取決於設定為 featureFlags.microsoft365Enabledtrue的值。此自定義旗標會檢查環境變數是否存在 ENTRAID_CLIENT_ID ，以確認應用程式已正確設定，且能夠針對 Microsoft Entra 標識符進行驗證。新增旗標以容納用戶選擇只完成教學課程中的 AI 或通訊練習，而不是遵循整個練習順序的情況。
開啟 header.component.ts 並找出函 loginCompleted 式。當事件發出並處理使用 loginCompleted擷取已登入使用者配置檔時Providers.globalProvider，就會呼叫此函式。
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
在此範例中，正在對 Microsoft Graph me API 進行呼叫，以擷取使用者的配置檔（me 代表目前登入的使用者）。程式 this.userLoggedIn.emit(me) 代碼語句會從元件發出事件，以將配置檔數據傳遞至父元件。在此案例中，父元件app.component.ts檔案，這是應用程式的根元件。

若要深入瞭解 mgt-login 元件，請流覽 Microsoft Graph 工具組檔。
既然您已登入應用程式，讓我們看看如何擷取組織數據。

後續步驟

組織數據：擷取檔案、聊天和傳送訊息給Teams

共用方式為

組織數據：登入使用者並取得存取令牌

使用登入功能

探索登入程序代碼

後續步驟

意見反應

其他資源