Тестовый URL обратного вызова для тестирования Webhooks

Вы можете клонировать наше тестовое приложение с обратным вызовом на Glitch, чтобы создать общедоступный URL обратного вызова на серверах Glitch для тестирования Webhooks. Цель создания проекта Glitch — запись полезной нагрузки Webhooks в файл журнала, который можно просматривать в режиме реального времени по мере срабатывания Webhooks.

Перед настройкой конечной точки для тестирования Webhooks для облачного API

Это руководство — часть многошагового процесса, который необходимо пройти, прежде чем приступать к настройке конечной точки вашего тестового приложения на Glitch. Необходимые действия:

1. Настройте ресурсы разработчика и доступ к платформе
2. Отправьте тестовое сообщение
3. Настройте Webhooks

Полные инструкции по началу работы с облачным API WhatsApp Business и отправке первого тестового сообщения см. в этом руководстве.

Настройка и конфигурация Glitch

1. Перейдите на сайт glitch.com и создайте аккаунт. Так вы сможете использовать все функции, о которых говорится ниже, и работать в том же интерфейсе. Если вы не создадите аккаунт, большинство функций интерфейса будут отсутствовать или выглядеть иначе.
2. Настроив аккаунт Glitch, откройте начальный шаблон проекта Glitch из этого документа.
3. Нажмите кнопку Remix to Edit (Забрать для редактирования) в правом верхнем углу страницы Glitch, чтобы клонировать наше тестовое приложение.
   

   Remix to Edit для создания проекта Glitch
   Для вашего аккаунта будет создана копия проекта.
4. В файле .env замените значение WEBHOOK_VERIFY_TOKEN любой произвольной строкой. Затем в качестве дополнительного варианта вы можете скопировать значение своего маркера доступа (временного или постоянного) из раздела WhatsApp > Настройка API в панели приложения и вставить это значение в поле GRAPH_API_TOKEN.
   

   Обновление переменных среды Glitch для проекта
5. Нажмите Share (Поделиться) в правом верхнем углу, чтобы получить URL Live site (Рабочая версия сайта). Добавьте в конце URL /webhook, чтобы получить полный URL обратного вызова. Он должен выглядеть примерно так: https://<project-name>.glitch.me/webhook.

Ваша конечная точка готова. Теперь нужно вернуться в панель приложения.

Настройка панели приложения с помощью конечной точки Glitch и маркера подтверждения

1. В панели приложения найдите продукт WhatsApp и нажмите Конфигурация.
   
2. Затем найдите раздел Webhooks и нажмите Редактировать. Откроется диалоговое окно с запросом URL обратного вызова и маркера подтверждения. Используйте значения из проекта Glitch в разделе Настройка и конфигурация Glitch. Например, (https://<project-name>.glitch.me/webhook) для URL обратного вызова и ("HAPPY") для маркера подтверждения.
   
3. Вернитесь на страницу конфигурации и нажмите Управление, чтобы открыть диалоговое окно с полями Webhooks в панели приложения.
   

   Диалог управления полями Webhooks
4. В таблице полей нажмите Подписаться для всех необходимых событий Webhooks (рекомендуем подписаться на все) в самом правом столбце таблицы.
5. Затем в строке messages нажмите Тест, чтобы отправить уведомление на вашу конечную точку.

   Чтобы подтвердить инициализацию уведомления Webhooks, вернитесь на Glitch и выберите LOGS (Журналы) — полученный результат должен иметь вид, подобный показанному на изображении ниже.

   
   Полная полезная нагрузка уведомления Webhooks должна выглядеть следующим образом:

   {
     "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 платформы WhatsApp Business

1. Перейдите к начальному проекту Webhooks на Glitch: Создать на Glitch
2. Чтобы увидеть реализацию конечной точки Webhooks, в области навигации слева нажмите server.js.
3. Нажмите Share (Поделиться) в правом верхнем углу, чтобы получить URL Live site (Рабочая версия сайта). Это будет URL обратного вызова. Он должен выглядеть примерно так: https://<project-name.glitch.me/webhook.
4. В области навигации слева нажмите кнопку Status (Статус). Вы увидите, что приложение прослушивает определенный порт.
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"}]}