Edited at
CogbotDay 23

Azure Bot Service (V4) による Office 365 ユーザー認証を試してみる (2018年12月版)

チャットボットからユーザー認証を行って、ユーザー情報を利用したり、カスタマイズ機能を提供したりする、というのはよく想定されるシナリオかと思います。

Azure Bot Service には OpenID プロバイダーを利用した OAuth 認証機能が組み込まれており、各種設定をすることで簡単に利用できます。

今回は Azure Bot Service (Bot Framework ベースのチャットボット Web アプリ) で、Office 365 ユーザー認証を利用する手順を紹介します。


公式ドキュメント

docs.microsoft.com > Azure > Azure Bot Service を介してボットに認証を追加する (Bot Framework V4)



ポイント

Azure のサブスクリプション管理者(アカウント) と Office 365 の管理者(アカウント) が同一でないケースを踏まえ、


  • 最初に Office 365 管理者アカウントで Office 365 テナントに紐づくアプリ登録 (= App ID と App Password を取得) を行います

  • アプリ登録で発行された App ID と App Password を用いて、Azure サブスクリプションの管理者アカウントで Azure Bot Service 側の設定を行います


準備


  • Office 365 アカウント


    • チャットボットに必要な権限を付与できる管理者ユーザーなどをご準備ください。Azure サブスクリプションの管理者と同一である必要はありません

    • 今回は、Office 365 Business Premium の無料試用版を利用しています



以下 Azure Bot Service を作成、利用するための準備です。詳細は Azure Bot Service × Bot Framework V4 のはじめかた をご覧ください。


  • Microsoft アカウント & Azure サブスクリプション




  • Bot Framework V4 Sample



  • C# or Node.js の開発ツール、開発&稼働環境


    • IDE として Visual Studio 2017 (Win/Mac ※無償版のCommunity でOK) または Visual Studio Code (Win/Mac/Linux) など

    • Node.js で IDEで稼働環境をインストールしていない場合は、ローカルに Node.js および npm をインストールして準備しましょう




  • Bot Framework Emulator


    • チャットボットの動作を確認するためのツール (Win/Mac/Linux)。今回は v4.x版を利用しています




手順


1. Microsoft App Portal で新規アプリの登録

Microsoft App Registration Portal をブラウザーで開き、Office 365 アカウント でサインインします。[アプリの追加] をクリックします。

20181220_01.PNG

アプリケーションの名前 (自分で識別しやすいもの) を入力し、[Create] をクリックして新規作成します。

20181220_02.PNG

アプリケーション登録画面が表示されます。

表示される アプリケーション ID (App ID) をコピーしてローカルに保存しておきます。

アプリケーションシークレット の欄にある [新しいパスワードを生成] をクリックして、パスワードを生成します。

20181220_03.PNG

表示されるパスワード (App Password) をコピーして、先ほど保存した App ID とセットでローカルに保存しておきます。

20181220_04.PNG


パスワードは作成時に表示されるのみ、今後二度と表示されません。分からなくなった場合は再作成を行います。


アプリケーション登録画面に戻り、ページ中腹にある プラットフォーム の欄にある [プラットフォームの追加] をクリックします。

20181220_05.PNG

プラットフォームの追加 画面で Web を選択します。

20181220_06.PNG

Web プラットフォームが追加されたら、以下のように設定を行います

20181220_07.PNG

さらに、アプリケーション登録画面の Microsoft Graph のアクセス許可 の欄にある 委任されたアクセス許可[追加] をクリックします。

20181220_08.PNG

デフォルトでサインインとユーザー情報取得を行う User.Read が付与されています。今回は、OpenID を利用する openidprofile、Microsoft Graph により Office 365 上の情報を取得&操作する Mail.ReadMail.SendUser.ReadBasic.All を選択して追加しておきます。

20181220_09.PNG

アプリケーション登録画面下部の [保存] をクリックして登録した情報を保存します。

20181220_10.PNG


2. Azure Bot Service の新規作成

Azure Portal から Azure サブスクリプション が 紐づいたアカウントでサインインします。

[+新規作成] をクリック、Bot Service と検索して Web App Bot を新規作成します。

20181220_11.PNG


Azure Bot Service の認証機能を使うだけなら Bot Registration でも OK です。ここでは最終的にアプリをアップロードすることも踏まえて Web App を選択しています。


Bot Template は V4 を選択、 Basic Bot のままでも構いませんが、より単純な Echo Bot に変更しています。言語は C# または Node.JS から選択してください。

20181220_12.PNG

また、Microsoft App ID とパスワードは自動作成せず、1. で作成した AppID と パスワードを入力します。

20181220_13.PNG

[作成] をクリックして、Azure Bot Service を作成します。

Bot Service が作成されたら表示して、メニューから [設定] をクリックします。Bot Service の設定 ブレードの一番下にある OAuth 接続設定 の欄にある [設定の追加] をクリックします。

20181220_14.PNG

新しい接続設定ブレードで以下のように設定します。


  • Name: (ご自身で識別しやすいものを) ※ローカルに保存しておきます

  • サービスプロバイダー: Azure Active Directory V2

  • Client Id: ローカルに保存しておいた App ID

  • Client Secret: ローカルに保存しておいた App Password

  • Tenant ID: common

  • スコープ: 1. Microsoft App Portal で新規アプリの登録 で選択したMicrosoft Graph のアクセス許可 を入力します。(今回は Mail.Read Mail.Send openid profile User.Read User.ReadBasic.All)

20181220_15.PNG

[Save] をクリックして設定を保存します。

Bot Service の設定 ブレードの一番下にある OAuth 接続設定 の欄に新しく作成した接続が表示されるので、クリックして開きます。

20181220_16.PNG

接続テスト をクリックします。

20181220_17.PNG

新しいブラウザーが開き、初回のみ アプリが要求しているアクセス許可の一覧が表示されるので、Accept(承認) をクリックします。

20181220_18.PNG

Test Connection to (YOUR_CONNECTION_NAME) Succeeded というページが表示されれば、無事接続ができています。

20181220_19.PNG


3. Bot Framework サンプルコードを利用した認証の確認

C# または node.JS のサンプルコードに、自分で作成したアプリ設定を追加します。


C# の場合

AuthenticationBot.csConnectionName2. で作成した接続名を入力します。


AuthenticationBot.cs

namespace Microsoft.BotBuilderSamples

{
: (中略)

public class AuthenticationBot : IBot
{
private const string ConnectionName = "MSGraph";



node.JS の場合

bot.jsCONNECTION_NAME に 2. で作成した接続名を入力します。


bot.js

const { ActivityTypes } = require('botbuilder');

const { ChoicePrompt, DialogSet, OAuthPrompt, WaterfallDialog } = require('botbuilder-dialogs');

: (中略)

const CONNECTION_NAME = 'MSGraph';



C# & node.JS 共通

bot-authentication.bot に 1. で作成した App IDApp Password を入力します。


bot-authentication.bot

{

"name": "bot-authentication",
"description": "",
"services": [
{
"type": "endpoint",
"appId": "YOUR_APP_ID",
"appPassword": "YOUR_APP_PASSWORD",
"endpoint": "http://localhost:1205/api/messages",
"id": "1",
"name": "development"
}

:(後略)


いずれも保存して、アプリを起動します。

Bot Emulator を起動し、[Open Bot] をクリックして、bot-authentication.bot を選択します。

20181220_21.PNG

Bot Emulator からアプリに接続し、メッセージが表示されればOKです。何か入力すると、[Sign in] ボタンが表示されます。

20181220_22.PNG

クリックするとブラウザーが開くので、Office 365 アカウントでサインインを行います。

20181220_23.PNG

表示されたアクセスコードを Bot Emulator に入力すると、サインインが完了です。

20181220_24.PNG