练习 - 使用 Microsoft Graph 工具包登录组件登录应用

12 分钟

在本单元中，你将创建一个 Web 应用程序并浏览初学者项目。然后，你将使用工具包中的登录组件登录到应用程序，并访问 Microsoft Graph 功能。

安装开发代理

若要完成本练习，需要安装 最新版本 的开发代理。开发代理是一种模拟 API 响应的工具。它允许你生成和测试应用程序，而无需Microsoft 365 租户。按照入门说明进行作，并验证开发代理是否正在运行，然后再继续作。

注意

使用开发代理完成本练习时，应用将使用静态的模拟数据。你编写的代码适用于模拟和实时数据配置。若要使用来自 Microsoft 365 租户的实时数据，只需创建Microsoft Entra应用注册并在应用中更新客户端 ID 引用。

下载开发代理预设

若要完成本练习，需要下载此模块的开发代理预设。预设包含用于生成应用程序的模拟数据和响应。若要下载预设，请在终端中运行以下命令：

devproxy preset get learn-msgraph-toolkit-intro

为 Web 应用设置应用结构

为文件创建新文件夹

打开 Visual Studio Code。从命令菜单中选择“文件”>“打开文件夹”。
打开文件夹时，操作系统会提供一个按钮，用于创建 新文件夹。
转到要在其中创建新文件夹的位置，然后选择“新建文件夹”。将文件夹命名为 mgt-app。
在 Visual Studio Code 中打开文件夹 mgt-app。

在项目文件夹下创建文件和文件夹

Web 应用程序将具有一个 HTML 文件和一个用于 Live Server 设置的文件夹。 Live Server 是一个 Visual Studio Code 扩展。让我们创建项目结构。

选择“文件”>“新建文件”。
将文件命名为index.html，并使用 CTRLS+ (Windows) 或COMMANDS+ (macOS) 保存文件。

将以下 HTML 添加到 index.html 中，并保存文件。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

将名为 .vscode 的文件夹添加到项目文件夹的根目录中。
将名为 settings.json 的文件添加到 .vscode 文件夹中。将以下代码复制并粘贴到 settings.json 中，并保存该文件。
```
{
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}
```

使用 Live Server 时，这些设置可确保在本地顺利测试应用程序。

在开始添加代码以在 Web 应用程序中使用该工具包之前，需要设置Microsoft Entra应用程序。

你将使用 Microsoft Entra 应用程序的详细信息，使用 Microsoft 身份验证库 (MSAL) v2 提供程序对应用程序进行身份验证。

设置Microsoft Entra应用程序

在浏览器中，转到Microsoft Entra 管理中心，登录，然后转到Microsoft Entra ID。
在左窗格中选择应用注册，然后选择新建注册。
在“注册应用”屏幕中，输入以下值：
- 名称：输入应用程序的名称。
- 支持的帐户类型：选择任何组织目录中的帐户 (任何Microsoft Entra目录 - 多租户) 和个人Microsoft帐户 (，例如 Skype、Xbox) 。
- 重定向 URI (可选)：选择“单页应用程序 (SPA)”，然后输入http://localhost:3000。
- 选择“注册”。

现在，你已成功设置应用程序，让我们添加一些代码！

将 Microsoft Graph 工具包添加到项目

之前你已了解可以直接从内容交付网络引用该工具包。为此，请将以下代码片段添加到 index.html 文件中的</head>标记之前。

<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

初始化 MSAL v2 提供程序

要对应用程序进行身份验证，请通过使用在上一部分中保存的 应用程序（客户端）ID 初始化 MSAL v2 提供程序。

将以下代码片段添加到 index.html 文件的 <body> 中。

<mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>

将 YOUR-CLIENT-ID 替换为在上一部分中保存的 应用程序（客户端）ID。

若要对应用程序进行身份验证，请使用作为应用程序 ID 初始化 MSAL v2 提供程序 f601c4cb-6902-4675-8415-7db28a4a332d 。开发代理将模拟此模拟应用注册的身份验证过程。

将以下代码片段添加到 index.html 文件的 <body> 中。

<mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>

要添加登录组件，请将以下元素添加到 index.html 文件的正文中。

<mgt-login></mgt-login>

进行所有更改后，index.html 文件应如下所示：

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

保存该文件，然后测试结果！

在浏览器中测试应用

启动开发代理

首先启动开发代理。在终端中运行以下命令：

devproxy --config-file "~appFolder/presets/learn-msgraph-toolkit-intro/devproxyrc.json"

测试应用程序时，使终端保持打开并运行开发代理。

启动应用程序

要在浏览器中测试应用程序，需要安装 Visual Studio Code Live Server。

要在 Live Server 中运行应用程序，请在 Visual Studio Code 中按以下键组合，然后搜索 Live Server：

Windows： CTRL+SHIFT+P
macOS：COMMAND+SHIFT+P

使用 Live Server 代开，选择该选项，然后按 Enter。

Live Server 运行后，它可能会打开页面 http://localhost:3000/index.html。在浏览器中打开 http://localhost:3000。

选择“ 登录”，开发代理将模拟身份验证过程，应用程序将显示模拟登录信息。

选择“登录”，然后输入 Microsoft 365 开发人员租户帐户。首次登录时，系统将要求你同意所需的权限。同意后，应用程序会显示你的登录信息。

显示用户登录后应用程序最终结果的屏幕截图。

现在，你已成功实现用于访问 Microsoft 365 数据的身份验证机制。

注意

感谢你提供有关使用开发代理完成本练习的体验的反馈。请花点时间完成此简短调查。

反馈

此页面是否有帮助？