Criar uma guia do Microsoft Teams com o Kit de Ferramentas do Microsoft Graph

  • Artigo

Este tópico aborda como começar a usar o Microsoft Graph Toolkit em uma solução do Microsoft Teams. Este guia é para um aplicativo de página única sem SSO (logon único) e não requer um back-end. Ele usa o Kit de Ferramentas do Teams como o sistema de scaffolding.

Criar uma guia envolve as seguintes etapas:

  1. Crie uma nova guia do Teams usando React e interface do usuário fluente com o Kit de Ferramentas do Teams.
  2. Substitua o conteúdo do Tab.tsx arquivo.
  3. Inicialize o Provedor teamsFx.
  4. Adicione os componentes.
  5. Teste seu aplicativo.

Criar uma nova guia do Teams usando React e interface do usuário fluente com o Kit de Ferramentas do Teams

Para começar, confira Criar um novo projeto do Teams para colocar sua guia em execução. Quando solicitado a escolher os recursos do novo Aplicativo, selecione React com a interface do usuário fluente. Quando solicitado a escolher uma Linguagem de Programação, selecione TypeScript. Para o restante, siga o caminho regular do assistente.

Substituir o conteúdo do Tab.tsx arquivo

Remova o conteúdo do /src/components/Tab.tsx arquivo e use o código a seguir. Isso ajudará a se concentrar na meta a ser alcançada.

import { useContext } from "react";
import { TeamsFxContext } from "./Context";
import React from "react";
import { applyTheme } from "@microsoft/mgt-react";
import { Button } from "@fluentui/react-components";

export default function Tab() {
  const { themeString } = useContext(TeamsFxContext);
  const [loading, setLoading] = React.useState<boolean>(false);
  const [consentNeeded, setConsentNeeded] = React.useState<boolean>(false);

  React.useEffect(() => {
    applyTheme(themeString === "default" ? "light" : "dark");
  }, [themeString]);

  return (
    <div>
      {consentNeeded && (
        <>
          <p>
            Click below to authorize button to grant permission to using
            Microsoft Graph.
          </p>
          <Button appearance="primary">Authorize</Button>
        </>
      )}

      {!consentNeeded && <></>}
    </div>
  );
}

Inicializar o Provedor teamsFx

Os provedores do Microsoft Graph Toolkit habilitam a autenticação e o acesso ao Microsoft Graph para os componentes. Para saber mais, confira Usando os provedores. O Provedor TeamsFx manipula toda a lógica e as interações que precisam ser implementadas com o SDK do Teams para autenticar o usuário.

Para inicializar o provedor no código JavaScript, adicione o seguinte código na imports seção do arquivo:

import { Providers, ProviderState } from "@microsoft/mgt-react";
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 scopes = ["User.Read", "Calendars.Read"];
const credential = new TeamsUserCredential(authConfig);
const provider = new TeamsFxProvider(credential, scopes);
Providers.globalProvider = provider;

Tab No componente, antes da React.useEffect instrução, adicione o seguinte:

React.useEffect(() => {
  const init = async () => {
    try {
      await credential.getToken(scopes);
      Providers.globalProvider.setState(ProviderState.SignedIn);
    } catch (error) {
      setConsentNeeded(true);
    }
  };

  init();
}, []);

const consent = async () => {
  setLoading(true);
  await credential.login(scopes);
  Providers.globalProvider.setState(ProviderState.SignedIn);
  setLoading(false);
  setConsentNeeded(false);
};

Substitua o <Button> pelo seguinte código:

<Button appearance="primary" disabled={loading} onClick={consent}>
  Authorize
</Button>

Adicionar os componentes

Agora, você está pronto para adicionar qualquer um dos componentes do Kit de Ferramentas do Microsoft Graph. Os primeiros componentes que você provavelmente deseja adicionar são uma pessoa e uma agenda. Primeiro, atualize o para imports@microsoft/mgt-react:

import { Agenda, Person, applyTheme } from "@microsoft/mgt-react";

Adicione seu componente entre o <></> na parte inferior do arquivo:

<Person personQuery="me" />
<Agenda></Agenda>

Testar seu aplicativo

  1. Pressione F5 ou use o Run and Debug Activity Panel no Visual Studio Code.
  2. Selecione um aplicativo Microsoft 365 de destino em que as guias pessoais podem ser executadas: Depurar no Teams, Depurar no Outlook ou Depurar no aplicativo Microsoft 365 e escolher Executar e Depurar.

Nota Se você receber o erro HTTPS ao executar sua guia It looks like the webpage at **https://localhost:53000/index.html#/tab** might be having issues, or it may have moved permanently to a new web address, confira os seguintes artigos:

Próximas etapas