Microsoft Teams からタスクモジュールを呼び出す

アダプティブカードまたは Bot Framework カードを使用して、Teams ボットからタスクモジュールを呼び出すことができます。

タスクモジュールの主な機能

複数の手順を回避して、ユーザーエクスペリエンスを向上させます。
ユーザーがボットの状態を追跡するのに役立ちます。
ユーザーから入力を取得し、カスタム Web ページのコンテンツを表示します。

このステップバイステップガイドは、Teams タスクモジュールを呼び出すサンプル Azure ボットを作成するのに役立ちます。次の出力が表示されます。

タスクモジュール

前提条件

残り 13 分

次のツールをインストールし、開発環境を設定してください。

有効なアカウントを持つ Microsoft Teams
.NET Core SDK バージョン 3.1
Microsoft Visual Studio の最新バージョン
ngrok の最新バージョンまたは同等のトンネリングソリューション

注意

ngrok をダウンロードしたら、サインアップして authtoken をインストールします。

ローカル環境を設定する

残り 12 分

リポジトリをローカル GitHub に複製 BotBuilder-Samples します。

BotBuilder サンプルを開きます。
[ コード] を選択します。
ドロップダウンメニューから[ **Open with GitHub Desktop](GitHub Desktop で開く**) を選択します。
[ 複製] を選択します。

Azure AD portal でボットを作成して登録する

残り 11 分

Microsoft Azure Active Directory (Azure AD) にボットを作成して登録するには、ngrok を使用してトンネルを作成し、メッセージングエンドポイントを追加するには、次の手順を実行します。

Azure bot リソースを作成して、Azure Bot Serviceにボットを登録します。
ボットの SSO 認証を有効にするクライアントシークレットを作成します。
Teams チャネルを追加して、ボットを Teams チャネルにデプロイします。
ngrok を使用して、Web サーバーのエンドポイントへのトンネルを作成します。
作成した ngrok トンネルにメッセージングエンドポイントを追加します。

Azure Bot リソースを作成するには

Microsoft Azure portalに移動します。
[リソースの作成] を選択します。
検索ボックスに「 Azure Bot」と入力します。
Enter キーを押します。
Azure Bot を選択します。
[作成] を選択します。
ボットハンドルに必要な ボットハンドル 名を入力します。
ドロップダウンリストから [サブスクリプション] を選択します。
ドロップダウンリストから [リソースグループ] を選択します。

新しいリソースグループを作成することもできます ([新しいリソースの作成 ] を選択>、リソース名を入力> [OK] を選択します)。
新しいリソースグループを作成した場合は、[新しいリソースグループの場所] ドロップダウンリストから必要な 場所を 選択します。
[Microsoft アプリ ID] セクションでは、既定で [新しい Microsoft アプリ ID の作成] が選択されています。

[ 既存のアプリの登録を使用 する] を選択し、 既存のアプリ ID と 既存のアプリパスワード を入力するか、[ 新しい Microsoft アプリ ID の作成] を選択します。

注意

同じ Microsoft アプリ ID を持つ複数のボットを作成することはできません。
[ボットの種類] で [MultiTenant ] を選択します。
[確認 + 作成] を選びます。
検証に合格した場合は、[作成] を選択します。

ボットサービスがプロビジョニングされるまで少し時間がかかります。
[リソースに移動] を選びます。

Azure ボットが作成されます。

クライアントシークレットを作成するには

新しい Microsoft アプリ ID を作成した場合は、次の手順を実行します。

左側のパネルで、[構成] を選択 します。

ヒント

今後参照できるように 、Microsoft アプリ ID または クライアント ID を 保存します。
Microsoft アプリ ID の横にある [管理] を選択します。
[ クライアントシークレット ] セクションで、[ 新しいクライアントシークレット] を選択します。

[ クライアントシークレットの追加] ウィンドウが表示されます。
「説明」と入力します。
[追加] を選択します。
[ 値 ] 列で、[ クリップボードにコピー] を選択します。

ヒント

今後参照できるように 、クライアントシークレットの 値またはアプリパスワードを保存します。

Teams チャネルを追加するには

[ホーム] を選択します。
最近使用したリソース からボットを選択します。
左側のウィンドウで [チャネル] を選択し、Microsoft Teams を選択します。 .
[ 利用規約] に同意するには、チェックボックスをオンにします。
[同意する] を選択します。
[保存] を選択します。

ローカル Web サーバーのトンネルを作成するには

ngrok を使用して、ローカルで実行されている Web サーバーのパブリックに利用可能な HTTPS エンドポイントへのトンネルを作成します。 ngrok で次のコマンドを実行します。

ngrok http -host-header=rewrite 3978

ヒント

ERR_NGROK_4018 が発生した場合は、コマンドプロンプトに記載されている手順に従って、サインアップして ngrok を認証します。 ngrok http -host-header=localhost 3978 コマンドを実行します。

メッセージングエンドポイントを追加するには

ngrok から HTTPS URL (https から io) をコピーします。

注意

ngrok の HTTPS URL は、完全修飾ドメイン名です。は WebAppDomain 、完全修飾ドメイン名であり、ドメイン名には含 https:// まれません。
作成した Azure ボットの設定で、[構成] を選択 します。
メッセージングエンドポイント で、ngrok から入手できる HTTPS URL を使用し、URL の最後に /api/messages を追加します。
[適用] を選択します。

Azure Bot Serviceでボットが正常に設定されました。

Azure AD アプリの登録を更新する

残り 6 分

Azure portal にアクセスします。
Azure Active Directory を選択します。
左側のナビゲーションパネルで、[ アプリの登録] を選択します。
ボットを選択します。
[管理] を選択します。
左側のパネルで、[API の公開] を選択します。
[ 設定] を選択します。
アプリケーション ID URI を 次のapi://{AppID}形式で設定します。
の間api://に値をWebAppDomain挿入します/{AppID}。
api://d4b8****.ngrok.io/{AppID}

次の図は、ドメイン名を示しています。

注意

ngrok などのトンネリングサービスを使用している場合は、ngrok サブドメインが変更されるたびに値を更新してください。 For example: api://f631****.ngrok.io/92c11075-c629-4a1e-ab58-02b4fd4204c2は、新しい ngrok サブドメイン名です f631****.ngrok.io 。
[スコープの追加] を選択します。
表示されるパネルで、スコープ名 として入力access_as_userします。
[同意できるユーザー] を Admins and users[ .
スコープの適切な値を使用して管理者とユーザーの同意プロンプトを access_as_user 構成するには、フィールドに次の情報を入力します。
- 同意表示名管理 入力Teams can access the user’s profileします。
- 同意の説明管理 入力Allows Teams to call the app’s web APIs as the current userします。
- ユーザー同意表示名 として入力Teams can access the user profile and make requests on the user’s behalfします。
- ユーザーの同意の説明 として入力Enable Teams to call this app’s APIs with the same rights as the userします。
[状態] が [有効] に設定されていることを確認してください。
[保存 するスコープの追加] を選択します。

注意

スコープ名 は、最後に追加された アプリケーション ID URI と/access_as_user一致する必要があります。
api://d4b8****.ngrok.io/00000000-0000-0000-0000-000000000000/access_as_user
[承認済みのクライアントアプリケーション] セクションで、アプリの Web アプリケーションに対して承認するアプリケーションを特定します。
[クライアントアプリケーションの追加] を選択します。
クライアント ID を 入力します。 1fec8e78-bce4-4aaf-ab1b-5451cc387264 Teams モバイルアプリケーションまたはデスクトップアプリケーションの場合。

Teams Web アプリケーションの クライアント ID:5e3ce6c0-2b1f-4285-8d4b-75ee78787346 を入力します。
[ 承認されたスコープ] を選択します。

次の図は、クライアント ID を表示します。
左側のパネルで、[ API アクセス許可] を選択します。

注意

ユーザーは、Azure AD アプリが別のテナントに登録されている場合にのみ、API アクセス許可に同意する必要があります。
[アクセス許可を追加] を選択します。
[Microsoft Graph] を選択します。
[委任されたアクセス許可] を選択します。
次のアクセス許可を選択します。
- email
- offline_access
- Openid
- profile
- User.Read
[アクセス許可の追加] を選択します。
左側のパネルで [ 認証 ] を選択してリダイレクト URI を設定します。

注意

アプリに IT 管理者の同意が付与されていない場合、ユーザーはアプリを初めて使用する際に同意を提供する必要があります。
1. [プラットフォームの追加] を選択します。
2. [Web] を選びます。
3. 完全修飾ドメイン名に追加して、アプリの auth-end リダイレクト URI を入力します。
  https://d4b8****.ngrok.io/auth-end.
4. 次のチェックボックスをオンにして 、暗黙的な許可フローとハイブリッドフロー を有効にします。
  - ID トークン
  - アクセストークン
5. [構成] を選択します。

アプリの設定とマニフェストファイルを設定する

残り 5 分

複製されたリポジトリで appsettings.json に移動します。
Visual Studio の最新バージョンで appsettings.json を 開き、次の情報を更新します。
- MultiTenant に設定"MicrosoftAppType"します。
- ボットの Microsoft アプリ ID に 設定"MicrosoftAppId"します。
- [クライアントシークレット の値] に設定"MicrosoftAppPassword"します。
- アプリが使用されているテナントのテナント ID に設定 "MicrosoftAppTenantId" します。
- 完全修飾ドメイン名 (https から io) に設定 "BaseUrl" します。
複製されたリポジトリの 'manifest.json' に移動します。
Visual Studio の最新バージョンで 'manifest.json' を開き、次の変更を加えます。
- すべての出現箇所を自分WebAppDomainのYourDeployedBotUrl.com名前に置き換えます。
- すべての出現箇所をボットの <<YOUR-MICROSOFT-APP-ID>> Microsoft アプリ ID に 置き換えます。

サービスをビルドして実行する

残り 4 分

Visual Studio またはコマンドラインの最新バージョンを使用してサービスをビルドして実行するには

Visual Studio の最新バージョン
コマンドライン

Visual Studio の最新バージョンを起動します。
ファイル > を開く > プロジェクト/ソリューション に移動します。
54.teams-task-module フォルダーから TeamsTaskModule.csproj ファイルを選択します。
ビュー から ソリューションエクスプローラー を開きます。
TeamsTaskModule を右クリックして選択します。
[ スタートアッププロジェクトとして設定] を選択します。
F5 キーを押してプロジェクトを実行します。
以下のダイアログが表示されたら、[はい] を選択します:

Web ページが開き、メッセージが表示されます 。ボットの準備は完了です。

コマンドプロンプトウィンドウで BotBuilder-Samples >サンプル > csharp_dotnetcore > 54.teams-task-module に移動し、次のコマンドを入力します。

dotnet run

Dotnet

タスクモジュールアプリのアップロード

残り 3 分

複製されたリポジトリで、 TeamsAppManifest csharp_dotnetcore > 54.teams-task-module > 移動します。
TeamsAppManifest フォルダーに存在する次のファイルを含む.zipを作成します。
- manifest.json
- icon-outline.png
- icon-color.png
Microsoft Teams に移動します。
[アプリ] を選択します。
左下隅にある [ アプリの管理] を選択します。
[組織のアプリカタログにアプリをアップロード する] を選択します。
[ 開く ] を選択して、 TeamsAppManifest フォルダーに作成した.zip ファイルをアップロードします。
[追加] を選択します。

アプリがチャットで開きます。
任意のテキストを入力し、Enter キーを押します。

アプリには、 ヒーローカードからのタスクモジュール呼び出し と 、アダプティブカードからのタスクモジュール呼び出しが 表示されます。

Teams でアプリを操作する

残り 2 分

ヒーローカードからのタスクモジュール呼び出し または アダプティブカード****からのタスクモジュール呼び出しからアダプティブカードを選択します。
任意のテキストを入力します。
[送信] を選択します。

アダプティブカード は、受信確認メッセージを送信します。
ヒーローカードからのタスクモジュール呼び出し または アダプティブカードからのタスクモジュール呼び出しから****カスタムフォーム を選択します。
必要な情報を入力します。
- 名前
- 電子メール
- お気に入りの本
- Password
- パスワードの確認
[ サインアップ] を選択します。

カスタムフォームから 受信確認メッセージが送信されます。

チャットには次の情報が表示されます。
[ヒーローカードからのタスクモジュールの呼び出し] または [アダプティブカードからのタスクモジュール呼び出し] から [YouTube] を選択します。
[ 再生] を選択します。

ビデオが再生されます。