1. taminami

    Posted

    taminami
Changes in title
+Power Virtual Agents で認証を組み込む方法 (Azure AD)
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,97 @@
+※本記事は2019年11月25日現在の情報です。
+
+#はじめに
+本記事ではPower Virtual Agentsに認証機能を組み込む方法をご紹介します。認証プロバイダーとしてはAzure ADを利用します。基本的には以下のドキュメント通りですが、本記事では補足説明を加えます。
+
+参照: https://docs.microsoft.com/ja-jp/power-virtual-agents/configuration-end-user-authentication
+
+#Azure ADへのアプリケーションの登録
+1.Azureポータルにアクセスをし、「Azure Active Directory」をクリックしてください。
+
+2.「アプリの登録」メニューから「+ 新規登録」をクリックしてください。
+
+3.アプリケーションの登録を行います。この際のリダイレクトURIは、`https://token.botframework.com/.auth/web/redirect`とします。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/46205ed0-1035-b14f-8d43-5536da93a284.png)
+
+4.「概要」メニューに表示された「アプリケーション(クライアント)ID」をコピーし、メモ帳等に貼り付けてください。
+
+5.「API のアクセス許可」メニューから「+ アクセス許可の追加」をクリックしてください。
+
+6.「Microsoft Graph」を選択後、「委任されたアクセス許可」を選択してください。
+
+7.アクセス許可リストの中から「openid」にチェックを入れ、「アクセス許可の追加」をクリックしてください。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/fcdd576c-65a4-ba1e-47a1-eb100a042d6e.png)
+
+8.「証明書とシークレット」メニューから「+ 新しいクライアントシークレット」をクリックし、キーを作成してください。作成されたキーをメモ帳等にコピー&ペーストしてください。キーは一度しか表示されないため、十分に気を付けてください。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/1e46c050-32c4-9755-f20b-883f8b2b2077.png)
+
+9.「概要」メニューから「エンドポイント」をクリックしてください。
+
+10.「OAuth 2.0 承認エンドポイント (v2)」と「OAuth 2.0 トークン エンドポイント (v2)」をコピーし、メモ帳等に貼り付けてください。
+
+#認証情報の設定
+1.以下のリンクからPower Virtual Agentsにアクセスしてください。
+https://powerva.microsoft.com/
+
+2.サインアップが正常に完了したら任意のボット名を決め、「Create」します。
+
+3.「Manage」メニューの「Authentication」に、認証プロバイダーから取得した情報を入力します。
+
+※Authorization URL Query String Template、Token Body Template、Refresh Body TemplateのDescriptionはそのまま入力してください。**{ }で囲まれた部分を値に置き換える必要はありません。**
+
+ Field name | Description |
+|:----------------------:|:-------------------:|
+| Connection name | 任意の名前 |
+| Service Provider | デフォルトのままでOKです(oauth2generic) |
+| Client ID | AADからコピーした値 |
+| Client Secret | AADからコピーした値 |
+| Scope List delimiter | 「,」と入力してください |
+| Authorization URL Template | OAuth2.0承認エンドポイント(v2) |
+| Authorization URL Query String Template | ?client_id={ClientId}&response_type=code&redirect_uri={RedirectUrl}&scope={Scopes}&state={State} |
+| Token URL Template | OAuth2.0トークンエンドポイント(v2) |
+| Token URL Query String Template | 「?」と入力してください |
+| Token Body Template | code={Code}&grant_type=authorization_code&redirect_uri={RedirectUrl}&client_id={ClientId}&client_secret={ClientSecret} |
+| Refresh URL Template | OAuth2.0トークンエンドポイント(v2) |
+| Refresh URL Query String Template | 「?」と入力してください |
+| Refresh Body Template | refresh_token={RefreshToken}&redirect_uri={RedirectUrl}&grant_type=refresh_token&client_id={ClientId}&client_secret={ClientSecret} |
+| Scopes | openid |
+
+
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/bad17596-b4db-d9c5-d0ac-2193dc369745.png)
+
+4.全て入力できたら、最後に「Save」を押してください。
+
+#ダイアログへの組み込み
+本記事では、Greeting Topicを改造していきます。
+
+1.「Call an action」から「Authenticate」を選択してください。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/94ab3c80-ecc8-086e-f6bf-59e816cb4a15.png)
+
+※現状、コネクタとコネクタの間には、Authenticateは差し込めないようです。ワークフローの一番最後にアクションを追加する場合にのみ、Autenticateカードが表示されます。
+
+2.Authenticateを選択すると自動的に条件分岐が表示されます。Trueだった場合、Falseだった場合、それぞれ任意のメッセージをつけておきましょう。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/881d4ddc-0d16-cb4d-67ff-c71a6df54ed5.png)
+
+3.ここまで完成したら、最後に画面右上「Save」をクリックしてください。
+
+#テスト
+1.実験をしてみます。Helloとあいさつを投げると、登録しておいたメッセージが出力され、「Login」ボタンが表示されます。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/b19b4160-7b07-624b-34ca-fdc6830edba9.png)
+
+2.Loginボタンをクリックすると、ブラウザで別タブが開きます。AADアプリを登録したAADテナントに登録されているアカウントでサインインをし、正常に認証されると、validation codeが表示されます。この数字をコピーします。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/edce8e7d-539d-2ca6-bb48-e2b603a66485.png)
+
+3.コピーしたvalidation codeをボットに入力し、正常に認証されると以下のようになります。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/dfd0b03b-b4bd-e9ec-8040-dacf1984c4da.png)
+
+##Webチャットでテスト
+Webアプリ上でも正常に動作を確認できました。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/617cbb0d-dbd5-500f-9dd2-b13c00f173bf.png)
+
+##Teamsでテスト
+Teamsではログインすると、validation codeなしでチャットセッションが続くようです。
+![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/8d03b410-093a-d278-1191-655d61cbcb90.png)
+
+#さいごに
+認証プロバイダーから必要な情報さえ得られれば、チャットボットに認証機能を付け加えるのも容易に行えることを確かめられました。ドキュメントの情報によると、チャンネルによって動作が違うとの旨が書かれているので、現状は展開するチャンネルによる挙動の違いを考慮に入れながらワークフローを作っていく必要がありそうです。しかしながら、普段コーディングしない方でも、ここまでノンコーディングで組み込めるPower Virtual Agentsはすごいですね。
+