TeamsFx-Anbieter

  • Artikel

Verwenden Sie den TeamsFx-Anbieter in Ihren Microsoft Teams-Anwendungen, um Komponenten des Microsoft Graph-Toolkits Zugriff auf Microsoft Graph zu gewähren.

Weitere Informationen zu Authentifizierungsanbietern finden Sie unter Anbieter.

Erste Schritte

Initialisieren Sie den Anbieter in Ihrer Komponente.

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

Verwenden Sie die teamsfx.login(scopes) -Methode, um das erforderliche Zugriffstoken abzurufen.

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

Jetzt können Sie eine beliebige Komponente auf Ihrer HTML-Seite oder in Ihrer render() Methode hinzufügen, wenn Sie React verwenden, und sie verwendet den TeamsFx-Kontext für den Zugriff auf 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>
  );
}

Ein Beispiel, das zeigt, wie Sie den TeamsFx-Anbieter initialisieren, finden Sie im Beispiel für den Kontaktexport.

Upgrade von der alten Version des TeamsFx-Anbieters

Wenn Sie die Microsoft TeamsFx-Anbieterversion <= v2.7.1 verwenden, können Sie die folgenden Schritte ausführen, um ein Upgrade auf den neuesten TeamsFx-Anbieter durchzuführen:

  1. Upgrade der TeamsFx-Anbieterversion auf >=3.0.0 und TeamsFx SDK >= 2.0.0

  2. Ersetzen Sie den Code des TeamsFx-Anbieters wie folgt:

    Vor

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

    ->

    Nach

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

Verwandte Inhalte