通过

Microsoft Graph 工具包入门

  • 项目

可以轻松将 Microsoft Graph 工具包组件添加到 Web 应用程序、SharePoint Web 部件或 Microsoft Teams 选项卡。 这些组件基于 Web 标准，可用于普通 JavaScript 项目或常用 Web 框架（如 Reach、Angular 和 Vue.js）。

观看此简短视频以开始使用工具包。

有关分步教程，请参阅 Microsoft Graph 工具包入门 模块。

设置 Microsoft 365 租户

若要使用 Microsoft Graph 工具包开发应用，需要访问 Microsoft 365 租户。 如果没有 Microsoft 365 租户，可以通过 Microsoft 365 开发人员计划获得一个租户;有关详细信息，请参阅 常见问题解答。 或者，可以 注册 1 个月的免费试用版或购买 Microsoft 365 计划。

设置开发环境

若要使用工具包进行开发，需要：

  • 文本编辑器或 IDE。 可以使用所选的编辑器或 IDE，也可以免费安装和使用Visual Studio Code。
  • 新式 Web 浏览器，如 Microsoft Edge、Google Chrome 或 Firefox。
  • Node.js 的 LTS 版本，可从 nodejs.org 安装。

使用 Microsoft Graph 工具包

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

通过 ES6 模块使用工具包可以完全控制捆绑过程，并允许你仅捆绑应用程序所需的代码。 若要使用 ES6 模块，请将 @microsoft/mgt-element、 @microsoft/mgt-components和 @microsoft/mgt-msal2-provider 包添加到项目中：

npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider

若要在 HTML 中将组件用作自定义元素，必须注册它们。 若要在代码中使用组件，请导入并运行必要的组件注册函数。 以下示例演示如何为议程和登录组件执行此操作：

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

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

作为快捷方式，如果要从 @microsoft/mgt-components注册所有组件，可以使用 registerMgtComponents() 帮助程序方法。 提供程序的声明性用法仍要求单独注册相应的提供程序，因为它们源自不同的包。

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

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

重要

使用摇树支持捆绑程序（如 Webpack 或 Rollup）时，需要导入和注册各个组件。 这可确保将任何未使用的组件从生成中树中摇出来。

还可以强制配置提供程序，如以下示例所示：

<script type="module">
  import { Providers } from 'node_modules/@microsoft/mgt-element/dist/es6/index.js';
  import { Msal2Provider } from 'node_modules/@microsoft/mgt-msal2-provider/dist/es6/index.js';
  import { registerMgtComponents } from 'node_modules/@microsoft/mgt-components/dist/es6/index.js';
  Providers.globalProvider = new Msal2Provider({clientId: '<YOUR_CLIENT_ID>'});
  registerMgtComponents();
</script>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>