Создание вкладки Microsoft Teams с помощью набора средств Microsoft Graph

  • Статья

В этом разделе описывается, как приступить к работе с набором средств Microsoft Graph в решении Microsoft Teams. Это руководство предназначено для одностраничного приложения без единого входа и не требует серверной части. В качестве системы формирования шаблонов используется набор средств Teams.

Создание вкладки включает следующие действия.

  1. Создайте новую вкладку Teams с помощью React и пользовательского интерфейса Fluent с помощью набора средств Teams.
  2. Замените содержимое Tab.tsx файла.
  3. Инициализация поставщика TeamsFx.
  4. Добавление компонентов.
  5. Протестируйте приложение.

Создание новой вкладки Teams с помощью React и пользовательского интерфейса Fluent с помощью набора средств Teams

Чтобы приступить к работе, см . статью Создание проекта Teams для запуска вкладки. При появлении запроса на выбор возможностей нового приложения выберите React с пользовательским интерфейсом Fluent. При появлении запроса на выбор языка программирования выберите 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 Toolkit обеспечивают проверку подлинности и доступ к Microsoft Graph для компонентов. Дополнительные сведения см. в статье Использование поставщиков. Поставщик TeamsFx обрабатывает всю логику и взаимодействия, которые необходимо реализовать с помощью пакета SDK Для Teams для проверки подлинности пользователя.

Чтобы инициализировать поставщик в коде 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 Toolkit. Первые компоненты, которые вы, скорее всего, захотите добавить, — это человек и повестка дня. Сначала обновите для imports@microsoft/mgt-react:

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

Добавьте компонент между элементом в <></> нижней части файла:

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

Тестирование приложения

  1. Нажмите F5 или используйте Run and Debug Activity Panel в Visual Studio Code.
  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 , см. следующие статьи:

Дальнейшие действия