Fournisseur TeamsFx

Utilisez le fournisseur TeamsFx dans vos applications Microsoft Teams pour fournir aux composants du Kit de ressources Microsoft Graph l’accès à Microsoft Graph.

Pour en savoir plus sur les fournisseurs d’authentification, voir Fournisseurs.

Prise en main

Initialisez le fournisseur à l’intérieur de votre composant.

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

Utilisez la teamsfx.login(scopes) méthode pour obtenir le jeton d’accès requis.

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

Vous pouvez maintenant ajouter n’importe quel composant dans votre page HTML ou dans votre render() méthode lors de l’utilisation de React et il utilisera le contexte TeamsFx pour accéder à 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>
  );
}

Pour obtenir un exemple qui montre comment initialiser le fournisseur TeamsFx, consultez l’exemple Contacts Exporter.

Mettre à niveau à partir de l’ancienne version du fournisseur TeamsFx

Si vous utilisez la version <du fournisseur TeamsFx = v2.7.1, vous pouvez suivre ces étapes pour effectuer une mise à niveau vers le dernier fournisseur TeamsFx :

1. Mettre à niveau la version du fournisseur TeamsFx vers >=3.0.0, et teamsFx SDK >= 2.0.0

2. Remplacez le code associé au fournisseur TeamsFx comme suit :

   Avant

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

   ->

   Après

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

Contenu connexe

• Prise en main du développement de Microsoft Teams et du Kit de ressources Teams
• Kit de développement logiciel (SDK) TeamsFx
• Atelier One Productivity Hub