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);

関連コンテンツ