LoginSignup
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

CogbotAdvent Calendar 2018

Day 23
@annie(annie)

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

Last updated at Posted at 2018-12-25

チャットボットからユーザー認証を行って、ユーザー情報を利用したり、カスタマイズ機能を提供したりする、というのはよく想定されるシナリオかと思います。
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 を利用する openid と profile、Microsoft Graph により Office 365 上の情報を取得＆操作する Mail.Read、Mail.Send、User.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.cs の ConnectionName に 2. で作成した接続名を入力します。

AuthenticationBot.cs
namespace Microsoft.BotBuilderSamples
{
 : (中略)

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

node.JS の場合

bot.js の CONNECTION_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 ID と App 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

5
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?