アクション ベースのメッセージ拡張機能をビルドする

Teams アクション ベースのメッセージ拡張機能を使用すると、ユーザーは Microsoft Teams クライアントで Web サービスと対話できます。 メッセージ拡張機能は、メッセージの作成領域、コマンド ボックス、またはメッセージから直接、外部システムでアクションを開始するのに役立ちます。

アクション ベースのメッセージ拡張機能の主な機能:

• 情報を収集または表示するためのモーダル ポップアップをユーザーに表示します。
• メッセージ作成領域、コマンド ボックス、またはメッセージからアクション コマンドをトリガーします。

このステップ バイ ステップ ガイドは、メッセージとメッセージの作成領域からアクションを開始するための Teams アクション ベースのメッセージ拡張機能を構築するのに役立ちます。 このチュートリアルの終わりまでに、次の出力を実現できます。

前提条件

• 残り 17 分

次のツールをインストールし、開発環境を設定していることを確認します。

ローカル環境を設定する

• 残り 16 分

1. Microsoft-Teams-Samples を開きます。

2. [ コード] を選択します。

3. ドロップダウン メニューから、[ GitHub Desktop で開く] を選択します。

   

4. [ 複製] を選択します。

アプリMicrosoft Entra登録する

• 残り 15 分

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

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

アプリの登録を追加する

1. Azure ポータルに移動します。

2. [アプリの登録] を選択します。

   

3. [ + 新規登録] を選択します。

   

4. アプリの名前を入力します。

5. 任意の組織ディレクトリ (Any Microsoft Entra ID tenant - Multitenant) の [アカウント] を選択します。

6. [登録] を選択します。

   

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

   

   注:

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

トンネルをCreateする

ngrok http --host-header=localhost 3978

Web 認証を追加する

1. 左側のウィンドウの [ 管理] で、[ 認証] を選択します。

2. [プラットフォーム>Web の追加] を選択します。

   

3. 完全修飾ドメイン名に追加 auth-end して、アプリのリダイレクト URI を入力します。 たとえば、https://your-devtunnel-domain/auth-end および https://your-ngrok-domain/auth-end が禁止となります。

4. [ 暗黙的な許可とハイブリッド フロー] で、[ アクセス トークン と ID トークン ] チェック ボックスをオンにします。

5. [構成] を選択します。

   

6. [ Web] で、[ URI の追加] を選択します。

7. https://token.botframework.com/.auth/web/redirect を入力します。

8. [保存] を選択します。

   

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

1. 左側のウィンドウの [ 管理] で、[ 証明書 & シークレット] を選択します。

2. [ クライアント シークレット] で、[ + 新しいクライアント シークレット] を選択します。

   

   [ クライアント シークレットの追加] ウィンドウが表示されます。

3. 「説明」と入力します。

4. [追加] を選択します。

   

5. [ 値] で、[ クリップボードにコピー ] を選択して、クライアント シークレットの値を保存して、さらに使用します。

   

API アクセス許可の追加

1. 左側のウィンドウの [ 管理] で、[ API のアクセス許可] を選択します。

2. [ + アクセス許可の追加] を選択します。

   

3. [Microsoft Graph] を選択します。

4. [委任されたアクセス許可] を選択します。

5. 次のアクセス許可を選択します。

   • OpenId アクセス許可>電子メール、 offline_access、 openid、 プロファイル。
   • ユーザー>User.Read。

6. [アクセス許可の追加] を選択します。

   

   注:

   • アプリに IT 管理者の同意が付与されていない場合、ユーザーは初めてアプリを使用する際に同意を提供する必要があります。
   • ユーザーは、Microsoft Entra アプリが別のテナントに登録されている場合にのみ、API のアクセス許可に同意する必要があります。

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

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

2. [アプリケーション ID URI] の横にある [追加] を選択します。

   

3. または 形式でapi://your-devtunnel-domain/botid-{AppID}api://your-ngrok-domain/botid-{AppID}アプリケーション ID URI を更新し、[保存] を選択します。

   

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

   

スコープを追加する

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

2. [ + スコープの追加] を選択します。

   

3. スコープ名として「access_as_user」と入力します。

4. [ 同意できるユーザー] で、[ 管理者とユーザー] を選択します。

5. 残りのフィールドの値を次のように更新します。

   • 「Teams は同意の表示名としてユーザーのプロファイル管理アクセスできます」と入力します。

   • 「Teams が同意の説明として現在のユーザーとしてアプリの Web API を呼び出管理許可する」と入力します。

   • 「Teams」と入力すると、ユーザー プロファイルにアクセスし、ユーザーの代わりにユーザーの同意表示名として要求を行うことができます。

   • ユーザーの同意の説明と同じ権限を持つこのアプリの API を呼び出すには、「Teams を有効にする」と入力します。

6. [状態] が [有効] に設定されていることを確認してください。

7. [スコープの追加] を選択します。

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

   

   注:

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

   

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

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

   [ 承認されたクライアント アプリケーション] で、アプリの Web アプリケーションに対して承認するアプリケーションを特定します。

2. [ + クライアント アプリケーションの追加] を選択します。

   

3. Teams モバイルまたはデスクトップと Teams Web アプリケーションを追加します。

   1. Teams モバイルまたはデスクトップの場合: クライアント ID を として 1fec8e78-bce4-4aaf-ab1b-5451cc387264入力します。

      

   2. Teams Web の場合: クライアント ID を として 5e3ce6c0-2b1f-4285-8d4b-75ee78787346入力します。

      

4. [ 承認されたスコープ ] チェック ボックスをオンにします。

5. [アプリケーションの追加] を選択します。

   

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

   

ボットをCreateする

• 残り 10 分

Azure ボット リソースをCreateする

1. [ホーム] に移動します。

2. [+ リソースのCreate] を選択します。

3. 検索ボックスに「 Azure Bot」と入力します。

4. Enter キーを押します。

5. [ Azure Bot] を選択します。

6. [作成] を選択します。

   

7. ボット ハンドルにボット名を入力します。

8. ドロップダウン リストから [サブスクリプション] を選択します。

9. ドロップダウン リストから [リソース グループ] を選択します。

   

   既存のリソース グループがない場合は、新しいリソース グループを作成できます。 新しいリソース グループを作成するには、次の手順に従います。

   1. [Create新規] を選択します。
   2. リソース名を入力し、[ OK] を選択します。
   3. [ 新しいリソース グループの場所 ] ドロップダウン リストから場所を選択します。

   

10. [ 価格] で、[ プランの変更] を選択します。

    

11. [ FO Free>Select] を選択します。

    

12. [Microsoft アプリ ID] で、[マルチテナントとしてのアプリの種類] を選択します。

13. [ 作成の種類] で、[ 既存のアプリの登録を使用する] を選択します。

14. アプリ ID を入力します。

    注:

    同じ Microsoft アプリ ID を持つ複数のボットを作成することはできません。

15. [確認 + 作成] を選びます。

    

16. 検証に合格したら、[Create] を選択します。

    ボットのプロビジョニングには数分かかります。

17. [リソースに移動] を選びます。

    

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

    

Teams チャネルを追加する

1. 左側のウィンドウで、[チャネル] を選択 します。

2. [ 使用可能なチャネル] で、[ Microsoft Teams] を選択します。

   

3. チェックボックスをオンにして 、利用規約に同意します。

4. [ 同意する] を選択します。

   

5. [適用] を選択します。

   

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

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

• 残り 5 分

1. 複製されたリポジトリ内の appsettings.json ファイルに移動します。

   

2. appsettings.json ファイルを開き、次の情報を更新します。

   • MultiTenant に設定"MicrosoftAppType"します。
   • ボットの Microsoft アプリ ID に設定"MicrosoftAppId"します。
   • ボットの [クライアント シークレットの値] に設定"MicrosoftAppPassword"します。
   • MultiTenant ボットの場合は空白のままに "MicrosoftAppTenantId" します。
   • 完全修飾ドメイン名に設定 "BaseUrl" します。

   

3. 複製されたリポジトリ内の manifest.json ファイルに移動します。

   

4. manifest.json ファイルを開き、次の変更を行います。

   • を <<validDomains>> 完全修飾ドメイン名に置き換えます。
   • のすべての出現箇所を <<Microsoft-App-ID>> ボットの Microsoft アプリ ID に置き換えます。

   

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

• 残り 4 分

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

dotnet run

アクション メッセージ拡張機能アプリを Teams に追加する

• 残り 3 分

1. 複製したリポジトリで、 サンプル>msgext-action>csharp>TeamsAppManifest に移動します。

2. マニフェスト フォルダーに存在する次のファイルを含む .zip をCreateします。

   • manifest.json
   • icon-outline.png
   • icon-color.png

   

3. Teams クライアントで、[ アプリ ] アイコンを選択します。

4. [アプリの管理] を選択します。

5. [ アプリのアップロード] を選択します。

6. [カスタム アプリのアップロード] オプションを探します。 オプションが表示された場合は、カスタム アプリのアップロードが有効になります。

   

   注:

   カスタム アプリをアップロードするオプションが見つからない場合は、Teams 管理者に問い合わせてください。

7. [ 開く ] を選択して、TeamsAppManifest フォルダーに作成した messaging.zip ファイルをアップロードします。

   

Teams でアプリを操作する

• 残り 2 分

1. 新規作成ボックスCreateコマンド一覧から [カード] コマンドを選択します。

   

2. モーダル ポップアップ ウィンドウに情報を入力します。

   

3. [送信] を選択します。

   

4. オーバーフロー メニューから [その他のオプション (...)] を選択します。

5. [その他のアクション][メッセージの共有] の順に選択します>。

   

6. 画像を含める場合は、[ ヒーロー カードに画像を含める ] チェック ボックスをオンにし、[送信] を選択 します。

   

課題の完了

• 残り 1 分

このようなものを思いついたのですか?

おめでとうございます。

• 100% 完了しました

アクション メッセージ拡張機能アプリの使用を開始するためのチュートリアルを完了しました。