Nền tảng WhatsApp Business > API Đám mây > Hướng dẫn

URL gọi lại mẫu để thử nghiệm Webhooks

Bạn có thể sao chép ứng dụng gọi lại mẫu bằng Glitch để tạo URL gọi lại công khai trên máy chủ của Glitch. Bạn có thể dùng URL này để thử nghiệm Webhooks. Mục đích của việc tạo dự án Glitch là dự án này ghi phần tải dữ liệu webhook vào một file nhật ký để bạn có thể xem tức thì khi webhook được kích hoạt.

Trước khi bạn thiết lập điểm cuối để thử nghiệm webhook cho API Đám mây

Hướng dẫn này là một phần trong quy trình nhiều bước. Bạn phải hoàn tất một số bước này trước khi bắt đầu đặt cấu hình điểm cuối ứng dụng mẫu thông qua Glitch. Bạn phải hoàn tất các bước sau:

Hãy tham khảo phần Bắt đầu sử dụng API Đám mây của WhatsApp Business để xem hướng dẫn đầy đủ về cách bắt đầu sử dụng API Đám mây của WhatsApp Business, qua đó có thể gửi tin nhắn thử nghiệm đầu tiên.

Thiết lập và đặt cấu hình Glitch

Truy cập glitch.com và tạo một tài khoản. Với tài khoản này, bạn có thể sử dụng mọi tính năng nêu trong hướng dẫn này, đồng thời đảm bảo sự nhất quán giữa giao diện người dùng đã nêu và giao diện người dùng bạn nhìn thấy. Nếu bạn không tạo tài khoản, hầu hết tính năng của giao diện người dùng sẽ bị thiếu và hiển thị khác với hướng dẫn.
Sau khi thiết lập tài khoản Glitch, hãy mở mẫu dự án Glitch dành cho người mới bắt đầu của chúng tôi bằng liên kết sau: Mẫu dự án webhook cho Nền tảng WhatsApp.
Nhấp vào nút Remix để chỉnh sửa ở góc trên cùng bên phải của trang web Glitch để sao chép ứng dụng mẫu của chúng tôi.
Nhấp vào nút Remix để chỉnh sửa để tạo dự án Gitch của riêng bạn
Hệ thống sẽ tạo một bản sao dự án cho tài khoản của bạn.
Trong file .env, hãy cập nhật giá trị của WEBHOOK_VERIFY_TOKEN thành một chuỗi ngẫu nhiên mà bạn chọn. Sau đó, bạn có thể tùy ý sao chép giá trị của mã truy cập tạm thời/vĩnh viễn từ WhatsApp > Thiết lập API trong Bảng điều khiển ứng dụng rồi dán giá trị đó cho WHATSAPP_TOKEN.
Cập nhật các biến môi trường Glitch cho dự án của bạn
Nhấp vào Chia sẻ ở trên cùng bên phải để lấy URL trang web Đang hoạt động. Thêm /webhook vào cuối URL đó để có URL gọi lại hoàn chỉnh. URL này sẽ có dạng: https://<project-name>.glitch.me/webhook.

Bây giờ, điểm cuối của bạn đã sẵn sàng, hãy quay lại Bảng điều khiển ứng dụng.

Đặt cấu hình Bảng điều khiển ứng dụng với điểm cuối Glitch và mã xác minh

Trong Bảng điều khiển ứng dụng, tìm sản phẩm WhatsApp rồi nhấp vào Cấu hình.
Sau đó, tìm phần webhook rồi nhấp vào Chỉnh sửa. Sau khi bạn nhấp vào, một hộp thoại sẽ xuất hiện trên màn hình và yêu cầu nhập URL gọi lại cũng như Mã xác minh. Bạn cần sử dụng các giá trị đã dùng để đặt cấu hình dự án Glitch trong phần Thiết lập và đặt cấu hình Glitch. Ví dụ: (https://<project-name>.glitch.me/webhook) cho URL gọi lại và ("HAPPY") cho Mã xác minh.
Quay lại trang Cấu hình, nhấp vào Quản lý để khởi chạy hộp thoại Trường webhook trong Bảng điều khiển ứng dụng.
Hộp thoại quản lý trường webhook
Trong bảng trường, hãy nhấp vào Đăng ký đối với tất cả sự kiện Webhooks bạn muốn đăng ký (bạn nên đăng ký tất cả những sự kiện đó) ở cột ngoài cùng bên phải bảng.

Sau đó, trong hàng messages, hãy nhấp vào Thử nghiệm để gửi thông báo đến điểm cuối của bạn.

Để xác nhận rằng thông báo Webhook đã được kích hoạt, hãy quay lại Glitch và chọn LOGS. Kết quả sẽ có dạng như hình dưới đây.

Phần tải dữ liệu hoàn chỉnh cho thông báo Webhook sẽ có dạng như sau:

{
  "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"
                }
              }
            ]
          }
        }
      ]
    }
  ]
}

API Tại chỗ của Nền tảng WhatsApp Business

Chuyển đến dự án webhook dành cho người mới bắt đầu trên Glitch: Remix trên Glitch
Nhấp vào server.js ở ngăn điều hướng bên trái để triển khai điểm cuối Webhook.
Nhấp vào Chia sẻ ở trên cùng bên phải để lấy URL trang web đang hoạt động. Đây sẽ là URL gọi lại. URL này sẽ có dạng: https://<project-name.glitch.me/webhook.
Nhấp vào nút Trạng thái ở ngăn điều hướng bên trái. Bạn sẽ thấy rằng ứng dụng của mình đang kết nối trên một cổng cụ thể.

Gửi tin nhắn hoặc gửi tin nhắn thử nghiệm cho chính bạn để xem thông báo. Dưới đây là ví dụ về nhật ký cho thấy một tin nhắn văn bản đã nhận có nội dung là "Hi" và một tin nhắn đã gửi có trạng thái cập nhật là đã gửi, sau đó là đã phân phối rồi đã đọc.

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"}]}

Nền tảng WhatsApp Business | API Đám mây | API Tại chỗ | API Quản lý kinh doanh