使用 Microsoft Graph 应用程序生成ToolkitBuild a web application with the Microsoft Graph Toolkit

本主题介绍如何在用 javaScript 编写的 Web 应用程序中Toolkit Microsoft Graph 应用程序入门。This topic describes how to get started with the Microsoft Graph Toolkit in a web application written in vanilla JavaScript. 如果你想要了解如何将 Toolkit 与 Web 框架一起使用,请参阅"生成 Web 应用 (React) "或"使用 Angular (生成 web ) "。 If you would like to learn how to use the Toolkit with a web framework, see Build a web app (React) or Build a web app (Angular).

Microsoft Graph Toolkit入门包括以下步骤:Getting started with the Microsoft Graph Toolkit involves the following steps:

  1. 将 Microsoft Graph Toolkit添加到你的项目中。Add Microsoft Graph Toolkit to your project.
  2. 初始化 MSAL 提供程序。Initialize the MSAL Provider.
  3. 添加组件。Add components.
  4. 测试应用程序。Test your application.

将 Microsoft Graph Toolkit添加到项目Add the Microsoft Graph Toolkit to your project

可以在应用程序中使用 Microsoft Graph Toolkit,方法为直接通过取消 (加载程序) 安装 npm 包。You can use the Microsoft Graph Toolkit in your application by referencing the loader directly (via unpkg) or by installing the npm package.

若要通过 mgt Toolkit使用脚本,请向代码添加脚本中的引用:To use the Toolkit via mgt-loader, add the reference in a script to your code:

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

注意:如果你面向的浏览器(如 IE11)在本机不支持 Web 组件,可能需要包括 填充Note: If you're targeting a browser such as IE11 that does not support web components natively, you might need to include polyfills.

初始化 MSAL 提供程序Initialize the MSAL Provider

Microsoft Graph Toolkit提供程序为组件启用身份验证并访问 Microsoft Graph。The Microsoft Graph Toolkit providers enable authentication and access to Microsoft Graph for the components. 若要了解更多信息,请参阅"使用提供程序"。To learn more, see Using the providers. MSAL 提供程序使用MSAL.js登录用户和获取令牌。The MSAL Provider uses MSAL.js to sign in users and acquire tokens. 可以在 HTML 或 JavaScript 中初始化 MSAL 提供程序。You can initialize the MSAL provider in your HTML or JavaScript.

如果要使用自己的后端身份验证,请使用代理 提供程序 替代 MSAL 提供程序。If you would like to use your own backend authentication, use the Proxy Provider in place of the MSAL provider.

可以选择在 HTML 或 JavaScript 代码中初始化提供程序。You can choose to initialize the provider in either your HTML or your JavaScript code.

mgt-msal-provider 组件添加到 HTML 页面,并设置为 client-id 应用程序客户端 ID。Add the mgt-msal-provider component to your HTML page and set the client-id to your application client-id.

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

客户端 ID 是初始化提供程序所需的唯一属性,但您可以设置其他选项。The client ID is the only property required to initialize the provider, but you can set additional options. 有关完整列表,请参阅Msal Provider。For the full list, see Msal Provider.

创建应用/客户端 IDCreating an app/client ID

若要获取客户端 ID,需要在 Azure AD 中 注册 应用程序。In order to get a client ID, you need to register your application in Azure AD.

注意:MSAL 仅支持 OAuth 的隐式流。Note: MSAL only supports the Implicit Flow for OAuth. 请确保在 Azure 门户中启用应用程序中的隐式流 (默认情况下未启用它) 。Make sure to enable Implicit Flow in your application in the Azure Portal (it is not enabled by default). "身份验证"下,找到 隐式授予 部分并选择 访问 令牌和 ID 令牌 的复选框Under Authentication, find the Implicit grant section and select the checkboxes for Access tokens and ID tokens.

添加组件Add components

初始化 MSAL 提供程序后,就可以开始使用任何Toolkit组件。After you initialize the MSAL provider, you can start using any of the Toolkit components.

下面是使用 mgt 加载程序、HTML 中初始化的 MSAL 提供程序和登录组件的完整工作示例:The following is a full working example using mgt-loader, the MSAL Provider initialized in HTML, and the Login component:

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

这是使用 ES6 模块、HTML 中初始化的 MSAL 提供程序和登录组件的示例:This is an example using the ES6 modules, the MSAL Provider initialized in HTML, and the Login component:

<script type="module" src="node_modules/@microsoft/mgt/dist/es6/index.js"></script>

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

<mgt-login></mgt-login>

测试应用Test your app

为了测试你的应用,MSAL 要求页面承载在 Web 服务器中,以便进行身份验证重定向。In order to test your app, MSAL requires the page to be hosted in a web server for the authentication redirects.

如果刚开始操作并且想要玩游戏,可以在 Visual Studio 代码或任何类似的轻型开发服务器中使用 Live Server。If you're just getting started and want to play around, you can use Live Server in Visual Studio Code or any similar lightweight development server. 下载扩展名,然后使用实时服务器打开 HTML 文件。Download the extension and open your HTML file using live server.

注意: 确保应用 注册中的重定向 URI 设置为托管应用程序的本地主机端口。Note: Make sure the redirect URI in your app registration is set to the localhost port your application is hosted on. 转到 Azure 门户中的应用注册 单击" 管理下的身份验证",然后添加正确的 重定向 URI。Go to your app registration in the Azure portal, click Authentication under manage, and add the correct redirect URI.

后续步骤Next Steps