Microsoft Teams からダイアログを呼び出す

アダプティブカードまたは Bot Framework カードを使用して、Teams ボットからダイアログ (TeamsJS v1.x のタスクモジュールと呼ばれます) を呼び出すことができます。

ダイアログの主な機能:

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

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

ダイアログの最終的な出力を示すスクリーンショット。

前提条件

残り 17 分

次のツールをインストールし、開発環境をセットアップしてください。

	インストール	使用するには...
	Microsoft Teams	Microsoft Teams は、チャット、会議、通話をすべて 1 か所で行うアプリを通じて、作業するすべてのユーザーと共同作業を行います。
	Visual Studio 2022	Visual Studio 2022 でエンタープライズバージョンをインストールし、ASP.NET および Web 開発ワークロードをインストールできます。最新バージョンを使用します。
	.NET Core SDK	ローカルデバッグとAzure Functionsアプリのデプロイ用にカスタマイズされたバインド。最新バージョンを使用するか、移植可能なバージョンをインストールします。
	開発トンネル	Teams アプリの機能 (会話型ボット、メッセージ拡張機能、受信 Webhook) には、受信接続が必要です。トンネルは、開発システムを Teams に接続します。開発トンネルは、localhost をインターネットに安全に開き、アクセス権を持つユーザーを制御するための強力なツールです。開発トンネルは、Visual Studio 2022 バージョン 17.7.0 以降で使用できます。または、 ngrok をトンネルとして使用して、開発システムを Teams に接続することもできます。タブのみを含むアプリには必要ありません。このパッケージはプロジェクトディレクトリ内にインストールされます (npm `devDependencies` を使用)。

注:

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

ローカル環境を設定する

残り 16 分

Microsoft-Teams-Samples を開きます。
[ コード] を選択します。
ドロップダウンメニューから、[ GitHub Desktop で開く] を選択します。
[ 複製] を選択します。

アプリMicrosoft Entra登録する

残り 15 分

次の手順は、Azure portalでボットを作成して登録するのに役立ちます。

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

アプリの登録を追加する

Azure ポータルに移動します。
[アプリの登録] を選択します。
[ + 新規登録] を選択します。
アプリの名前を入力します。
任意の組織ディレクトリ (Any Microsoft Entra ID テナント - Multitenant) で [アカウント] を選択します。
[登録] を選択します。

アプリは、Microsoft Entra ID で登録されます。アプリの概要ページが表示されます。

注:

さらに使用するために 、アプリケーション (クライアント) ID と ディレクトリ (テナント) ID からアプリ ID を 保存します。

トンネルを作成する

dev tunnel
ngrok

Visual Studio を開きます。
[ 新しいプロジェクトの作成] を選択します。
検索ボックスに「ASP.NET」と入力します。検索結果から [ASP.NET Core Web アプリ] を選択します。
[次へ] を選択します。
「プロジェクト名」と入力し、[次へ] を選択します。
[作成] を選択します。

概要ウィンドウが表示されます。
デバッグドロップダウンリストで、[Dev Tunnel (アクティブトンネルなし)]>[トンネルの作成]を選択します。...

ポップアップウィンドウが表示されます。
ポップアップウィンドウで次の詳細を更新します。
1. アカウント: Microsoft または GitHub アカウントを入力します。
2. [名前]: トンネルの名前を入力します。
3. トンネルの種類: ドロップダウンリストから [ 一時] を選択します。
4. アクセス: ドロップダウンリストから [パブリック] を選択 します。
[OK] を選択します。

開発トンネルが正常に作成されたことを示すポップアップウィンドウが表示されます。
[OK] を選択します。

作成したトンネルは、次のようにデバッグドロップダウンリストにあります。
F5 キーを押して、デバッグモードでアプリケーションを実行します。
[セキュリティ警告] ダイアログが表示されたら、[はい] を選択します。

ポップアップウィンドウが表示されます。
[続行] を選択します。

開発トンネルのホームページが新しいブラウザーウィンドウで開き、開発トンネルがアクティブになりました。
Visual Studio に移動し、[出力の表示] を選択します>。
[出力コンソール] ドロップダウンメニューで、[Dev Tunnels]\(開発トンネル\) を選択します。

出力コンソールには、開発トンネル URL が表示されます。

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

ngrok http --host-header=localhost 3978

ヒント

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

ウィンドウに HTTPS URL が表示されます。

ngrok HTTPS URL を示すスクリーンショット。

Web 認証を追加する

左側のウィンドウの [ 管理] で、[ 認証] を選択します。
[プラットフォーム>Web の追加] を選択します。
完全修飾ドメイン名に追加 auth-end して、アプリのリダイレクト URI を入力します。たとえば、https://your-devtunnel-domain/auth-end および https://your-ngrok-domain/auth-end が禁止となります。
[ 暗黙的な許可とハイブリッドフロー] で、[ アクセストークン と ID トークン ] チェックボックスをオンにします。
[構成] を選択します。
[ Web] で、[ URI の追加] を選択します。
https://token.botframework.com/.auth/web/redirect を入力します。
[保存] を選択します。

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

左側のウィンドウの [ 管理] で、[ 証明書 & シークレット] を選択します。
[ クライアントシークレット] で、[ + 新しいクライアントシークレット] を選択します。

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

API アクセス許可の追加

左側のウィンドウの [ 管理] で、[ API のアクセス許可] を選択します。
[ + アクセス許可の追加] を選択します。
[Microsoft Graph] を選択します。
[委任されたアクセス許可] を選択します。
次のアクセス許可を選択します。
- OpenId アクセス許可>電子メール、 offline_access、 openid、 プロファイル。
- ユーザー>User.Read。
[アクセス許可の追加] を選択します。
注:
- アプリに IT 管理者の同意が付与されていない場合、ユーザーは初めてアプリを使用する際に同意を提供する必要があります。
- ユーザーは、Microsoft Entra アプリが別のテナントに登録されている場合にのみ、API のアクセス許可に同意する必要があります。

アプリケーション ID URI の追加

左側のウィンドウの [ 管理] で、[ API の公開] を選択します。
[アプリケーション ID URI] の横にある [追加] を選択します。
または形式でapi://your-devtunnel-domain/botid-{AppID}api://your-ngrok-domain/botid-{AppID}アプリケーション ID URI を更新し、[保存] を選択します。

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

スコープを追加する

左側のウィンドウの [ 管理] で、[ API の公開] を選択します。
[ + スコープの追加] を選択します。
スコープ名として「access_as_user」と入力します。
[ 同意できるユーザー] で、[ 管理者とユーザー] を選択します。
残りのフィールドの値を次のように更新します。
- 「Teams は同意の表示名としてユーザーのプロファイル管理アクセスできます」と入力します。
- 「Teams が同意の説明として現在のユーザーとしてアプリの Web API を呼び出管理許可する」と入力します。
- 「Teams」と入力すると、ユーザープロファイルにアクセスし、ユーザーの代わりにユーザーの同意表示名として要求を行うことができます。
- ユーザーの同意の説明と同じ権限を持つこのアプリの API を呼び出すには、「Teams を有効にする」と入力します。
[状態] が [有効] に設定されていることを確認してください。
[スコープの追加] を選択します。

次の図は、フィールドと値を示しています。

注:

スコープ名は、最後に追加されたアプリケーション ID URI と/access_as_user一致する必要があります。

クライアントアプリケーションを追加する

左側のウィンドウの [ 管理] で、[ API の公開] を選択します。

[ 承認されたクライアントアプリケーション] で、アプリの Web アプリケーションに対して承認するアプリケーションを特定します。
[ + クライアントアプリケーションの追加] を選択します。
Teams モバイルまたはデスクトップと Teams Web アプリケーションを追加します。
1. Teams モバイルまたはデスクトップの場合: クライアント ID を として 1fec8e78-bce4-4aaf-ab1b-5451cc387264入力します。
2. Teams Web の場合: クライアント ID を として 5e3ce6c0-2b1f-4285-8d4b-75ee78787346入力します。
[ 承認されたスコープ ] チェックボックスをオンにします。
[アプリケーションの追加] を選択します。

次の図は、 クライアント ID を表示します。

ボットを作成する

残り 10 分

Azure ボットリソースを作成する

注:

Teams でボットを既にテストしている場合は、このアプリと Teams からサインアウトします。この変更を確認するには、もう一度サインインします。

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

既存のリソースグループがない場合は、新しいリソースグループを作成できます。新しいリソースグループを作成するには、次の手順に従います。
1. [ 新規作成] を選択します。
2. リソース名を入力し、[ OK] を選択します。
3. [ 新しいリソースグループの場所 ] ドロップダウンリストから場所を選択します。
[ 価格] で、[ プランの変更] を選択します。
[ FO Free>Select] を選択します。
[Microsoft アプリ ID] で、[マルチテナントとしてのアプリの種類] を選択します。
[ 作成の種類] で、[ 既存のアプリの登録を使用する] を選択します。
アプリ ID を入力します。

注:

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

ボットのプロビジョニングには数分かかります。
[リソースに移動] を選びます。

Azure ボットが正常に作成されました。

Teams チャネルを追加する

左側のウィンドウで、[チャネル] を選択 します。
[ 使用可能なチャネル] で、[ Microsoft Teams] を選択します。
チェックボックスをオンにして 、利用規約に同意します。
[ 同意する] を選択します。
[適用] を選択します。

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

dev tunnel
ngrok

出力コンソールの開発トンネル URL をメッセージングエンドポイントとして使用します。
左側のウィンドウの [ 設定] で、[ 構成] を選択します。
メッセージングエンドポイントをの形式https://your-devtunnel-domain/api/messagesで更新します。
[適用] を選択します。

Azure Bot サービスでボットが正常に設定されました。

注:

Application Insights Instrumentation キーにエラーが表示される場合は、アプリ ID で更新します。

ngrok から HTTPS URL をコピーします。

注:

ngrok の HTTPS URL は、完全修飾ドメイン名です。 WebAppDomainは、それに含https://まれていない完全修飾ドメイン名です。
左側のウィンドウの [ 設定] で、[ 構成] を選択します。
メッセージングエンドポイントをの形式https://your-ngrok-domain/api/messagesで更新します。
[適用] を選択します。

Azure Bot サービスでボットを正常に設定しました。

注:

Application Insights Instrumentation キーにアプリ ID を使用したエラー更新が表示される場合。

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

残り 5 分

複製されたリポジトリの appsettings.json ファイルに移動します。
appsettings.json を開き、次の情報を更新します。
- MultiTenant に設定"MicrosoftAppType"します。
- ボットの Microsoft アプリ ID に設定"MicrosoftAppId"します。
- [クライアントシークレットの値] に設定"MicrosoftAppPassword"します。
- アプリが使用されているテナントのテナント ID に設定 "MicrosoftAppTenantId" します。
- 完全修飾ドメイン名 (https から io) に設定 "BaseUrl" します。
複製されたリポジトリの manifest.json ファイルに移動します。
manifest.json ファイルを開き、次の情報を更新します。
- のすべての出現を <<Domain-Name>> ngrok または開発トンネルドメインに置き換えます。
- のすべての出現箇所を <<YOUR-MICROSOFT-APP-ID>> ボットの Microsoft アプリ ID に置き換えます。

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

残り 4 分

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

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

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

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

[コマンドプロンプト] ウィンドウで [Microsoft-Teams-Samples samples>>bot-task-module>csharp] に移動し、次のコマンドを入力します。

dotnet run

dotnet run のコマンドプロンプトを示すスクリーンショット。

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

残り 3 分

複製したリポジトリで、 サンプル>bot-task-module>csharp>TeamsAppManifest に移動します。
TeamsAppManifest フォルダーに存在する次のファイルを含む .zip ファイルを作成します。
- manifest.json
- icon-outline.png
- icon-color.png
Teams クライアントで、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します。
[カスタムアプリのアップロード] オプションを探します。オプションが表示された場合は、カスタムアプリのアップロードが有効になります。
TeamsAppManifest フォルダーに作成した .zip ファイルを選択し、[開く] を選択します。
[追加] を選択します。
[メッセージの作成] 領域に「hi」と入力し、ボットがアダプティブカードを送信します。

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

Teams でアプリを操作する

残り 2 分

[ヒーローカードからのタスクモジュール呼び出し] または [アダプティブカードからのタスクモジュール呼び出し] から [アダプティブカード] を選択します。
「Hello」と入力し、[送信] を選択します。

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

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

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