ボットを使用して Teams でファイルをアップロードする
ボットは Teams API を使用して、個人用チャットでユーザーとファイルを送受信します。 Teams で共有されているファイルはカードとして表示され、アプリ内で豊富な表示を許可できます。 また、このボットは、経費レポート、画像認識、ファイル アーカイブ、ファイル コンテンツの編集を伴う電子署名などの機能の実装にも役立ちます。
ボットを使用して Teams でファイルをアップロードする主な機能
- ボットを使用して Teams にファイルをアップロードします。
- ボットに送信されたファイルを添付ファイルとして受信します。
- メッセージで送信されたインライン イメージをフェッチします。
このステップ バイ ステップ ガイドは、ボットを使用して Teams でファイルをアップロードするのに役立ちます。 次の出力が表示されます。
前提条件
次のツールをインストールし、開発環境を設定してください。
有効なアカウントを持つ Microsoft Teams
最新バージョンの ngrok (開発ボックス テスト用のみ) または同等のトンネリング ソリューション
注意
ngrok をダウンロードしたら、サインアップして authtoken をインストールします。
ローカル環境を設定する
BotBuilder-Samples を開きます。
[ コード] を選択します。
ドロップダウン メニューから[ **Open with GitHub Desktop](GitHub Desktop で開く**) を選択します。
[ 複製] を選択します。
ボットを作成して登録する
次の手順は、ボットを作成してAzure portalに登録するのに役立ちます。
- Azure bot リソースを作成して、Azure Bot Serviceにボットを登録します。
- ボットの SSO 認証を有効にするクライアント シークレットを作成します。
- ボットをデプロイする Teams チャネルを追加します。
- ngrok を使用して、Web サーバーのエンドポイントへのトンネルを作成します。
- 作成した ngrok トンネルにメッセージング エンドポイントを追加します。
Azure Bot リソースを作成するには
Azure portal にアクセスします。
[リソースの作成] を選択します。
検索ボックスに「 Azure bot」と入力します。
Enter キーを押します。
Azure Bot を選択します。
[作成] を選択します。
ボット ハンドルに必要な ボット ハンドル 名を入力します。
[サブスクリプション] ドロップダウン リストから、サブスクリプションを選択します。
[リソース グループ] ドロップダウン リストから、既存のリソース グループを選択します。
新しいリソース グループを作成することもできます ([ 新しい リソースの作成] を選択>、リソース名を入力> [OK] を選択します)。
新しいリソース グループを作成した場合は、[新しいリソース グループの場所] ドロップダウン リストから必要な 場所を 選択します。
[Microsoft アプリ ID] セクションでは、既定で [新しい Microsoft アプリ ID の作成] が選択されています。
[ 既存のアプリの登録を使用 する] を選択し、 既存のアプリ ID と 既存のアプリ パスワード を入力するか、[ 新しい Microsoft アプリ ID の作成] を選択します。
注意
同じ Microsoft アプリ ID を持つ複数のボットを作成することはできません。
[マルチテナント としての アプリの種類] を選択します。
[確認 + 作成] を選びます。
検証に合格した場合は、[作成] を選択します。
ボット サービスがプロビジョニングされるまで少し時間がかかります。
[リソースに移動] を選びます。
Azure ボットが作成されます。
クライアント シークレットを作成するには
新しい Microsoft アプリ ID を作成した場合は、次の手順を実行します。
左側のパネルで、[構成] を選択 します。
ヒント
今後参照できるように 、Microsoft アプリ ID または クライアント ID を 保存します。
Microsoft アプリ ID の横にある [管理] を選択します。
[ クライアント シークレット ] セクションで、[ 新しいクライアント シークレット] を選択します。
[ クライアント シークレットの追加] ウィンドウが表示されます。
「説明」と入力します。
[追加] を選択します。
[ 値 ] 列で、[ クリップボードにコピー] を選択します。
ヒント
今後参照できるように 、クライアント シークレットの 値またはアプリ パスワードを保存します。
Teams チャネルを追加するには
[ホーム] を選択します。
最近使用したリソース からボットを選択します。
1.左側のウィンドウで チャネル を選択し、Microsoft Teams を選択する 
.
[ 利用規約] に同意するには、チェック ボックスをオンにします。
[同意する] を選択します。
[適用] を選択します。
ローカル Web サーバーのトンネルを作成するには
ngrok またはコマンド プロンプトを使用して、ローカルで実行されている Web サーバーのパブリックに利用可能な HTTPS エンドポイントへのトンネルを作成します。 ngrok で次のコマンドを実行します。
ngrok http -host-header=localhost 3978
ヒント
ERR_NGROK_4018 が発生した場合は、コマンド プロンプトに記載されている手順に従って、ngrok にサインアップして認証します。 ngrok http -host-header=localhost 3978 コマンドを実行します。
メッセージング エンドポイントを追加するには
ngrok から HTTPS URL をコピーします。
注意
ngrok の HTTPS URL は、完全修飾ドメイン名です。 は
WebAppDomain、完全修飾ドメイン名であり、ドメイン名には含https://まれません。作成した Azure ボットの 設定 で、[構成] を選択 します。
メッセージング エンドポイント で、ngrok から入手できる HTTPS URL を使用し、URL の最後に /api/messages を追加します。
[適用] を選択します。
Azure Bot Serviceでボットが正常に設定されました。
Azure AD アプリの登録を更新する
Azure portal にアクセスします。
Azure Active Directory を選択します。
左側のウィンドウで、[ アプリの登録] を選択します。
ボットを選択します。
[ API の公開] を選択します。
[ 設定] を選択します。
アプリケーション ID URI を 次の
api://your ngrok/botid-{your 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://9179****.ngrok.io/00000000-0000-0000-0000-000000000000/access_as_user
[承認済みのクライアント アプリケーション] セクションで、アプリの Web アプリケーションに対して承認するアプリケーションを特定します。
[クライアント アプリケーションの追加] を選択します。
クライアント ID を 入力します。
1fec8e78-bce4-4aaf-ab1b-5451cc387264Teams モバイルアプリケーションまたはデスクトップ アプリケーションの場合。
Teams Web アプリケーションの クライアント ID:
5e3ce6c0-2b1f-4285-8d4b-75ee78787346を入力できます。
次の図は 、クライアント ID を 表示します。
左側のパネルで、[ API アクセス許可] を選択します。
注意
ユーザーは、AAD アプリが別のテナントに登録されている場合にのみ、API アクセス許可に同意する必要があります。
[アクセス許可を追加] を選択します。
[Microsoft Graph] を選択します。
[委任されたアクセス許可] を選択します。
User.Read in permission を追加します。
[アクセス許可の追加] を選択します。
左側のパネルで [ 認証 ] を選択してリダイレクト URI を設定します。
注意
アプリに IT 管理者の同意が付与されていない場合、ユーザーはアプリを初めて使用する際に同意を提供する必要があります。
[プラットフォームの追加] を選択します。
[Web] を選びます。
完全修飾ドメイン名に追加して、アプリの
auth-endリダイレクト URI を入力します。https://your ngrok/auth-end.次のチェック ボックスをオンにして 、暗黙的な許可フローとハイブリッド フロー を有効にします。
- ID トークン
- アクセス トークン
[構成] を選択します。
** TeamsAppManifest を 更新します。
左側のウィンドウで [マニフェスト] を選択します。
構成項目 "accessTokenAcceptedVersion":2 を 設定します。 設定されていない場合は、その値を [保存] に
2変更します。
注意
Teams でボットを既にテストしている場合は、このアプリからサインアウトして Teams からサインアウトします。 この変更を確認するには、もう一度サインインします。
Bot Service接続を設定するには
[構成] ページ > の [OAuth 接続設定の追加] に移動します。
[OAuth 接続設定の追加] を選択します。
[新しい接続設定] で、次の詳細を入力します。
- 名前を入力します
name for your new connection setting. You can use the name in the settings of your bot service code。 - [サービス プロバイダー] を選択します
Azure Active Directory V2。 - クライアント ID your
Microsoft App ID. - クライアント シークレット
Value of the client secret ID. - Token Exchange URL は 、API エンドポイントを
Application ID URI公開するときに、以前に取得した URL を使用します。 - テナント ID を 入力します
common。 - スコープは次のように 入力
User.Readします。
- 名前を入力します
[保存] を選択します。
アプリの設定とマニフェスト ファイルを設定する
複製されたリポジトリで appsettings.json に移動します。
Visual Studio で appsettings.json を 開きます。
次の情報を更新します。
MultiTenant に設定
"MicrosoftAppType"します。ボットの Microsoft アプリ ID に 設定
"MicrosoftAppId"します。ボットのクライアント シークレット ID 値に設定
"MicrosoftAppPassword"します。MultiTenant ボットの場合は空白として設定
"MicrosoftAppTenantId"します。
複製されたリポジトリで manifest.json に移動します。
Visual Studio で manifest.json を 開き、次の変更を加えます。
すべての出現箇所をボットの
<<YOUR-MICROSOFT-APP-ID>>Microsoft アプリ ID に 置き換えます。
サービスをビルドして実行する
Visual Studio またはコマンド ラインを使用してサービスをビルドして実行するには
Visual Studio を起動します。
ファイル > を開く > プロジェクト/ソリューション に移動します。
56.teams-file-upload フォルダーから TeamsFileUpload.csproj ファイルを選択します。
ビュー から ソリューション エクスプローラー を開きます。
TeamsFileUpload を右クリックします。
[ スタートアップ プロジェクトとして設定] を選択します。
F5 キーを押してプロジェクトを実行します。
以下のダイアログが表示されたら、[はい] を選択します:
Web ページが開き、メッセージが表示されます 。ボットの準備は完了です。
Teams でファイル アップロード ボットを追加する
複製されたリポジトリで、 csharp_dotnetcore > 56.teams-file-upload > TeamsAppManifest に移動します。
TeamsAppManifest フォルダーに存在する次のファイルを含む.zipを作成します。
manifest.json
icon-outline.png
icon-color.png
Microsoft Teams に移動します。
[アプリ] を選択します。
左下隅にある [ アプリの管理] を選択します。
[カスタム アプリをアップロードする] を選択します。
[ 開く ] を選択して、 TeamsAppManifest フォルダーに作成した.zip ファイルをアップロードします。
[追加] を選択します。
作成メッセージ領域に 「hi」 と入力し、カードで応答するまで数秒待ちます。
Teams でボットと対話する
ボットにメッセージを送信します。 ファイルをアップロードするアクセス許可のカードで応答します。
[許可] を選択します。
teams-logo.pngファイルはファイル ディレクトリにアップロードされ、ダウンロードの準備が整います。
Teams の添付ファイルとしてボットにファイルを送信します。 メッセージ
Received and Savedで応答します。 [ファイル] タブから添付 ファイル を表示できます。
添付ファイルとして画像を送信します。 メッセージ
Received and savedで応答します。 画像は、チャット ウィンドウと [ ファイル ] タブで確認できます。
注意
ボットが個人用スコープにインストールされると、ユーザーはボットとの 1 つのチャット会話に参加します。
チャレンジを完了する
このようなことを思い付いたのですか?
おめでとうございます。
チュートリアルを完了しました。 これで、ボットを使用して Teams でファイルをアップロードできるようになりました。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。