ハロの外部記憶インターフェイス

そろそろ覚える努力が必要かも…

Azure Bot Service でChat BotをFacebook Messengerに連携してみる。

Azure Web App Bot

AzureでBotサービスを作成します。
Azure Portalから新規追加で「Web App Bot」を検索し、作成を開始します。 f:id:haronoid:20180102195901p:plain

・ボット名:ボットの名前
・サブスクリプション:所持しているサブスクリプション
・リソースグループ:新規作成します
・場所:Japan West or Japan Eastなどを選べます
・価格レベル:F0(Free) or S1(有料)
・アプリ名:Urlになるアプリ名
・ボットテンプレート:C#とNode.jsのどっちかを選び、テンプレートをしていします。
  (初期状態としてコードが提供されています)
・App Service プラン/場所
・Azure Storage:データ登録用のストレージです
・Application Insights:日本では分析を支援していないため、オフにします。

しばらくすると、Azure上に必要なサービスが初期化されます。 f:id:haronoid:20180102201305p:plain

・ビルド
オンラインでコードを修正したり、ダウンロードすることが出来ます。 f:id:haronoid:20180102201709p:plain

・Test in Web Chat
作成されたBotのテスト用の簡易フラットフォームです。 f:id:haronoid:20180102202359p:plain

・チャンネル 外のサービスと連携するためのチャンネルです。後でFacebook Messangerとの連携で使用します。 f:id:haronoid:20180102202513p:plain

Facebook Page

アプリ連携用にPageを作成します。 とりあえず、必要なのはPage IDなので、サイドバーのページ情報から取得します。 f:id:haronoid:20180102205918p:plain

Facebook for Developer

https://developers.facebook.com/ Facebookの開発用プラットフォームです。 ログインすると、右上のマイアプリから「新しいアプリを追加」が出来るようになるので、新しいアプリを作成します。 f:id:haronoid:20180102203001p:plain ダッシュボードから、アプリIDとApp Secretが確認出来ます。後で必要になるので記憶しておきましょう。 サイドバーから「製品を追加」を選択肢、「Messenger」を設定します。 f:id:haronoid:20180102210443p:plain トークン生成から、上記で作成したページを設定するとトークンキーが生成されます。

Azure to Facebook Setting

チャンネルから「Facebook Messenger」を選択します。 f:id:haronoid:20180102210150p:plain

Facebook ページ ID:上記のPageID
Facebook アプリ ID:Facebook アプリ ID
Facebook アプリのシークレット:Facebook アプリのシークレット
ページ アクセス トークン:上記で生成したトークンキー

FacebookアプリのWebhook用のコールバックが下に表示されます。 f:id:haronoid:20180102210801p:plain

設定が完了すれば、WebHooksにPageイベントについて紐付けが出来るので、選択しフォローします。 f:id:haronoid:20180102211653p:plain

Facebook アプリのWebHook設定

「Webhooksの設定」ボタンをクリック f:id:haronoid:20180102210858p:plain 以下の画面が表示されるので、上記のコールバックURLと認証トークンを設定します。 f:id:haronoid:20180102210934p:plain

Facebook Pageからのチャット

パージのチャットは「https://m.me/ページID」もしくは「https://m.me/ページユーザ名」で表示されます。 うまく設定できていれば、Test in Web Chatと同じ用に表示されるはずです。