Compartilhar via

Provedor teamsFx

  • Artigo

Use o provedor TeamsFx dentro de seus aplicativos do Microsoft Teams para fornecer acesso aos componentes do Microsoft Graph Toolkit ao Microsoft Graph.

Para saber mais sobre provedores de autenticação, consulte Provedores.

Introdução

Inicialize o provedor dentro de 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;

Use 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 você pode adicionar qualquer componente em sua página HTML ou em seu render() método ao usar React e ele usará o contexto TeamsFx para acessar o 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 mostra como inicializar o provedor TeamsFx, consulte a amostra Exportador de Contatos.

Atualizar da versão antiga do provedor TeamsFx

Se você estiver usando a versão <do provedor do TeamsFx = v2.7.1, poderá seguir estas etapas para atualizar para o provedor mais recente do TeamsFx:

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

  2. Substitua o código relacionado ao provedor teamsFx como 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