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

  • 项目

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

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

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

将 Microsoft Graph 工具包添加到项目

可以通过直接引用加载程序 (通过 unpkg) 或安装 npm 包，在应用程序中使用 Microsoft Graph 工具包。

若要通过 mgt-loader 使用工具包，请将脚本中的引用添加到代码中:

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

初始化 MSAL2 提供程序

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

注意：如果当前使用的是 MSAL 提供程序，并且想要更新为 MSAL2 提供程序，请按照 此处列出的步骤操作。 若要使用自己的后端身份验证，请使用 代理提供程序 来代替 MSAL2 提供程序。

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

将 mgt-msal2-provider 组件添加到 HTML 页， client-id 并将 设置为应用程序 client-id。

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

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

创建应用/客户端 ID

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

添加组件

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

下面是使用 mgt-loader、在 HTML 中初始化的 MSAL2 提供程序和登录组件的完整工作示例：

<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
<mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
<mgt-login></mgt-login>

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

<script type="module" src="node_modules/@microsoft/mgt/dist/es6/index.js"></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 端口。 转到Azure 门户中的应用注册，在“管理”下单击“身份验证”，并添加正确的重定向 URI。

跟踪用户的登录状态

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

若要正确检查用户的登录状态，请使用 Providers.onProviderUpdated 函数向providerUpdated事件添加事件处理程序。 在 处理程序中，检查属性上Providers.globalProvider.state存储的提供程序状态。

如果使用的是 mgt-loader 库，则可以从全局mgt属性访问 Provider 和 ProviderState 。

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
</head>
<body>
  <mgt-msal2-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal2-provider>
  <div id="main">
    <mgt-login></mgt-login>
  </div>
  <script>
    const loadAgenda = () => {
      if (mgt.Providers.globalProvider.state === mgt.ProviderState.SignedIn) {
        document.getElementById('main').innerHTML = '<mgt-agenda></mgt-agenda>';
      }
    }
    mgt.Providers.onProviderUpdated(loadAgenda);
  </script>
</body>
</html>

后续步骤