跳轉到

Messenger Channel

當真正要服務的人本來就習慣透過 Facebook Page 傳訊息，而且你希望 Agent 直接在 Messenger 收到並回覆訊息時，就用 Messenger channel。

對 Codeer 來說，Messenger 上線時真正重要的入口是 Webhook URL。在 Messenger channel 上按 Publish，主要是在控制 Codeer 是否開始處理 Messenger webhook 事件；實際回覆仍然來自目前綁定 Agent 的最新已發布版本。

開始前要先有什麼

  • 一個至少發布過一次的 Agent
  • workspace 的 channel 編輯權限
  • 一個你可以管理的 Facebook Page
  • 一個 Meta app
  • Meta app 內可用的 Messenger / Messaging 設定
  • 一組可發送 Page 訊息的 access token
  • 一個可被外網存取的 HTTPS Codeer 環境

為什麼一定要公開 HTTPS

Meta 只接受可從外網連到的 HTTPS webhook。Codeer 顯示的 Webhook URL 如果不是公開 HTTPS，Meta 在 webhook verify 那一步就不會成功。

你在 Meta 端會準備什麼

  1. 一個 Meta app

  2. 一個要接收與發送 Messenger 訊息的 Facebook Page

  3. Messenger / Messaging 相關設定

  4. 一個 webhook 設定，callback URL 指到 Codeer 的 Webhook URL

  5. 訂閱該 Page 的訊息事件

  6. 可用來代表該 Page 發送訊息的 access token

Page、token、webhook 訂閱要指向同一個 Page

Codeer 會用你填入的 Facebook Page ID 檢查 webhook 事件是不是屬於這個 channel。Page ID、Page access token 與 webhook 訂閱如果不是同一個 Page，訊息可能會被忽略，或是 Codeer 無法回覆。

完整設定流程

  1. 先在 Codeer 建立 Messenger channel，並複製 Webhook URL

    • 先在 Codeer 的 Editor 發布目標 Agent。
    • 打開 Channels。
    • 按 New Channel。
    • 選擇 Messenger。
    • 為這個 channel 設定穩定的 Name 與 Slug。
    • 在 Messenger channel 的 Configuration 複製 Webhook URL。
    • 這個階段先不要發布 Codeer 的 Messenger channel。先收集 Meta 端需要的資料並儲存到 Codeer，再回到 Meta 設定與驗證 webhook。

  2. 在 Meta app 加入 Messenger / Messaging 設定

    • 打開 Meta for Developers。
    • 進入要用來接 Messenger 的 Meta app。
    • 加入 Messenger 或 Messaging 相關產品與 use case。
    • 連結要給使用者傳訊息的 Facebook Page。
    • 確認這個 app 有權限管理該 Page 的訊息。

    Meta 後台名稱可能會變

    Meta 會不定期調整 App Dashboard 的側邊欄與 use case 名稱。重點不是選單文字，而是要完成三件事：app 連到正確 Page、webhook 能 verify、token 能代表該 Page 發送 Messenger 訊息。

  3. 取得 Facebook Page ID

    • 在 Facebook Page 設定、Meta Business Suite、Meta App Dashboard，或 Graph API tooling 裡找到該 Page 的 ID。
    • 複製這個 ID，稍後貼到 Codeer 的 Facebook Page ID。

  4. 建立 Webhook Verify Token

    • 自己產生一段不容易猜到的字串，作為這個 channel 專用的 Webhook Verify Token。
    • 先把它保存下來，稍後會同時填在 Meta webhook 設定與 Codeer 表單。

    Verify Token 不是 Page access token

    Webhook Verify Token 是你自訂給 Meta 驗證 webhook 用的共享字串。Page access token 則是 Codeer 用來代表 Facebook Page 發送訊息的 token。兩者用途不同，不要混用。

  5. 複製 Meta App Secret

    • 在 Meta App Dashboard 打開 App Settings > Basic。
    • 找到並複製 App Secret。
    • 稍後貼到 Codeer 的 Meta App Secret。

    Meta App Dashboard 的 Basic settings 頁面，顯示 App Secret 的位置

    Codeer 會用 App Secret 驗證 webhook 簽章

    Messenger webhook 打進 Codeer 時，Codeer 會用 Meta App Secret 檢查 X-Hub-Signature-256。如果 App Secret 不對，事件會被忽略。

  6. 建立或取得 Page access token

    • 在 Meta App Dashboard、Graph API Explorer，或你們既有的 Meta token 流程中，取得可代表該 Facebook Page 發送訊息的 access token。
    • 確認 token 對應的 Page 就是你在 Codeer 裡填的 Facebook Page ID。
    • 稍後貼到 Codeer 的 Access Token。

    Messenger API 設定頁面，顯示粉絲專頁 token 產生區塊

    正式對外前確認 token 與權限狀態

    如果 app 還在 development mode，或只拿到測試用 token，可能只有 app roles 裡的人能測。若要服務一般使用者，請確認 Meta app、權限、token 有符合你們的正式上線方式。

  7. 回到 Codeer 儲存 Messenger 設定

    • 回到 Codeer 的 Messenger channel。
    • 在 Configuration 填入：
      • Facebook Page ID
      • Webhook Verify Token
      • Meta App Secret
      • Access Token
    • 選擇負責回覆 Messenger 訊息的已發布 Agent。
    • 儲存設定。

    一定要先儲存 Verify Token，再到 Meta 驗證 webhook

    Meta verify webhook 時會呼叫 Codeer 的 Webhook URL，並帶上你在 Meta 輸入的 verify token。Codeer 會用已儲存在 channel 裡的 Webhook Verify Token 進行比對，所以這一步必須在 Meta verify / save 之前完成。

    下拉選單只會出現已發布的 Agent

    如果你在這裡找不到 Agent，先回到 Editor 發布它，再回到 Messenger channel 頁面。

  8. 在 Meta 設定 Webhook

    • 在 Meta app 的 Messenger / Webhooks 設定裡新增 callback。
    • Callback URL 貼上 Codeer 的 Webhook URL。
    • Verify Token 填入剛剛建立的 Webhook Verify Token。
    • 按 Meta 後台的 verify / save。
    • verify 成功後，訂閱要接收訊息的 Facebook Page。
    • 至少訂閱 Messenger 訊息相關事件，讓 Codeer 能收到使用者傳來的訊息。

    Messenger API 設定頁面，顯示 Webhook callback URL 與 verify token 欄位

  9. 發布 Codeer 的 Messenger channel

    • webhook、Page ID、憑證與 Agent 綁定都完成後，再發布 channel。
    • 如果你想先停止處理新的 Messenger 事件，就用 Unpublish。

第一次 live 測試

正式分享給更多人之前，先用一個真實 Facebook 帳號跑完一次完整流程。

  1. 打開 Facebook Page 的 Messenger 對話。

  2. 送出一則真實文字訊息。

  3. 確認 Messenger 裡有收到 Agent 回覆。

  4. 回到 Codeer 的 Histories，確認對話有被記錄。

  5. 確認回答來自你剛剛綁定的 Agent 最新已發布版本。

Troubleshooting

如果 Messenger 已接上，但回應不對，請依序檢查：

  1. 正確的 Agent 版本是否已發布。

  2. Messenger channel 是否已發布。

  3. Meta webhook 是否 verify 成功。

  4. webhook 是否訂閱了正確的 Facebook Page。

  5. Facebook Page ID 是否和 webhook 事件、Page access token 屬於同一個 Page。

  6. Webhook Verify Token 是否和 Meta webhook 設定完全一致。

  7. Meta App Secret 是否來自同一個 Meta app。

  8. Access Token 是否仍有效，而且可以代表該 Page 發送訊息。

相關指南