測試 Webhooks 的回呼網址範例

您可以使用 Glitch 複製我們的回呼應用程式範例，在 Glitch 的伺服器上建立可用來測試 Webhooks 的公開回呼網址。建立 Glitch 專案的目的是將 Webhook 承載寫入記錄檔案，您可以在觸發 Webhook 時即時查看該檔案。

設定用於雲端 API 的 Webhook 測試端點的準備工作

本指南是多個步驟程序中的一部分，在您開始使用 Glitch 設定範例應用程式端點之前，必須已先完成其中數個步驟。您必須已完成下列操作：

請參閱開始使用 WhatsApp Business 雲端 API，瞭解開始使用 WhatsApp Business 雲端 API 的完整指示，以能夠傳送您的第一則訊息。

設定和配置 Glitch

前往 glitch.com 並建立帳號，如此您便可以使用我們在本指南中討論的所有功能，並確保我們討論的用戶介面與您看到的用戶介面一致。如果沒有建立帳號，您將無法使用大多數的用戶介面功能，且外觀看起來將有所不同。
設定好您的 Glitch 帳號後，使用以下連結開啟我們的入門 Glitch 專案範本：WhatsApp 平台 Webhook 專案範本。
點擊 Glitch 網頁右上角的 Remix to Edit（混搭編輯）按鈕，以複製我們的應用程式範本。
點擊 Remix to Edit（混搭編輯）按鈕以建立您自己的 Glitch 專案
系統將為您的帳號建立專案副本。
在 .env 檔案中，將 VERIFY_TOKEN 的值更新為您選擇的隨機字串。然後，您可以選擇從應用程式主控板的 WhatsApp > API 設定中複製暫時／永久存取權杖的值，將其貼上成為 WHATSAPP_TOKEN 的值。
更新專案的 Glitch 環境變數
點擊右上角的 Share（分享），以取得上線網站的網址。在網址結尾加上 /webhook，以取得您的完整回呼網址。看起來像 https://<project-name>.glitch.me/webhook。

端點現在已準備就緒，您需要返回應用程式主控板。

使用 Glitch 端點和驗證權杖設定應用程式主控板

在應用程式主控板中，找到 WhatsApp 產品並點擊 Configuration（設定）。
接著找到 Webhooks 區塊並點擊 Edit（編輯）。點擊後，畫面上會出現一個對話方塊，要求您提供 Callback URL（回呼網址）和 Verify Token（驗證權杖）。您需要使用在設定和配置 Glitch 小節中用於設定 Glitch 專案的值。例如，（https://<project-name>.glitch.me/webhook）表示 Callback URL（回呼網址）的值，（“HAPPY”）表示 Verify token（驗證權杖）的值。
返回 Configuration（設定）頁面，點擊 Manage（管理）以啟動應用程式主控板 Webhook Fields（Webhook 欄位）對話方塊。
管理 Webhook Fields（Webhook 欄位）對話方塊
在欄位表格中，針對您想要訂閱的所有 Webhook 事件（建議您全部訂閱），點擊表格最右欄中的 Subscribe（訂閱）。

接著在 messages（訊息）列中，點擊 Test（測試），以傳送通知至您的端點。

若要確認是否已觸發 Webhook 通知，請返回 Glitch 並選擇 LOGS（記錄），輸出內容應如下圖所示。

完整的 Webhook 通知承載應如下所示：

{
  "object": "whatsapp_business_account",
  "entry": [
    {
      "id": "0",
      "changes": [
        {
          "field": "messages",
          "value": {
            "messaging_product": "whatsapp",
            "metadata": {
              "display_phone_number": "16505551111",
              "phone_number_id": "123456123"
            },
            "contacts": [
              {
                "profile": {
                  "name": "test user name"
                },
                "wa_id": "16315551181"
              }
            ],
            "messages": [
              {
                "from": "16315551181",
                "id": "ABGGFlA5Fpa",
                "timestamp": "1504902988",
                "type": "text",
                "text": {
                  "body": "this is a text message"
                }
              }
            ]
          }
        }
      ]
    }
  ]
}

WhatsApp Business 平台內部部署 API

在 Glitch 上前往我們的入門 Webhook 專案：在 Glitch 上混搭
在左側導覽窗格中點擊 server.js，以進行 Webhook 端點實作。
點擊右上角的 Share（分享），以取得上線網站的網址。這就是您的回呼網址。看起來像 https://<project-name.glitch.me/webhook。
在左側瀏覽窗格中，點擊 Status（狀態）按鈕。您會看到應用程式正在接聽特定連接埠。

傳送訊息或傳送測試訊息給自己以查看通知。以下的記錄範例顯示收到的文字訊息，內含正文「Hi」，以及送出的訊息，內含最新的傳送、投遞及讀取狀態。

Incoming webhook: {"messages":[{"from":"1234567890","id":"ABGGhSkIc2B_Ago-sDy5BNm-1gI5","text":{"body":"Hi"},"timestamp":"1529381066","type":"text"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"sent","timestamp":"1529381072"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"delivered","timestamp":"1529381072"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"read","timestamp":"1529381076"}]}

WhatsApp Business 平台 | 雲端 API | 內部部署 API | Business Management API