Plataforma de WhatsApp Business

Plataforma de WhatsApp Business > API de nube > Guías

Ejemplo de URL de devolución de llamada para las pruebas con los webhooks

Puedes clonar nuestra aplicación de devolución de llamada de ejemplo con Glitch para crear una URL de devolución de llamada pública en los servidores de Glitch que puedes usar para probar los webhooks. El propósito de crear el proyecto de Glitch es que escribe cargas útiles de webhooks en un archivo de registro que puedes ver en tiempo real a medida que se activan los webhooks.

Antes de configurar un extremo para las pruebas de webhooks para la API de nube

Esta guía forma parte de un proceso de varios pasos y debes haber completado una serie de estos pasos antes de empezar a configurar el extremo de aplicación de prueba con Glitch. Debes haber completado los siguientes pasos:

  1. Configurar los recursos para desarrolladores y el acceso a la plataforma
  2. Enviar un mensaje de prueba
  3. Configurar un webhook

Las instrucciones completas para empezar con la API de nube de WhatsApp Business a fin de poder enviar tu primer mensaje de prueba están disponibles en Introducción a la API de nube de WhatsApp Business.

Configurar Glitch

  1. Dirígete a glitch.com y crea una cuenta. Así podrás usar todas las funciones que tratamos en esta guía y te asegurarás de que la IU que expliquemos y la IU que veas sean coherentes. Si no creas una cuenta, te faltarán la mayoría de las funciones de la IU, que tendrá un aspecto diferente.
  2. Cuando hayas configurado la cuenta de Glitch, abre nuestra plantilla básica del proyecto de Glitch en el siguiente enlace: Plantilla de proyecto de webhook de la Plataforma de WhatsApp.
  3. Haz clic en el botón Remix to edit (Mezclar para editar) que está situado en la esquina superior derecha de la página web de Glitch para clonar nuestra aplicación de prueba.
    Haz clic en “Remix to edit” (Mezclar para editar) para crear tu propio proyecto de Glitch.
    Se creará una copia del proyecto para tu cuenta.
  4. En el archivo .env, actualiza el valor de WEBHOOK_VERIFY_TOKEN a una cadena aleatoria que elijas. A continuación, puedes copiar el valor del identificador de acceso temporal o permanente de WhatsApp > Configuración de la API en tu panel de aplicaciones y pegar dicho valor en GRAPH_API_TOKEN.
    Actualizar las variables de entorno de Glitch para tu proyecto
  5. Haz clic en Share (Compartir) en la parte superior derecha para obtener la URL del sitio en directo. Añade /webhook al final de la URL para obtener la URL de devolución de llamada completa. Tendrá un aspecto similar a https://<project-name>.glitch.me/webhook.

Ahora que el extremo está listo, debes volver al panel de aplicaciones.

Configurar el panel de aplicaciones con el extremo de Glitch y el identificador de verificación

  1. En el panel de aplicaciones, busca el producto de WhatsApp y haz clic en Configuración.
  2. A continuación, busca la sección de webhooks y haz clic en Editar. Una vez hayas hecho clic, se abrirá un cuadro de diálogo en la pantalla en el que se te pedirá la URL de devolución de llamada y el identificador de verificación. Debes usar los valores que utilizaste para configurar tu proyecto de Glitch en la sección Configurar Glitch. Por ejemplo, (https://<project-name>.glitch.me/webhook) para la URL de devolución de llamada y (“HAPPY”) para el identificador de verificación.
  3. Cuando hayas vuelto a la página de configuración, haz clic en Administrar para iniciar el cuadro de diálogo de los campos de webhooks del panel de aplicaciones.
    Administrar el cuadro de diálogo de los campos de webhooks
  4. En la tabla de campos, haz clic en Suscribirse a todos los eventos de webhooks a los que quieras suscribirte (te recomendamos que te suscribas a todos) en la columna en el extremo derecho de la tabla.
  5. A continuación, en la fila mensajes, haz clic en Probar para enviar una notificación al extremo.

    Para confirmar que se ha activado una notificación de webhooks, vuelve a Glitch y selecciona LOGS. El resultado de salida debería parecerse a la siguiente imagen.

    La carga útil completa de la notificación del webhook debería ser parecida a la siguiente: 
    {
  "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 local de la Plataforma de WhatsApp Business

  1. Ve a nuestro proyecto inicial de webhook en Glitch: Retocar en Glitch
  2. Haz clic en server.js en el panel de navegación de la izquierda para ver la implementación del extremo del webhook.
  3. Haz clic en Compartir en la parte superior derecha para obtener la URL del sitio en directo. Esta será la URL de devolución de llamada. Tendrá un aspecto similar a https://<project-name.glitch.me/webhook.
  4. Haz clic en el botón Estado en el panel de navegación izquierdo. Verás que tu aplicación escucha en un puerto específico.
  5. Envía un mensaje o envíate un mensaje de prueba para ver la notificación. En el siguiente ejemplo del registro se muestra un mensaje de texto recibido con el cuerpo “Hi” y un mensaje enviado con el estado actualizado de enviado, luego entregado y luego leído. 
    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"}]}