使用 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);

后续步骤