Microsoft Teams 提供程序Microsoft Teams provider

使用 Microsoft Teams 选项卡内的 Teams 提供程序促进身份验证和 Microsoft Graph 访问所有组件。Use the Teams provider inside your Microsoft Teams tab to facilitate authentication and Microsoft Graph access to all components.

若要了解有关身份验证提供程序的信息,请参阅 提供程序To learn more about authentication providers, see providers.

提示: 有关如何使用 Teams 提供商创建 Microsoft Teams 应用程序的详细信息,请参阅"生成 Microsoft Teams"选项卡 入门指南。Tip: For details about how to get started with creating a Microsoft Teams application with the Teams Provider, see the Build a Microsoft Teams tab getting started guide.

入门Get started

在使用 Teams 提供程序之前,你将需要确保你已在你的页面中引用了Microsoft Teams SDK。Before using the Teams provider, you will need to make sure you have referenced the Microsoft Teams SDK in your page.

请确保同时安装工具包和 Microsoft Teams SDK。Make sure to install both the toolkit and the Microsoft Teams SDK.

npm install @microsoft/mgt @microsoft/teams-js

接下来,导入和使用提供程序。Next, import and use the provider.

import * as microsoftTeams from "@microsoft/teams-js";
import {Providers, TeamsProvider} from '@microsoft/mgt';

TeamsProvider.microsoftTeamsLib = microsoftTeams;
Providers.globalProvider = new TeamsProvider(config);

where config iswhere config is

export interface TeamsConfig {
  clientId: string;
  authPopupUrl: string; // see below for creating the popup page
  scopes?: string[];
  msalOptions?: Configuration;
}

创建弹出窗口Create the popup page

若要使用 Teams 凭据登录,你需要提供 Teams 应用将在弹出窗口中打开的 URL,这将遵循身份验证流程。In order to sign in with your Teams credentials, you need to provide a URL that the Teams app will open in a popup, which will follow the authentication flow. 此 URL 需要在你的域中,并且需要调用 TeamsProvider.handleAuth(); 该方法。This URL needs to be in your domain, and it needs to call the TeamsProvider.handleAuth(); method. 这是此页面需要执行的唯一工作。That's the only thing that this page needs to do. 例如:For example:

import * as microsoftTeams from "@microsoft/teams-js";
import {Providers, TeamsProvider} from '@microsoft/mgt';

TeamsProvider.microsoftTeamsLib = microsoftTeams;
TeamsProvider.handleAuth();

配置重定向 URIConfigure redirect URIs

在网站上发布弹出窗口后,您需要使用属性中的 auth-popup-url/authPopupUrl URL。After you publish the popup page on your website, you need to use the URL in the auth-popup-url/authPopupUrl property. 此 URL 还需要在 Azure AD 门户的应用配置中配置为有效的重定向 URI。This URL also needs to be configured as a valid redirect URI in your app configuration in the Azure AD portal.

配置 Teams 应用Configure your Teams app

如果你刚开始使用 Teams 应用,请参阅"将选项卡添加到 Microsoft Teams 应用"。If you're just getting started with Teams apps, see Add tabs to Microsoft Teams apps. 您还可以使用 App Studio 快速开发应用清单。You can also use App Studio to quickly develop your app manifest.

创建应用/客户端 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.

另请参阅See also