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 プロバイダーのバージョン <= v2.7.1 を使用している場合は、次の手順に従って最新の TeamsFx プロバイダーにアップグレードできます。
TeamsFx プロバイダーのバージョンを =3.0.0 に >アップグレードし、TeamsFx SDK >= 2.0.0 にアップグレードする
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);