通过

使用 Microsoft Graph 工具包生成 Web 应用程序

警告

Microsoft Graph 工具包已弃用。 停用期从 2025 年 9 月 1 日开始，计划于 2026 年 8 月 28 日完全停用。 开发人员应迁移到使用 Microsoft Graph SDK 或其他受支持的Microsoft Graph 工具来构建 Web 体验。 有关详细信息，请参阅 弃用公告。

本主题介绍如何在用 vanilla JavaScript 编写的 Web 应用程序中开始使用 Microsoft Graph 工具包。 有关分步教程，请尝试 使用 Microsoft Graph 工具包入门模块。 若要了解如何将工具包与 Web 框架配合使用，请参阅生成 Web 应用 (React) 或 (Angular) 生成 Web 应用。

工具包入门包括以下步骤：

  1. 将 Microsoft Graph 工具包添加到项目。
  2. 初始化 Microsoft 身份验证库 2 (MSAL2) 提供程序。
  3. 添加组件。
  4. 测试应用程序。

将 Microsoft Graph 工具包添加到项目

可以通过安装 npm 包或从内容分发网络 (CDN) 加载它，在应用程序中使用 Microsoft Graph 工具包。

若要通过 CDN 使用工具包，请将以下脚本和标记添加到 HTML 页面：

<script type="module">
  import {
    registerMgtComponents,
    Providers,
    Msal2Provider,
  } from "https://unpkg.com/@microsoft/mgt@4";
  Providers.globalProvider = new Msal2Provider({ clientId: "[CLIENT-ID]" });
  registerMgtComponents();
</script>

初始化 MSAL2 提供程序

Microsoft Graph 工具包提供程序为组件启用身份验证和对 Microsoft Graph 的访问。 若要了解详细信息，请参阅使用提供程序。 MSAL2 提供程序使用 MSAL 浏览器登录用户并获取令牌。 可以在 HTML 或 JavaScript 中初始化此提供程序。

注意：如果当前使用的是 MSAL 提供程序，并且想要更新为 MSAL2 提供程序，请参阅 从 MSAL 提供程序迁移到 MSAL2 提供程序。 如果要使用自己的后端身份验证，请使用 代理提供程序 来代替 MSAL2 提供程序。

可以选择在 JavaScript 代码或 HTML 中初始化提供程序。

若要在 JavaScript 中初始化 MSAL 提供程序，请将以下代码添加到应用程序：

import { Providers } from "@microsoft/mgt-element";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

客户端 ID 是初始化提供程序所需的唯一属性，但可以设置更多选项。 有关完整列表，请参阅 MSAL2 提供程序。

创建应用/客户端 ID

若要获取客户端 ID，需要在 Microsoft Entra ID 中注册应用程序。

添加组件

初始化 MSAL2 提供程序后，可以开始使用任何工具包组件。

此示例使用 ES6 模块、在 JavaScript 中初始化的 MSAL2 提供程序和 Login 组件：

import { Providers } from "@microsoft/mgt-element";
import { registerMgtLoginComponent } from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();

function component() {
  const element = document.createElement("div");
  element.innerHTML = "<mgt-login></mgt-login>";
  return element;
}

document.body.appendChild(component());

以下示例使用 ES6 模块、在 HTML 中初始化的 MSAL2 提供程序和 Login 组件：

<script type="module">
  import { registerMgtMsal2Provider } from "node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js";
  import { registerMgtLoginComponent } from "node_modules/@microsoft/mgt-components/dist/es6/index.js";
  registerMgtMsal2Provider();
  registerMgtLoginComponent();
</script>

<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>

测试应用

若要测试应用，MSAL 要求将页面托管在 Web 服务器中，以便进行身份验证重定向。

如果刚开始并且想要四处游荡，可以在 Visual Studio Code 或任何类似的轻型开发服务器中使用 Live Server。 下载扩展并使用实时服务器打开 HTML 文件。

注意： 确保应用注册中的 重定向 URI 设置为托管应用程序的 localhost 端口。 转到Microsoft Entra 管理中心中的应用注册，单击“管理”下的“身份验证”，并添加正确的重定向 URI。

跟踪用户的登录状态

可以检测用户何时成功登录，并相应地显示特定组件。 例如，如果用户已登录，则显示议程组件。 否则，显示登录界面。

包 mgt-element 提供 isSignedIn 实用工具函数，你可以调用该函数来确定用户是否已登录。

如果通过 npm 包使用工具包，则可以从 @microsoft/mgt-element导入 Provider 和 ProviderState 。

import { Providers } from "@microsoft/mgt-element";
import {
  registerMgtLoginComponent,
  registerMgtAgendaComponent,
} from "@microsoft/mgt-components";
import { Msal2Provider } from "@microsoft/mgt-msal2-provider";
import { isSignedIn } from "@microsoft/mgt-element";

Providers.globalProvider = new Msal2Provider({
  clientId: "<YOUR_CLIENT_ID>",
});

registerMgtLoginComponent();
registerMgtAgendaComponent();

const loadAgenda = () => {
  if (isSignedIn()) {
    document.getElementById("main").innerHTML = "<mgt-agenda></mgt-agenda>";
  }
};

Providers.onProviderUpdated(loadAgenda);

后续步骤

  • Last updated on