[Bot] 利用Bot Connector服務連結Bot Application實作Facebook Messenger Bot

  • 1227
  • 0
  • Bot
  • 2016-07-30

把自己實作的Bot Application發布至Microsoft Azure

並利用Microsoft Bot Connector 連結 Bot Application與 Facebook Messenger成為 Messenger Bot服務

前一篇說明了如何利用政府開放資料與Bot Application 實作即時的紫外線查詢 Bot

[Bot] Visual Studio Bot Application 實作及時UV查詢

因為篇幅關係就拆成了兩篇

這一篇將把上一篇Bot的實作上傳至Microsoft Azure上

測試成功後將利用Microsoft Bot Framework的 Bot Connector 與 Facebook Messenger連結成為 Messenger Bot

不得不說Bot Framework真的很簡易的就把自己的Bot實作與各大程式應用接在一起了

正文開始!

-----

首先介紹一下Bot Connector的服務

我們可以看到把自己的Bot 上傳到自己的空間成為網頁服務之後,在把自己的Bot註冊到Bot Framework中

藉由Bot Connector設定一些權杖及權限等設定連結,即可與各大通訊軟體連結服務(當然以西方的軟體優先ex.Skype, GroupMe, Slack, Telegram等)

因此以下以已經有寫出一支Bot程式進行後續的連接介紹為主,若還沒寫出來的可以先利用Bot Application的範例檔直接實作或者觀看我上一篇的實作

----

首先先把自己的Bot發布至Microsoft Azure上(以下以Microsoft Azure作為網頁服務空間)

若還沒有自己的網頁服務空間,Microsoft Azure有6300塊新台幣的試用餘額給大家試用

網址在此 https://azure.microsoft.com/zh-tw/

於是就把自己的Bot發布至自己的Microsoft Azure

上傳成功應會出現一個網頁,也是專案內default.htm顯示的內容

可至https://your_bots_hostname/api/messages確定自己的Bot Service

上傳後確定服務成功後先告一段落

----

接著就是要到Bot Framwork註冊自己的Bot

以下以最新Bot Framework V3版本為主

首先到Microsoft Bot Framework的網站(連結在此)

點選網站上方的Register a Bot

接著有幾個重要資料需要填寫(星號的一定要填)

Name=>Bot名稱(可修改)

Bot handle=>對應Bot ID(注意這個不可跟別人重複,並且註冊後無法修改)

Messaging Endpoint=>Bot 服務的接口

(Microsoft Azure服務為例網址為https://your_bots_hostname/api/messages)並且注意一定要是https

Microsoft App ID (V3版本新增)點選下方的Create即可產生

同時點選Generate Password產生 Microsoft App Password

請注意:最好開啟記事本複製,該密碼只會出現一次不然就要重新申請一個新密碼

按下確認後原畫面的Microsoft App ID會自動填入

Publisher name=>發行者名稱

Publisher Email=>發行者聯絡方式

Privacy statement=>隱私權聲明(可參考其餘網站的聲明,若單字測試可先隨意填入一個網頁網址)

Terms of Use =>使用方式說明(在V3版本改為必填,一樣可參考其餘網站的聲明,若單字測試可先隨意填入一個網頁網址)

最後記得把打勾同意Microsft Bot的使用聲明

完成後應可得以下頁面

接著要回到Visual Studio

還記得剛剛有Bot handle, Microsoft App Id, Micrsoft App Password等資訊嗎?

沒錯在專案的Web.config就要一個個填入,而BotId就是填入Bot handle

填入之後再重新發布一次

然後回到Bot Framwork網站的My Bot頁面

左下角有個Test Connection to your bot

點下Test後若出現Endpoint authorization succeeded就表示成功連接Web service與Bot Connector的部分

---

接著第三部分就是要把Bot Connector與 Facebook Messenger連接起來了

首先到自己的臉書創立一個粉絲專頁,由於Messenger bot需要一個專頁來Host

創立完成後到Facebook developer的頁面(網頁在此)

點選右上角的Add a new App並選擇WebSite App(抱歉敝人習慣用英文介面)

接著為自己的App取名,並填入Contact Email

之後應該會到一個開始設定細節的網站

但可直接按右上角的Skip Quick Start跳過

接著會到一個你App詳細設定的頁面

首先記得先開啟記事本把App ID還有App Secret內容存下來

接著到Bot Framework的網頁點選新增連接到Facebook Messenger

之後顯示的頁面就是雙方權杖的重要的資料填寫,主要是如下圖顯示的兩部分

當然你可以從頭看一次,但就是如我上述的開新專頁與App等步驟

首先點開上圖紅1設定Webhook部分你會得到Callback Url與Token表示同意上臉書連接到Bot Connector

一樣先複製到記事本

接著到剛剛Facebook developers App的設定頁面

左方有個Add product,點開後右方點選Messenger

點開後選擇你這個App是要與哪個粉專連接,所以就選一開始創立的粉專

同時他會給你Page的Access Token,一樣先存下來

接著點選右下方的Setup Webhook

跳出的頁面會有兩個部分要填,一個是Callback Url,一個是Token

就是要填入剛剛Bot Framework那邊所產生的Callback Url與Token

下方選擇你這個Messenger所提供的服務,懶得確認就全勾吧XDDD

接著點認證並儲存,若沒過就表示你有打錯囉,快回去Bot Framework的頁面重新複製吧

接著很重要的一點!!!!認證過關後超容易忘記的部分就是記得下方的部分要選擇自己的粉專並訂閱,不然是無法Work的唷

這樣Facebook Messenger要連結Bot Connector的單向認證就完成了

接著是Bot Connector要能成功的把資訊吐回Messenger

要設定的就是剛剛Bot Connector下方的四個資料

Page ID指的是臉書粉專的ID

其餘三個在之前已經有在記事本儲存囉(不見的趕快往回看找回來吧!!!!)

粉專頁面的ID可以到粉專頁點選關於(About)頁面得到

於是就把剛剛Bot Framework的四個資料填完

確定送出後應可以看到Bot Framework的FB Messenger是Running的狀態了

於是跑到粉專上點選聊天

就可以看到查詢的內容囉(晚上做的.....當然紫外線是0是其他值我還覺得可怕....)

2016/07/11早上九點半即時紫外線數值

於是就成功的把Bot Application上傳到Microsoft Azure服務

並利用Bot Connector的服務把Bot Application與FB Messenger連接

成為Messenger Bot囉

 


 

  • 文章中的敘述或資訊有誤,歡迎回應指正,討論與指教是進步的原動力:)
  • 喜歡此點部落文章,歡迎各位轉載並於文末附載原文網址超連結與站名【DriftMind】