Criar um separador do Microsoft Teams com o Microsoft Graph Toolkit

Este tópico aborda como começar a utilizar o Microsoft Graph Toolkit numa solução do Microsoft Teams. Este guia destina-se a uma aplicação de página única sem início de sessão único (SSO) e não requer um back-end. Utiliza o Toolkit do Teams como o sistema de andaimes.

Criar um separador envolve os seguintes passos:

1. Crie um novo separador do Teams com React e a IU Fluent com o Teams Toolkit.
2. Substitua o conteúdo do Tab.tsx ficheiro.
3. Inicialize o Fornecedor do TeamsFx.
4. Adicione os componentes.
5. Teste a sua aplicação.

Criar um novo separador do Teams com React e a IU Fluent com o Toolkit do Teams

Para começar, consulte Criar um novo projeto do Teams para colocar o seu separador em funcionamento. Quando lhe for pedido para escolher as capacidades da sua nova Aplicação, selecione React com a IU Fluente. Quando lhe for pedido para escolher uma Linguagem de Programação, selecione TypeScript. Para o resto, percorra o caminho normal do assistente.

Substituir o conteúdo do Tab.tsx ficheiro

Remova o conteúdo do /src/components/Tab.tsx ficheiro e utilize o seguinte código. Isto ajudará a focar-se no objetivo a alcançar.

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 Fornecedor do TeamsFx

Os fornecedores do Microsoft Graph Toolkit permitem a autenticação e o acesso ao Microsoft Graph para os componentes. Para saber mais, confira Usando os provedores. O Fornecedor do TeamsFx processa toda a lógica e interações que têm de ser implementadas com o SDK do Teams para autenticar o utilizador.

Para inicializar o fornecedor no código JavaScript, adicione o seguinte código na imports secção do ficheiro:

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

<Button> Substitua pelo seguinte código:

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

Adicionar os componentes

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

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

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

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

Testar seu aplicativo

1. Prima F5 ou utilize o Run and Debug Activity Panel no Visual Studio Code.
2. Selecione uma aplicação do Microsoft 365 de destino onde os separadores pessoais podem ser executados: Depurar no Teams, Depurar no Outlook ou Depurar na aplicação Microsoft 365 e selecione Executar e Depurar.

Nota Se receber o erro HTTPS ao executar o separador 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 não quiser instalar o certificado de desenvolvimento? (Windows)
• O que fazer se não quiser instalar o certificado de desenvolvimento? (WSL)

Próximas etapas

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