Creación de una pestaña de Microsoft Teams con el kit de herramientas de Microsoft Graph

  • Artículo

En este tema se explica cómo empezar a usar el kit de herramientas de Microsoft Graph en una solución de Microsoft Teams. Esta guía es para una aplicación de página única sin inicio de sesión único (SSO) y no requiere un back-end. Usa el kit de herramientas de Teams como sistema de scaffolding.

La creación de una pestaña implica los pasos siguientes:

  1. Cree una nueva pestaña de Teams con React y la interfaz de usuario de Fluent con el kit de herramientas de Teams.
  2. Reemplace el contenido del Tab.tsx archivo.
  3. Inicialice el proveedor TeamsFx.
  4. Agregar componentes.
  5. Pruebe la aplicación.

Creación de una nueva pestaña de Teams con React y la interfaz de usuario de Fluent con el kit de herramientas de Teams

Para empezar, consulte Creación de un nuevo proyecto de Teams para poner la pestaña en funcionamiento. Cuando se le pida que elija las funcionalidades de la nueva aplicación, seleccione React con la interfaz de usuario de Fluent. Cuando se le pida que elija un lenguaje de programación, seleccione TypeScript. En el resto, vaya a través de la ruta de acceso normal del asistente.

Reemplazar el contenido del Tab.tsx archivo

Quite el contenido del /src/components/Tab.tsx archivo y use el código siguiente. Esto ayudará a centrarse en el objetivo que se va a lograr.

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 el proveedor TeamsFx

Los proveedores de Microsoft Graph Toolkit habilitan la autenticación y el acceso a Microsoft Graph para los componentes. Para más información, vea Usar los proveedores. El proveedor TeamsFx controla toda la lógica y las interacciones que deben implementarse con el SDK de Teams para autenticar al usuario.

Para inicializar el proveedor en el código JavaScript, agregue el código siguiente en la imports sección del archivo:

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;

En el Tab componente, antes de la React.useEffect instrucción , agregue lo siguiente:

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> Reemplace por el código siguiente:

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

Agregar componentes

Ahora, está listo para agregar cualquiera de los componentes del kit de herramientas de Microsoft Graph. Es probable que los primeros componentes que quiera agregar sean una persona y una agenda. En primer lugar, actualice para imports@microsoft/mgt-react:

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

Agregue el componente entre la <></> parte inferior del archivo:

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

Probar la aplicación

  1. Presione F5 o use en Visual Studio CodeRun and Debug Activity Panel.
  2. Seleccione una aplicación de Microsoft 365 de destino donde se puedan ejecutar las pestañas personales: Depurar en Teams, Depurar en Outlook o Depurar en la aplicación Microsoft 365 y elija Ejecutar y depurar.

Nota Si recibe el error HTTPS al ejecutar la pestaña 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, consulte los artículos siguientes:

Pasos siguientes