WhatsApp Business 平台

WhatsApp Business 平台 > 雲端 API > 指南

Webhooks 測試回呼網址範例

您可以使用 Glitch 複製我們的回呼應用程式範例，以在 Glitch 的伺服器上建立一個可用於測試 Webhooks 的公共回呼網址。建立 Glitch 專案是為了將 Webhook 裝載寫入記錄檔案，以便您在 Webhooks 觸發時即時查看。

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

本指南是多步驟流程的其中一個部分，您必須先完成其中一些步驟，然後才能開始使用 Glitch 配置應用程式端點範例。您必須完成以下操作：

  1. 設定開發人員資產和平台存取權限
  2. 傳送測試訊息
  3. 配置 Webhook

請參閱 WhatsApp Business 雲端 API 新手指南，了解 WhatsApp Business 雲端 API 入門的完整指示，以協助您成功傳送第一則測試訊息。

設定和配置 Glitch

  1. 前往 glitch.com 並建立帳戶，以便使用我們在本指南中討論的所有功能，並確保我們所討論的用戶介面和您看到的用戶介面一致。如果您不建立帳戶，便用不到大部分用戶介面功能，其外觀也會有所不同。
  2. 建立 Glitch 帳戶後，使用以下連結開啟我們的新手 Glitch 專案範本：WhatsApp 平台 Webhook 專案範本。
  3. 點擊 Glitch 網頁右上方的 Remix to Edit 按鈕，複製我們的應用程式範例。
    點擊「Remix to Edit」以建立您自己的 Gitch 專案
    系統會為您的帳戶建立專案副本。
  4. 在 .env 檔案中，將 WEBHOOK_VERIFY_TOKEN 的值更新為您自選的隨機字串。然後，您可以選擇前往應用程式管理中心的 WhatsApp > API 設定，在當中複製臨時或永久存取憑證的值，然後在 GRAPH_API_TOKEN 貼上該值。
    為您的專案更新 Glitch 環境變數
  5. 點擊右上方的分享，獲取已上線網站的網址。在網址結尾加上 /webhook，獲取您的完整回呼網址，這應該類似於： https://<project-name>.glitch.me/webhook。

現在，您的端點已準備就緒，您需要返回應用程式管理中心。

使用 Glitch 端點和驗證憑證配置應用程式管理中心

  1. 在應用程式管理中心找出 WhatsApp 產品，然後點擊配置。
  2. 然後，找出 Webhooks 部分並點擊編輯。點擊之後，螢幕上會顯示一個對話框，要求您提供回呼網址和驗證憑證。您需要使用在設定和配置 Glitch 部分中用來配置 Glitch 專案的值。例如用來配置回呼網址的值（https://<project-name>.glitch.me/webhook）和配置驗證憑證的值（「HAPPY」）。
  3. 返回配置頁面，點擊管理以啟動應用程式管理中心 Webhook 欄位對話框。
    管理 Webhook 欄位對話框
  4. 在欄位表中，點擊表格最右側一欄的訂閱，即可訂閱您想訂閱的所有 Webhook 事件；我們建議全部訂閱。
  5. 然後，在訊息列中，點擊測試以向您的端點傳送通知。

    如要確認 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

  1. 前往我們在 Glitch 上的新手 Webhook 專案： 在 Glitch 上整合運用
  2. 點擊左側導覽面板的 server.js，以查看 Webhooks 端點的執行情況。
  3. 點擊右上方的分享，獲取已上線網站的網址。這將是您的回呼網址。該回呼網址類似於： https://<project-name.glitch.me/webhook。
  4. 在左側導覽面板中點擊狀態按鈕。您將看到您的應用程式正在監聽特定端口。
  5. 傳送訊息或向自己傳送測試訊息，以查看通知。以下記錄範例顯示一則正文內容為「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"}]}