SSO 認証を使用してボットを構築する

Microsoft Teams の会話型ボットは、ユーザーによって開始された繰り返し自動化されたタスク (カスタマーサービスなど) を実行します。ユーザーは、シングルサインオン (SSO) 認証なしで複数回サインインする必要があります。 SSO 認証方法では、ユーザーはボットに複数回サインインする必要はありません。

ボットは、関係する会話に応じて動作が異なります。

チャネルおよびグループチャットの会話内のボットには、ボットへの @mention ユーザーが必要です。
1 対 1 の会話の場合、ボットを @mention する必要はありません。ユーザーによって送信されたすべてのメッセージは、ボットにルーティングされます。

このステップバイステップガイドは、SSO 認証を使用してボットを構築するのに役立ちます。次の出力が表示されます。

ステップバイステップガイドが正常に完了した後の SSO 認証出力を含むボットのスクリーンショット。

前提条件

残り 18 分

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

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

注:

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

Teams 開発テナントを設定する

テナントは、Teams でorganizationのチャット、ファイルの共有、会議の実行を行うスペースやコンテナーのようなものです。カスタムアプリをアップロードしてテストすることもできます。

カスタムアプリのアップロードオプションを確認する

アプリを作成したら、アプリを配布せずに Teams に読み込む必要があります。このプロセスは、カスタムアプリのアップロードと呼ばれます。このオプションを表示するには、Microsoft 365 アカウントにサインインします。

注:

Teams ローカル環境でアプリをプレビューおよびテストするために、カスタムアプリのアップロードが必要です。アプリのアップロードを有効にして、Teams でアプリをローカルでプレビューしてテストします。

既にテナントがあり、管理者アクセス権がありますか? 実際にあるかどうかを確認しましょう。

Teams でカスタムアップロードアプリを確認するには:

Teams クライアントで、[ アプリ ] アイコンを選択します。
[アプリの管理] を選択します。
[ アプリのアップロード] を選択します
[ カスタムアプリのアップロード] オプションを探します。オプションが表示された場合は、カスタムアプリのアップロードが有効になります。

注:

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

無料の Teams 開発者テナントを作成する (省略可能)

Teams 開発者アカウントをお持ちでない場合は、無料で入手できます。 Microsoft 365 開発者プログラムに参加します。

Microsoft 365 開発者プログラムに移動します。
[今すぐ参加] を選択し、画面の指示に従います。
ようこそ画面で、[ セットアップ E5 サブスクリプション] を選択します。
管理者アカウントを設定します。完了すると、次の画面が表示されます。
設定した新しい管理者アカウントを使用して Teams にサインインします。 Teams で [カスタムアプリのアップロード] オプションがあることを確認します。

ローカル環境を設定する

残り 17 分

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

アプリMicrosoft Entra登録する

残り 16 分

次の手順は、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] を選択します。
[委任されたアクセス許可] を選択します。
[UserUser.Read] を選択します>。
[アクセス許可の追加] を選択します。

注:

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

アプリケーション ID

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

スコープを追加する

左側のウィンドウの [ 管理] で、[ 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 を表示します。

マニフェストを更新する

左側のウィンドウで、[マニフェスト] を選択 します。
の値 accessTokenAcceptedVersion をに 2 設定し、[保存] を選択 します。

ボットを作成する

残り 11 分

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 を使用したエラー更新が表示される場合。

OAuth 接続設定を追加する

左側のウィンドウで、[構成] を選択 します。
[OAuth 接続設定の追加] を選択します。
[ 新しい接続設定] で、次の詳細を更新します。
- [名前]: 新しい接続設定の名前を入力します。名前は、ボットサービスコードの設定で使用できます。
- サービスプロバイダー: ドロップダウンリストから [ Azure Active Directory v2] を選択します。
- クライアント ID: Microsoft アプリ ID を更新します。
- クライアントシークレット: クライアント シークレットの値を更新 します。
- トークン交換 URL: アプリケーション ID URI を更新します。
- テナント ID: 「Common」と入力します。
- スコープ: User.Read と入力します。
[保存] を選択します。

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

残り 6 分

複製されたリポジトリの appsettings.json ファイルに移動します。
appsettings.json ファイルを開き、次の情報を更新します。
- ボットの Microsoft アプリ ID に設定"MicrosoftAppId"します。
- ボットのクライアントシークレット ID 値に設定"MicrosoftAppPassword"します。
- OAuth 接続名として設定 ConnectionName します。
- MultiTenant に設定"MicrosoftAppType"します。
- 共通に設定"MicrosoftAppTenantId"します。
複製されたリポジトリの manifest.json ファイルに移動します。
manifest.json ファイルを開き、次の変更を更新します。
- のすべての出現箇所を "{TODO: MicrosoftAppId}"Microsoft アプリ ID に置き換えます。
- ngrok または開発トンネルドメインに設定 "<<domain-name>>" します。

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

残り 4 分

Visual Studio を開きます。
[ファイル>を開く>] プロジェクト/ソリューション...に移動します。
bot-conversation-sso-quickstart>csharp_dotnetcore フォルダーから、BotConversationSsoQuickstart.sln ファイルを選択します。
F5 キーを押してプロジェクトを実行します。
[セキュリティ警告] ダイアログが表示されたら、[はい] を選択します。

Web ページが開き、 ボットの準備ができました! というメッセージが表示されます。
トラブルシューティング

パッケージを見つけられないエラーが発生した場合は、次の手順に従います。
1. [ツール]>[NuGet パッケージマネージャーパッケージマネージャー>の設定] の順に移動します。
2. 表示される [オプション] ウィンドウで、[ NuGet パッケージマネージャー>パッケージソース] を選択します。
3. [追加] を選択します。
4. [ 名前] に「」と入力 nuget.org し、[ ソース] に「」と入力します https://api.nuget.org/v3/index.json。
5. [ 更新] を選択し 、[OK] を選択します。
6. プロジェクトをリビルドします。

Teams でボットをアップロードする

残り 3 分

複製したリポジトリで、BotConversationSsoQuickstartcsharp_dotnetcore>Microsoft-Teams-Samples>samples>bot-conversation-sso-quickstart> に移動します。
appPackage フォルダーに存在する次のファイルを含む .zip ファイルを作成します。
- manifest.json
- outline.png
- color.png
Microsoft Teams に移動します。
1. Teams クライアントで、[アプリ] を選択 します。
2. [アプリの管理] を選択します。
3. [ アプリのアップロード] を選択します。
4. [カスタムアプリのアップロード] オプションを探します。
[ 開く ] を選択して、 マニフェスト フォルダーに作成した .zip ファイルをアップロードします。
[ 追加] を選択して、ボットをチャットに追加します。

ボットを操作する場合は、メッセージを送信します。ボットは SSO トークンを交換し、代わりにGraph APIを呼び出します。サインアウトするメッセージを送信しない限り、サインインしたままになります。

ボットにメッセージを送信します。会話ボットは初めて同意を求めます。
1. デスクトップの場合: [ 続行] を選択して、ボットにアクセスするためのアクセス許可を Teams クライアントに付与します。
  
  注:
  
  これで、ボットアプリで SSO を構成したので、同意する必要があるのは唯一の時間です。
2. モバイルの場合: [ 同意する] を選択します。
  
  注:
  
  これで、モバイルでボットアプリに対する SSO を構成したので、同意する必要があるのは唯一の時間です。

課題の完了

残り 1 分

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

ステップバイステップガイドが正常に完了した後の出力のスクリーンショット。

おめでとうございます。

100% 完了しました

SSO 認証を使用したボットの構築を開始するためのチュートリアルを完了しました。