Créer un onglet Microsoft Teams avec la Boîte à outils Microsoft Graph

  • Article

Cette rubrique présente la méthode pour commencer à utiliser la Boîte à outils Microsoft Graph dans une solution Microsoft Teams. Ce guide concerne une application monopage sans authentification unique (SSO) et ne nécessite pas de back-end. Il utilise le Kit de ressources Teams comme système de génération automatique.

La création d’un onglet implique les étapes suivantes :

  1. Créez un nouvel onglet Teams à l’aide de React et de l’interface utilisateur Fluent avec le Kit de ressources Teams.
  2. Remplacez le contenu du Tab.tsx fichier.
  3. Initialisez le fournisseur TeamsFx.
  4. Ajoutez des composants.
  5. Testez votre application.

Créer un nouvel onglet Teams à l’aide de React et de l’interface utilisateur Fluent avec le Kit de ressources Teams

Pour commencer, consultez Créer un projet Teams pour que votre onglet soit opérationnel. Lorsque vous êtes invité à choisir les fonctionnalités de votre nouvelle application, sélectionnez React avec l’interface utilisateur Fluent. Lorsque vous êtes invité à choisir un langage de programmation, sélectionnez TypeScript. Pour le reste, parcourez le chemin d’accès normal de l’Assistant.

Remplacer le contenu du Tab.tsx fichier

Supprimez le contenu du /src/components/Tab.tsx fichier et utilisez le code suivant. Cela vous aidera à vous concentrer sur l’objectif à atteindre.

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

Initialiser le fournisseur TeamsFx

Les fournisseurs du Kit de ressources Microsoft Graph permettent l’authentification et l’accès à Microsoft Graph pour les composants. Pour en savoir plus, consultez Utilisation des fournisseurs. Le fournisseur TeamsFx gère toutes les logiques et interactions qui doivent être implémentées avec le SDK Teams pour authentifier l’utilisateur.

Pour initialiser le fournisseur dans votre code JavaScript, ajoutez le code suivant dans la imports section de votre fichier :

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;

Dans le Tab composant, avant l’instruction React.useEffect , ajoutez ce qui suit :

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

Remplacez par <Button> le code suivant :

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

Ajouter des composants

À présent, vous êtes prêt à ajouter l’un des composants du Kit de ressources Microsoft Graph. Les premiers composants que vous souhaiterez probablement ajouter sont une personne et un agenda. Tout d’abord, mettez à jour votre imports pour @microsoft/mgt-react:

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

Ajoutez votre composant entre le <></> en bas du fichier :

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

Tester votre application

  1. Appuyez F5 ou utilisez dans Run and Debug Activity Panel Visual Studio Code.
  2. Sélectionnez une application Microsoft 365 cible dans laquelle les onglets personnels peuvent s’exécuter : Déboguer dans Teams, Déboguer dans Outlook ou Déboguer dans l’application Microsoft 365, puis choisissez Exécuter et déboguer.

Note Si vous recevez l’erreur HTTPS lors de l’exécution de votre onglet 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, consultez les articles suivants :

Étapes suivantes