TeamsFx 提供商

  • 项目

使用 Microsoft Teams 应用程序内的 TeamsFx 提供程序提供对 Microsoft Graph 的 Microsoft Graph 工具包组件访问权限。

若要详细了解身份验证提供程序，请参阅 提供程序。

入门

在组件内初始化提供程序。

// Import the providers and credential at the top of the page
import {Providers, GraphEndpoint} from '@microsoft/mgt-element';
import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
import {TeamsUserCredential} from "@microsoft/teamsfx";

const scopes = ["User.Read"];
const baseURL: GraphEndpoint = 'https://graph.microsoft.us'; // change the base URL
const teamsfx = new TeamsFx();
const provider = new TeamsFxProvider(teamsfx, scope, baseURL);
Providers.globalProvider = provider;

teamsfx.login(scopes)使用 方法获取所需的访问令牌。

// Put this code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
await teamsfx.login(this.scope);
Providers.globalProvider.setState(ProviderState.SignedIn);

现在，可以使用 React 时，可以在 HTML 页面或方法中添加render()任何组件，并且它将使用 TeamsFx 上下文访问 Microsoft Graph。

<!-- Using HTML -->
<mgt-person query="me" view="threeLines"></mgt-person>

// Using React
public render(): void {
  return (
      <div>
        <Person personQuery="me" view={ViewType.threelines}></Person>
      </div>
  );
}

有关演示如何初始化 TeamsFx 提供程序的示例，请参阅 联系人导出程序示例。

从旧版 TeamsFx 提供程序升级

如果使用的是 TeamsFx 提供程序版本 <= v2.7.1，则可以按照以下步骤升级到最新的 TeamsFx 提供程序：

  1. 将 TeamsFx 提供程序版本升级到 >=3.0.0，TeamsFx SDK >= 2.0.0

  2. 替换与 TeamsFx 提供程序相关的代码，如下所示：

    活动前

    import {Providers} from '@microsoft/mgt-element';
import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
import {TeamsUserCredential} from "@microsoft/teamsfx";
const scope = ["User.Read"];
const teamsfx = new TeamsFx();
const provider = new TeamsFxProvider(teamsfx, scope);
Providers.globalProvider = provider;

// Put these code below in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
await teamsfx.login(this.scope);
Providers.globalProvider.setState(ProviderState.SignedIn);

    ->

    活动后

    import {Providers} from '@microsoft/mgt-element';
import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
import {TeamsUserCredential, TeamsUserCredentialAuthConfig} from "@microsoft/teamsfx";
const authConfig: TeamsUserCredentialAuthConfig = {
    clientId: process.env.REACT_APP_CLIENT_ID,
    initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
};
const scope = ["User.Read"];
const credential = new TeamsUserCredential(authConfig);
const provider = new TeamsFxProvider(credential, scope);
Providers.globalProvider = provider;

// Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
await credential.login(this.scope);
Providers.globalProvider.setState(ProviderState.SignedIn);

相关内容