Criar uma guia do Microsoft Teams com o Microsoft Graph Toolkit

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 logon único (SSO) e não requer um back-end. Ele usa o Kit de Ferramentas do Teams como o sistema de andaimes.

Criar uma guia envolve as seguintes etapas:

1. Crie uma nova guia do Teams usando o React e a IU do Fluent 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 o React e a IU do Fluent com o Kit de ferramentas do Teams

Para começar, consulte Criar um novo projeto do Teams para colocar sua guia em funcionamento. Quando solicitado a escolher os recursos do seu novo aplicativo, selecione React com IU do Fluent. Quando solicitado a escolher uma Linguagem de Programação, selecione TypeScript. De resto, siga o caminho normal do assistente.

Substitua o conteúdo do Tab.tsx arquivo

Remova o conteúdo do arquivo e use o código a /src/components/Tab.tsx seguir. Isso ajudará a focar no objetivo a ser alcançado.

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 lida com toda a lógica e interações que precisam ser implementadas com o SDK do Teams para autenticar o usuário.

Para inicializar o provedor em seu código JavaScript, adicione o imports seguinte código na 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;

Dentro do Tab 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 Microsoft Graph Toolkit. Os primeiros componentes que você provavelmente desejará adicionar são uma pessoa e uma agenda. Primeiro, atualize seu imports para @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 do Microsoft 365 de destino em que as guias pessoais possam ser executadas: Depurar no Teams, Depurar no Outlook ou Depurar no aplicativo Microsoft 365 e escolha Executar e Depurar.

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

• O que fazer se eu não quiser instalar o certificado de desenvolvimento? (Windows)
• O que fazer se eu não quiser instalar o certificado de desenvolvimento? (WSL)

Próximas etapas

• Experimente os componentes do playground.
• Faça uma pergunta no Microsoft Q&R.
• Relate bugs ou deixe uma solicitação de recurso no GitHub.
• Confira os exemplos do Microsoft TeamsFx.