组织数据：登录用户并获取访问令牌

2025-06-13

用户需要使用 Microsoft Entra ID 进行身份验证，以便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 和其他组件，可用于登录用户并检索和显示组织数据。
打开 客户端/src/main.ts ，请注意以下从 @microsoft/mgt-components 包导入。导入的符号用于注册应用程序中使用的 Microsoft Graph 工具包组件。
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
滚动到文件底部并记下以下代码：
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
此代码注册 mgt-login和 mgt-search-resultsWeb 组件， mgt-person 并启用它们以便在应用程序中使用。
若要使用 mgt 登录组件登录用户，需要引用和使用Microsoft Entra ID 应用的客户端 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 客户端 ID，以及 scopes 应用将请求访问的对象。用于 scopes 请求访问应用将访问的 Microsoft Graph 资源。 Msal2Provider创建对象后，会将其Providers.globalProvider分配给对象，该对象由 Microsoft Graph 工具包组件用来从 Microsoft Graph 检索数据。

在编辑器中打开 header.component.html ，找到 mgt 登录 组件。文件的完整路径 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.microsoft365Enabled要设置为true的值。此自定义标志检查 ENTRAID_CLIENT_ID 是否存在环境变量，以确认应用程序是否已正确配置，并且能够针对 Microsoft Entra ID 进行身份验证。添加标志以适应用户选择仅完成教程中的 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 图形 me API 以检索用户的配置文件（me 表示当前登录的用户）。该 this.userLoggedIn.emit(me) 代码语句从组件发出事件，以将配置文件数据传递给父组件。在这种情况下，父组件 app.component.ts 文件，这是应用程序的根组件。

若要详细了解 mgt-login 组件，请访问 Microsoft Graph 工具包文档。
登录到应用程序后，让我们看看如何检索组织数据。

下一步

组织数据：检索文件、聊天和向 Teams 发送邮件

通过

组织数据：登录用户并获取访问令牌

使用登录功能

浏览登录代码

下一步

反馈

其他资源