Microsoft Graph Toolkit を使用してMicrosoft Teams タブを作成する

このトピックでは、Microsoft Teams ソリューションで Microsoft Graph Toolkit の使用を開始する方法について説明します。 このガイドは、シングル サインオン (SSO) のないシングルページ アプリ用であり、バックエンドは必要ありません。 Teams Toolkit をスキャフォールディング システムとして使用します。

タブの作成には、次の手順が含まれます。

1. Teams ツールキットを使用して、Reactと Fluent UI を使用して新しい [Teams] タブを構築します。
2. Tab.tsx ファイルの内容を置き換えます。
3. TeamsFx プロバイダーを初期化します。
4. コンポーネントを追加します。
5. アプリをテストします。

Teams Toolkit で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 Toolkit プロバイダーは、コンポーネントの認証と 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 Toolkit コンポーネントのいずれかを追加する準備ができました。 追加する可能性が高い最初のコンポーネントは、人と議題です。 まず、@microsoft/mgt-reactのimportsを更新します。

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

ファイルの下部にある <></> の間にコンポーネントを追加します。

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

アプリのテスト

1. F5を押すか、Visual Studio Code で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 might have moved permanently to a new web addressの実行時に HTTPS エラーが発生した場合は、次の記事を参照してください。

• 開発証明書をインストールしない場合はどうすればよいですか? (Windows)
• 開発証明書をインストールしない場合はどうすればよいですか? (WSL)

次の手順

• プレイグラウンドでさまざまなコンポーネントを試してみてください。
• Microsoft Q&A について質問します。
• バグを報告するか、GitHub に機能リクエストを残してください。
• Microsoft TeamsFx のサンプルを確認してください。