Provedor teamsFx

Utilize o fornecedor do TeamsFx nas suas aplicações do Microsoft Teams para fornecer aos componentes do Microsoft Graph Toolkit acesso ao Microsoft Graph.

Para saber mais sobre os fornecedores de autenticação, veja Fornecedores.

Introdução

Inicialize o fornecedor no seu componente.

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

Utilize o teamsfx.login(scopes) método para obter o token de acesso necessário.

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

Agora, pode adicionar qualquer componente na sua página HTML ou no seu render() método ao utilizar React e este utilizará o contexto do TeamsFx para aceder ao 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>
  );
}

Para obter um exemplo que lhe mostra como inicializar o fornecedor do TeamsFx, veja o exemplo Exportador de Contactos.

Atualizar a partir da versão antiga do fornecedor do TeamsFx

Se estiver a utilizar a versão <do fornecedor do TeamsFx = v2.7.1, pode seguir estes passos para atualizar para o fornecedor do TeamsFx mais recente:

1. Atualizar a versão do fornecedor do TeamsFx para >=3.0.0 e o SDK >do TeamsFx = 2.0.0

2. Substitua o código relacionado com o fornecedor do TeamsFx, conforme abaixo:

   Before

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

   ->

   After

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

Conteúdo relacionado

• Introdução ao desenvolvimento do Microsoft Teams e do Teams Toolkit
• TeamsFx SDK
• Workshop one Productivity Hub (Um Hub de Produtividade)