Microsoft Graph ツールキットを使用して Microsoft Teams タブを作成するBuild a Microsoft Teams tab with the Microsoft Graph Toolkit

このトピックでは、microsoft Graph ツールキットを Microsoft Teams ソリューションで使用する方法について説明します。This topic covers how to get started using the Microsoft Graph Toolkit in a Microsoft Teams solution. 作業の開始には、次の手順が含まれます。Getting started involves the following steps:

  1. カスタムタブを使用して、新しい Teams アプリケーションを作成します。Create a new Teams application with a custom tab.
  2. Ngrok を設定し、トンネルを作成します。Set up ngrok and create a tunnel.
  3. Microsoft Graph ツールキットを追加します。Add the Microsoft Graph Toolkit.
  4. Microsoft Teams プロバイダを初期化します。Initialize the Microsoft Teams provider.
  5. 認証ポップアップページを作成します。Create the auth popup page.
  6. コンポーネントを追加します。Add components.
  7. アプリをテストします。Test your app.

カスタムタブを使用して新しい Teams アプリケーションを作成するCreate a new Teams application with a custom tab

新しい Teams アプリを作成する最も簡単な方法は、Visual Studio Code の Microsoft Teams Toolkit 拡張機能 を使用することです。The easiest way to create a new Teams app is to use the Microsoft Teams Toolkit extension for Visual Studio Code. 指示に従って、 新しい Teams プロジェクトを設定します。Follow the instructions to set up a new Teams project. [ 機能の追加 ] 画面が表示されたら、[ タブ]、[ 個人用] タブの順に選択します。When you get to the Add capabilities screen, select Tab, and then Personal tab.

Ngrok を設定してトンネルを作成するSet up ngrok and create a tunnel

後でアプリケーションをテストするには、HTTPS を使用して、公開されている URL でアプリケーションをホストする必要があります。In order to test your application later, you will need to host your application over a public-facing URL using HTTPS. 次のコマンドを使用して、 ngrok をインストールし、インターネットから localhost: 3000 にトンネルを作成します。Install ngrok and create a tunnel from the Internet to localhost:3000 with the following command:

ngrok http 3000

プロジェクトディレクトリで、ファイルを見つけて、 .publish\Development.env の値を baseUrl0 ngrok URL で置き換えます。In your project directory, locate the .publish\Development.env file and replace the value for baseUrl0 with your ngrok URL.

Microsoft Graph ツールキットを追加するAdd the Microsoft Graph Toolkit

アプリケーションで Microsoft Graph ツールキットを使用するには、loader を直接参照するか (pkg を介して)、または npm パッケージをインストールします。You can use the Microsoft Graph Toolkit in your application by referencing the loader directly (via unpkg) or by installing the npm package. ツールキットを使用するには、 Microsoft TEAMS SDKも必要です。To use the Toolkit, you will also need the Microsoft Teams SDK.

Via による使用-ローダーUse via mgt-loader

ローダーを使用してツールキットと Teams SDK を使用するには、次の参照を追加し public/index.html ます。To use the Toolkit and the Teams SDK via the loaders, add the following references to public/index.html:

<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>

Npm 経由で使用する (ES6 モジュール)Use via npm (ES6 modules)

ツールキットを ES6 モジュール経由で使用すると、バンドル処理を完全に制御できるようになり、アプリケーションに必要なコードのみをバンドルすることができます。Using the Toolkit via ES6 modules will give you full control of the bundling process and allow you to bundle only the code you need for your application. ES6 モジュールを使用するには、ツールキットと Microsoft Teams SDK の両方の npm パッケージをプロジェクトに追加します。To use the ES6 modules, add the npm packages for both the Toolkit and the Microsoft Teams SDK to your project:

npm install @microsoft/mgt @microsoft/teams-js

Teams プロバイダーを初期化するInitialize the Teams provider

Microsoft Graph Toolkit プロバイダーを使用すると、コンポーネントの認証と Microsoft Graph へのアクセスが可能になります。The Microsoft Graph Toolkit providers enable authentication and access to Microsoft Graph for the components. 詳細については、「 プロバイダーの使用」を参照してください。To learn more, see Using the providers. Teams プロバイダーは、ユーザーを認証するために teams SDK で実装する必要があるすべてのロジックと対話を処理します。The Teams provider handles all of the logic and interactions that need to be implemented with the Teams SDK to authenticate the user.

プロバイダーの初期化には、HTML または JavaScript コードのどちらかを選択できます。You can choose to initialize the provider in either your HTML or your JavaScript code.

HTML での初期化Initialize in HTML

public/index.html 、に示すように Teams プロバイダを追加します。In public/index.html, add the Teams provider as shown.

<mgt-teams-provider
  client-id="<YOUR_CLIENT_ID>"
  auth-popup-url="https://<YOUR_NGROK_URL>/auth.html"
></mgt-teams-provider>

を、作成した <YOUR_CLIENT_ID> NGROK URL を使用して、アプリケーションのクライアント ID に置き換え <YOUR_NGROK_URL> ます。Replace <YOUR_CLIENT_ID> with the client ID for your application and <YOUR_NGROK_URL> with the ngrok URL you created.

JavaScript での初期化Initialize in JavaScript

JavaScript コードでプロバイダーを初期化するには、 src/components/App.js プロジェクトディレクトリでファイルを見つけます。To initialize the provider in your JavaScript code, Locate the src/components/App.js file in your project directory. Teams プロバイダーをインポートし、プロバイダーを初期化します。Import the Teams Provider and initialize the provider.

import * as microsoftTeams from "@microsoft/teams-js/dist/MicrosoftTeams";
import { Providers, TeamsProvider } from '@microsoft/mgt';

TeamsProvider.microsoftTeamsLib = microsoftTeams;
Providers.globalProvider = new TeamsProvider ({
    clientId: '<YOUR_CLIENT_ID>',
    authPopupUrl: '/auth.html'
})

<YOUR_CLIENT_ID> アプリケーションのクライアント ID に置き換えます。Replace <YOUR_CLIENT_ID> with the client ID for your application.

アプリ/クライアント ID の作成Creating an app/client ID

クライアント ID を取得するには、アプリケーションを Azure AD に 登録 する必要があります。In order to get a client ID, you need to register your application in Azure AD. リダイレクト Uri に、auth ポップアップページへの完全パスを含む ngrok URL を追加してください (例: https://<YOUR_NGROK_URL>/auth.html )。Make sure to add your ngrok URL with the full path to the auth popup page to your redirect URIs (for example, https://<YOUR_NGROK_URL>/auth.html).

: msal では、OAuth の暗黙的フローのみがサポートされています。Note: MSAL only supports the Implicit Flow for OAuth. Azure Portal でアプリケーションの暗黙的フローを有効にしてください (既定では有効になっていません)。Make sure to enable Implicit Flow in your application in the Azure Portal (it is not enabled by default). [ 認証] で、[ 暗黙的な付与 ] セクションを見つけて、 アクセストークンID トークンのチェックボックスをオンにします。Under Authentication, find the Implicit grant section and select the checkboxes for Access tokens and ID tokens.

認証ポップアップページを作成するCreate the auth popup page

ユーザーがサインインできるようにするには、認証フローに従うために Teams アプリがポップアップで開く URL を提供する必要があります。In order to allow users to sign in, you need to provide a URL that the Teams app will open in a popup to follow the authentication flow. URL はドメイン内に存在する必要があります。このページでは、メソッドを呼び出す必要があり TeamsProvider.handleAuth() ます。The URL needs to be in your domain, and all this page needs to do is call the TeamsProvider.handleAuth() method.

そのためには auth.htmlpublic 次のコードを追加して、フォルダーに新しいファイル (同じレベルにある必要があります) を追加して、HTML でこれを実行 index.html します。You can do this in your HTML by adding a new auth.html file in the public folder (which should be at the same level as index.html) and adding the following code:

<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>

<script>
  mgt.TeamsProvider.handleAuth();
</script>

コンポーネントを追加するAdd components

これで、任意の Microsoft Graph Toolkit コンポーネントをタブに追加する準備ができました。Now, you're ready to add any of the Microsoft Graph Toolkit components to your tab.

通常どおり HTML にコンポーネントを追加することができます。You can add components to your HTML as you normally would. たとえば、ログインコンポーネントを追加するには、次のコードをの本文に追加し index.html ます。For example, to add the Login component add the below code to the body of your index.html:

<mgt-login></mgt-login>

または、JSX のコンポーネントをタブコンポーネントに追加することができます。Or, you can add the components in JSX to the Tab component. mgt-reactMicrosoft Teams ツールキットの拡張機能を使用して teams アプリを作成した場合は、ライブラリを使用することをお勧めします。We recommend using the mgt-react library if you created your Teams app using the Microsoft Teams Toolkit extension. 詳細については、「 Microsoft Graph Toolkit を使用した反応」を参照してください。To learn more, see Using Microsoft Graph Toolkit with React

最初に、次のものをインストールし mgt-react ます。First, install mgt-react:

npm install @microsoft/mgt-react

ファイルを見つけ src/components/Tab.js て、ライブラリから使用するコンポーネントをインポートし mgt-react ます。Locate the src/components/Tab.js file and import the components you want to use from the mgt-react library. たとえば、コンポーネントを追加するには、次のようにし Login ます。For example to add the Login component use:

import { Login } from "@microsoft/mgt-react"

その後、 return() 次のメソッドのステートメントにコンポーネントを追加し render() Tab ます。Then, add the the component to the return() statement of the render() method of Tab:

render() {
  return(
    <Login />
  );
}

アプリケーションをテストするTest your application

次のコマンドを使用して、アプリケーションをビルドして実行します。Build and run your application using the following commands:

npm install
npm start

アプリケーションをテストするには、アプリケーションを Teams にアップロードする必要があります。To test your application, you need to upload your application to Teams. Microsoft Teams クライアントを開き、左側のメニューで [ ... ] を選択し、[ App Studio] に移動します。Open the Microsoft Teams client, select the ... on the left-hand menu and go to App Studio. [ マニフェストエディター ] タブをクリックし、[ 既存のアプリのインポート] を選択します。Click the Manifest Editor tab and select Import an existing app.

プロジェクトディレクトリを見つけて、 publishフォルダー内のDevelopment.zipファイルをアップロードします。Locate your project directory and upload the Development.zip file inside of the .publish folder.

アプリが読み込まれたら、左側のメニューを下にスクロールして、[ テストと配布] を選択します。After your app has loaded, scroll down on the left menu and select Test and Distribute. [ インストール ] ボタンをクリックし、[ 追加] をクリックします。Click the Install button and then click Add. 作成したタブにリダイレクトされます。You will be redirected to the tab you created.

次の手順Next Steps