练习 - 通过使用模板更改数据呈现

  • 2 分钟

在本练习中，你将了解如何自定义登录组件模板以显示已登录用户的电子邮件地址。

准备工作

作为本练习的先决条件，请完成以下步骤。

1.配置 Microsoft Entra 应用

对于本模块，需要具有以下设置的应用程序：

  • 名称： 我的应用
  • 平台： 单页应用程序 (SPA)
  • 支持的帐户类型：任何组织目录中的帐户 (任何 Microsoft Entra 目录 - 多租户) 和个人 Microsoft 帐户 (，例如 Skype、Xbox)
  • 重定向 URI：http://localhost:3000

若要创建此应用程序，请执行以下步骤：

  1. 在浏览器中，转到 Microsoft Entra 管理中心，登录，然后转到 Microsoft Entra ID。

  2. 在左窗格中选择应用注册，然后选择新建注册。

    显示选择

  3. 在“注册应用”屏幕中，输入以下值：

    • 名称：输入应用程序的名称。
    • 支持的帐户类型：选择 任何组织目录中的帐户 (任何 Microsoft Entra 目录 - 多租户) 和个人 Microsoft 帐户 (，例如 Skype、Xbox) 。
    • 重定向 URI (可选)：选择“单页应用程序 (SPA)”，然后输入http://localhost:3000。
    • 选择“注册”。

    显示在 Microsoft Entra ID 中注册应用程序的屏幕截图。

2. 设置环境

  1. 在桌面上创建名为 customize-mgt 的文件夹。

  2. 在 Visual Studio Code 中打开 customize-mgt 文件夹。

  3. 在 Visual Studio Code 中，在 customize-mgt 文件夹中创建名为 index.html 的文件。

  4. 将以下代码复制到 index.html，并将 替换为 YOUR-CLIENT-ID 之前创建的 Microsoft Entra 应用中复制 的应用程序 (客户端) ID 。

    <!DOCTYPE html>
<html lang="en">
    <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>
      <mgt-agenda></mgt-agenda>
    </body>
</html>

  5. 将名为 .vscode 的文件夹添加到项目文件夹的根目录中。

  6. 将名为 settings.json 的文件添加到 .vscode 文件夹中。 将以下代码复制并粘贴到 settings.json 中，并保存该文件。

    {
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}

在登录组件中使用模板

假设要将用户的电子邮件地址显示为登录组件中登录按钮的内容。 可以在 <mgt-login> 中使用 template 标记，并将 signed-in-button-content 添加为 data-type 值。 在模板中，使用 {{personDetails.mail}} 访问并显示用户的电子邮件地址。 登录组件将如下例所示：

<mgt-login>
  <template data-type="signed-in-button-content">
    <div>{{personDetails.mail}}</div>
  </template>
</mgt-login>

提示

如果将 Microsoft Graph Toolkit 与已使用 {{ }} 本身的 JavaScript 库结合使用，则可以将 Microsoft Graph Toolkit 配置为使用其他字符（如 [[ ]] ）来表示模板，避免与 JavaScript 框架冲突。

index.html 的最终版本如此例所示：

<!DOCTYPE html>
<html lang="en">
  <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>
      <template data-type="signed-in-button-content">
        <div>{{personDetails.mail}}</div>
      </template>
    </mgt-login>

    <mgt-agenda
        date="June 28, 2023"
        days="3"
        group-by-day>
    </mgt-agenda>
  </body>
</html>

在浏览器中测试应用

  1. 在 Visual Studio Code 中，选择以下 Visual Studio Code 中的组合键，然后搜索 Live Server：

    • Windows: CTRL+SHIFT+P
    • macOS: COMMAND+SHIFT+P

    运行 Live Server 以测试应用。

  2. 打开浏览器并转到 http://localhost:3000。 如果在启动 Live Server 时 index.html 打开该文件，浏览器将打开 http://localhost:3000/Index.html。 在使用 Microsoft 365 开发人员帐户登录之前，请确保将 URL http://localhost:3000更改为 。 如果不更新 URL，将收到以下错误。

    The redirect URI 'http://localhost:3000/Index.html' specified in the request does not match the redirect URIs configured for the application <Your client ID>. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

  3. 使用 Microsoft 365 开发人员帐户登录。 同意所需权限，然后选择接受。

  4. 最后，登录按钮的内容会在登录后显示用户的电子邮件地址。

显示练习结果的屏幕截图。