接下來幾天會介紹怎麼把前幾天在 Console Mode 做的機器人搬上像是 Messenger、LINE 這些台灣人常在使用的管道。

而今天的目標會放在 Messenger 上，首先我們要先修改之前只支援使用 Console Mode 的設定檔：

修改 bottender.config.js 設定檔

在 bottender.config.js 的設定檔裡面需要新增 messenger 的設定在 channels 裡面：

// bottender.config.js
require('dotenv').config(); // 記得 npm install dotenv

module.exports = {
  //... 其他省略
  
  channels: {
    messenger: {
      enabled: true,
      path: '/',
      pageId: process.env.MESSENGER_PAGE_ID,
      accessToken: process.env.MESSENGER_ACCESS_TOKEN,
      verifyToken: process.env.MESSENGER_VERIFY_TOKEN,
      appId: process.env.MESSENGER_APP_ID,
      appSecret: process.env.MESSENGER_APP_SECRET,
    },
  },
};

這邊我們都是使用 process.env (環境變數) 來避免直接把敏感資訊的字串寫在程式碼裡面，這是一個好習慣，除了可以輕易地在不修改程式的情況下改設定，更可以避免輕易的把 Commit 到 Git 裡面去，或甚至因此上傳到網路、GitHub 上。

最上方的 require('dotenv').config()，是我們打算使用 dotenv 這個套件，來直接讀取 .env 這個檔案的設定注入到 process.env，所以這些敏感的資料我們需要另外建立 .env 檔案來放：

// .env
MESSENGER_PAGE_ID=
MESSENGER_ACCESS_TOKEN=
MESSENGER_VERIFY_TOKEN=
MESSENGER_APP_ID=
MESSENGER_APP_SECRET=

(注意：如果有在用 Git，這個 .env 必須列在 .gitignore 裡面)

從這邊可以看到，我們需要五個環境變數設定：

• Page Id
• Access Token
• Verify Token
• App Id
• App Secret

這些東西還不用馬上填，都將在下一個步驟 - 「建立 Facebook 應用程式」之後來填入。

建立 Facebook 應用程式

如果你已經很熟悉怎麼建立 Facebook 應用程式，可以直接跳過這段教學，直接填好 .env 並從下一段「建立 Webhook 開始」。

為了建立 Facebook 應用程式，我們必須到 Facebook Developer 的網頁 - http://developers.facebook.com，然後點擊「我的應用程式」> 「建立應用程式」：

建立一個新的應用程式後，要來新增 Messenger 相關的設定，所以要點擊 Messenger 的「設定」按鈕：

跳轉頁面後接著頁面往下滑，可以看到「新增或移除粉絲專頁」，點他新增專頁：

（沒有粉絲專頁則要先建立新的粉絲專頁）

授權好了之後，會看到這樣的畫面會有「Page Id」，必須填到你的 .env 檔案裡面的 MESSENGER_PAGE_ID 欄位，接著要點「產生權杖」：

產生出來這個複製出來就是「Access Token」，必須填到你的 .env 檔案裡面的 MESSENGER_ACCESS_TOKEN 欄位：

Menu「設定」進去「基本資料」那邊則可以拿到「App Id」以及「App Secret」，分別填到你的 .env 檔案裡面的 MESSENGER_APP_ID 以及 MESSENGER_APP_SECRET 欄位：

// .env
MESSENGER_PAGE_ID=你的 Page Id
MESSENGER_ACCESS_TOKEN=你的 Access Token
MESSENGER_VERIFY_TOKEN=1Q40y4m1U0t05CL
MESSENGER_APP_ID=你的 App Id
MESSENGER_APP_SECRET=你的 App Secret

至於 MESSENGER_VERIFY_TOKEN 可以隨便填一段字或是學我在 Strong Password Generator 上面產生一段比較安全的。

這樣就收集完 Facebook 這邊需要的資料囉！

建立 Webhook

開啟 Server

當我們按照前面的教學，把 bottender.config.js 加上 channels.messenger 的設定時，這時候執行 bottender dev 將會自動地開啟 Server，並使用 ngrok 產生一個對外的 HTTPS 網址。

npx bottender dev

(注意：這次就不要加 --console 了)

為什麼需要 ngrok 呢？

因為當我們開發時在自己電腦上開啟 Server 時，我們能透過 http://localhost:port 去連到，但這樣子 Facebook 是無法連到我們的 Server 的，所以需要開 Tunnel，而且他們還能提供 Secure 的 HTTPS 連線。

這樣子的服務、工具，最有名的就是以下幾個：

• ngrok
• localtunnel
• serveo

在打開 ngrok 的情況下，前往 http://localhost:4040 應該能看到它的 Inspector：

這可以用來檢查 Facebook 是否有送東西過來我們的 Server。

用 CLI 設定 Webhook

開好了 Server 跟 ngrok 後要另外用另一個 Terminal 分頁來執行以下指令：

npx bottender messenger webhook set

這邊會從你的 bottender.config.js 把一些資訊拉出來，並把網址從 ngrok 找到，送去給 Facebook 訂閱相關事件送到 Webhook。

最後在 Messenger 上測試一下 Bot：

是不是很熟悉？這就是我們前兩天做的笑話機器人跟比特幣機器人喔。

結語

不管是接什麼平台，這開應用程式跟設定的步驟總是最煩瑣而且又容易出錯，不過馬上就要苦盡甘來了，最難的就是這個了。