Freigeben über

Erstellen einer Microsoft Teams-Registerkarte mit dem Microsoft Graph-Toolkit

  • Artikel

In diesem Thema wird beschrieben, wie Sie mit der Verwendung des Microsoft Graph-Toolkits in einer Microsoft Teams-Lösung beginnen. Dieser Leitfaden gilt für eine Single-Page-App ohne einmaliges Anmelden (Single Sign-On, SSO) und erfordert kein Back-End. Es verwendet das Teams Toolkit als Gerüstsystem.

Das Erstellen einer Registerkarte umfasst die folgenden Schritte:

  1. Erstellen Sie eine neue Teams-Registerkarte mit React und Fluent UI mit dem Teams Toolkit.
  2. Ersetzen Sie den Inhalt der Tab.tsx Datei.
  3. Initialisieren Sie den TeamsFx-Anbieter.
  4. Fügen Sie Komponenten hinzu.
  5. Testen Sie Ihre App.

Erstellen einer neuen Teams-Registerkarte mit React und Fluent-Benutzeroberfläche mit dem Teams Toolkit

Informationen zu den ersten Schritten finden Sie unter Erstellen eines neuen Teams-Projekts , um Ihre Registerkarte zum Laufen zu bringen. Wenn Sie aufgefordert werden, die Funktionen Ihrer neuen App auszuwählen, wählen Sie React mit Fluent-Benutzeroberfläche aus. Wenn Sie aufgefordert werden, eine Programmiersprache auszuwählen, wählen Sie TypeScript aus. Gehen Sie im Übrigen den regulären Pfad des Assistenten durch.

Ersetzen des Inhalts der Tab.tsx Datei

Entfernen Sie den Inhalt der /src/components/Tab.tsx Datei, und verwenden Sie den folgenden Code. Dies hilft, sich auf das zu erreichende Ziel zu konzentrieren.

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

Initialisieren des TeamsFx-Anbieters

Microsoft Graph Toolkit-Anbieter ermöglichen die Authentifizierung und den Zugriff auf Microsoft Graph für die Komponenten. Weitere Informationen finden Sie unter Verwendung der Anbieter. Der TeamsFx-Anbieter verarbeitet alle Logik und Interaktionen, die mit dem Teams SDK implementiert werden müssen, um den Benutzer zu authentifizieren.

Um den Anbieter in Ihrem JavaScript-Code zu initialisieren, fügen Sie den folgenden Code im imports Abschnitt Ihrer Datei hinzu:

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;

Fügen Sie innerhalb der Tab Komponente vor der React.useEffect -Anweisung Folgendes hinzu:

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

Ersetzen Sie durch <Button> den folgenden Code:

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

Komponenten hinzufügen

Jetzt können Sie eine der Komponenten des Microsoft Graph-Toolkits hinzufügen. Die ersten Komponenten, die Sie wahrscheinlich hinzufügen möchten, sind eine Person und eine Agenda. Aktualisieren Sie zunächst Ihre imports für @microsoft/mgt-react:

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

Fügen Sie Ihre Komponente zwischen dem <></> am Ende der Datei hinzu:

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

Testen eigener Apps

  1. Drücken F5 oder verwenden Sie in Run and Debug Activity Panel Visual Studio Code.
  2. Wählen Sie eine Microsoft 365-Zielanwendung aus, auf der die persönlichen Registerkarten ausgeführt werden können: Debuggen in Teams, Debuggen in Outlook oder Debuggen in der Microsoft 365-App, und wählen Sie Ausführen und Debuggen aus.

Hinweis Wenn beim Ausführen der Registerkarte 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 addressder HTTPS-Fehler angezeigt wird, lesen Sie die folgenden Artikel:

Nächste Schritte