How to build a Bot for Facebook Messenger - Setup

Ching-Wen Hsu -

想要做一個 Facebook Messenger 機器人，第一步要做什麼呢？

當然是先建一個來玩玩，我直接參考 Facebook 官方文件 的 Getting Started ，使用 Node JS ，在 10 分鐘內打造 Bot （這是它的 slogan ，而且很顯然花了我不只十分鐘否則就不需要寫這一篇了）。

古今中外的 chatbot 應該作法都類似，有一台 Server 模擬人，這個 Server 和各種 messenger 例如 Line, Facebook Messenger and Slack 之間約定好一個溝通的渠道，然後像個人一樣的回訊息！

┌-------┐  read  ┌---------┐
│ Human │<-------│Messenger│
│       │------->│         │
└-------┘ write  └---------┘

┌--------┐  read  ┌---------┐
│ Server │<-------│Messenger│
│ (bot)  │------->│         │
└--------┘ write  └---------┘

要開始啦！這篇主要是補完文件上沒有說明的各種部分。

建立 Facebook App 和粉絲頁

建立一個新的 Facebook App 後，在 Dashboard 上 Token Generation 的地方選擇想要 access 的粉絲頁，並複製產生的 page access token 。

建立 bot

首先去 Github 下載 Sample Code ，這是一個 Node JS project ，代表了我們最重要的 bot 角色。

既然這個 bot 需要和 messenger 溝通，那他當然必須架在 messenger 可以連到的地方。所以要成為 bot 的條件就是：

  • 有 public URL
  • 可以用 SSL 連線（驚！）

第一點很容易，有一台 AWS 的 EC2 就行，第二點是 Facebook 的 Webhook 規定，而且它還不接受自己簽署的憑證哭哭

於是我們找了一個免費簽發憑證的 CA：https://letsencrypt.org/ ，它 based on domain name 來發憑證，而且 Facebook 也承認它簽發的憑證。不過每張憑證只有 90 天效期，官方建議每 60 天自動 renew 。

簽發憑證

Letsencrypt 官方建議有 Shell Access 的機器使用 Certbot 來產生憑證，選好系統和想要安裝的 webserver 以後就照步驟來。選 webserver 的原因是它可以幫你直接設定，不過也只產生憑證、自己來改設定檔。
我使用 ubuntu 14.04 (trusty) 和 Apache 。

wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto
./certbot-auto

設定好一些基本資料以後，就可以開始產生憑證了：

./certbot-auto certonly --apache -d example.com -d www.example.com

這裡的 certonly 代表只產生憑證、不代為設定； --apache 其實也可以不用下，會有選項可以選； -d 後面代表要簽署的 domain name ，可以多個，如果沒有下這個指令的話，在過程中也會自動抓出幾個來給你選，不過我想要綁的 domain name 都沒有出現，所以就自己下參數了。

簽署完的憑證會放在 /etc/letsencrypt/live/ 裡，我的 Apache virtual host 設定長這樣：

<VirtualHost _default_:443>
     SSLEngine On
     SSLCertificateFile /etc/letsencrypt/live/example.com/cert.pem
     SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
     SSLCertificateChainFile /etc/letsencrypt/live/example.com/fullchain.pem
     ServerName example.com
     ProxyPreserveHost on
     ProxyPass / http://localhost:5000/
</VirtualHost>

我的設定方式是對外透過 Apache 再導去 Node 使用的 port 5000 ，所以把憑證安裝在 Apache 上。如果是直接使用 Node 對外或許可以直接在 Node 安裝憑證。

設定專案

機器準備好了！再來是專案。前面下載過 Sample Code ，下載完 Node project 以後要做的事情當然是：

npm install
npm start

然後華麗地出錯！

Missing config values

要先設定 config 唷^^ 打開 config/default.json :

{
    "appSecret": "", // Facebook App 的 App Secret
    "pageAccessToken": "", // 上面複製過的 page access token
    "validationToken": "please_verify_me", // 隨意輸入
    "serverURL": "https://example.com" // 自己的 domain name
}

這樣應該就可以好好啟動了

在 Facebook App 設定 Webhook

回到 Facebook App Dashboard ，選擇 Setup Webhooks

  • Callback URL: 填入 https://example.com/webhook
  • Verify Token: 填入上面自己隨意填寫的 please_verify_me ，用來向 Node server 驗證
  • 下面選擇 messages 和 messaging_postbacks

驗證通過就完成了一個 echo 機器人，可以跟他聊天享受鬼打牆的快感。

--

看起來很容易但中間撞了好幾次牆，例如發現需要 SSL 以後先試著自己簽一張憑證但不被承認，和 letsencrypt 的決鬥也並非那麼順利，很多亂七八糟的問題，總之冷靜下來好好看錯誤訊息，一切都會好好的，錯誤訊息不會騙你，還會引導你不要多走那麼多冤枉路。

P.S. 記得要回來設定 renew certificate