使用 Microsoft Graph 工具包生成 Microsoft Teams 选项卡

  • 项目

本主题介绍如何开始在 Microsoft Teams 解决方案中使用 Microsoft Graph 工具包。 本指南适用于没有单一登录 (SSO) 的单页应用，不需要后端。 它使用 Teams 工具包作为基架系统。

生成选项卡涉及以下步骤：

  1. 使用 React 和 Fluent UI 和 Teams 工具包生成新的 Teams 选项卡。
  2. 替换文件的内容 Tab.tsx 。
  3. 初始化 TeamsFx 提供程序。
  4. 添加组件。
  5. 测试应用。

通过 Teams 工具包使用 React 和 Fluent UI 生成新的 Teams 选项卡

若要开始，请参阅 创建新的 Teams 项目 以启动并运行选项卡。 当系统提示选择新应用的功能时，请选择“使用 Fluent UI React”。 当系统提示选择 编程语言时，请选择“ TypeScript”。 对于其余部分，请浏览向导的常规路径。

替换文件的内容Tab.tsx

删除文件的内容并 /src/components/Tab.tsx 使用以下代码。 这将有助于专注于要实现的目标。

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

初始化 TeamsFx 提供程序

Microsoft Graph 工具包提供程序允许对组件的 Microsoft Graph 进行身份验证和访问。 若要了解详细信息，请参阅使用提供程序。 TeamsFx 提供程序处理需要使用 Teams SDK 实现的所有逻辑和交互，以便对用户进行身份验证。

若要在 JavaScript 代码中初始化提供程序，请在文件的 节中添加 imports 以下代码：

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 ，在 React.useEffect 语句之前添加以下内容：

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>将 替换为以下代码：

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

添加组件

现在，你已准备好添加任何 Microsoft Graph 工具包组件。 可能需要添加的第一个组件是个人和议程。 首先，为 @microsoft/mgt-react更新 ：imports

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

在文件底部的 之间 <></> 添加组件：

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

测试应用

  1. 在 Visual Studio Code 中按F5或使用 Run and Debug Activity Panel 。
  2. 选择个人选项卡可以运行的目标 Microsoft 365 应用程序： 在 Teams 中调试、 在 Outlook 中调试或在 Microsoft 365 应用中调试，然后选择 “运行和调试”。

注意 如果在运行选项卡 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时收到 HTTPS 错误，请参阅以下文章：

后续步骤