Plateforme WhatsApp Business > API Cloud > Guides

Exemple d’URL de rappel pour les tests de webhooks

Vous pouvez cloner notre exemple d’application de rappel à l’aide de Glitch afin de créer une URL de rappel publique sur les serveurs Glitch que vous utilisez pour tester les webhooks. Le projet Glitch est créé pour écrire les charges utiles des webhooks dans un fichier journal consultable en temps réel lors du déclenchement des webhooks.

Avant de configurer un point de terminaison pour les tests de webhooks pour l’API Cloud

Ce guide est intégré à un processus en plusieurs étapes et vous devez en avoir terminé un certain nombre avant de commencer à configurer votre exemple de point de terminaison d’application à l’aide de Glitch. Vous devez avoir effectué les actions suivantes :

Pour obtenir des instructions complètes afin de commencer à utiliser l’API WhatsApp Business Cloud et envoyer votre premier message de test, consultez la page Premiers pas avec l’API WhatsApp Business Cloud.

Configurer Glitch

Accédez à la page glitch.com et créez un compte. En créant un compte, vous pouvez utiliser toutes les fonctionnalités présentées dans ce guide et avoir la certitude que l’UI que nous présentons et celle que vous voyez sont cohérentes. Si vous ne créez pas de compte, la plupart des fonctionnalités de l’UI ne seront pas disponibles ou auront un aspect différent.
Après avoir configuré votre compte Glitch, ouvrez notre modèle de projet de départ Glitch à l’aide du lien suivant : WhatsApp Platform Webhook project template.
Cliquez sur le bouton Remix to Edit dans l’angle supérieur droit de la page web Glitch pour cloner notre exemple d’application.
Cliquez sur Remix to Edit pour créer votre propre projet Glitch.
Une copie du projet est créée pour votre compte.
Dans le fichier .env, remplacez la valeur du paramètre WEBHOOK_VERIFY_TOKEN par la chaîne aléatoire de votre choix. Ensuite, vous pouvez éventuellement copier la valeur de votre token d’accès temporaire/permanent depuis WhatsApp > Configuration de l’API dans votre Espace App et coller cette valeur pour GRAPH_API_TOKEN.
Mettre à jour les variables d’environnement Glitch pour votre projet
Cliquez sur Share en haut à droite pour obtenir l’URL du Live site. Ajoutez /webhook à la fin de l’URL pour obtenir l’URL de rappel complète. Vous obtiendrez quelque chose du type : https://<project-name>.glitch.me/webhook.

Maintenant que votre point de terminaison est prêt, vous devez revenir à l’Espace App.

Configurer le point de terminaison et le token de vérification Glitch dans l’Espace App

Dans l’Espace App, recherchez le produit WhatsApp et cliquez sur Configuration.
Ensuite, recherchez la section consacrée aux webhooks et cliquez sur Modifier. Une boîte de dialogue s’affiche à l’écran et vous invite à saisir l’URL de rappel et le token de vérification. Vous devez indiquer les valeurs que vous avez utilisées pour configurer votre projet Glitch à la section Configurer Glitch. Par exemple, (https://<project-name>.glitch.me/webhook) pour l’URL de rappel et (« HEUREUX ») pour le token de vérification.
De retour sur la page Configuration, cliquez sur Gérer pour lancer la boîte de dialogue Champs webhook de l’Espace App.
Boîte de dialogue Champs webhook
Dans le tableau des champs, dans la colonne tout à droite, cliquez pour vous abonner à tous les évènements Webhook qui vous intéressent (nous vous recommandons de vous abonner à tous les évènements).

Puis, sur la ligne messages, cliquez sur Test pour envoyer une notification à votre point de terminaison.

Pour confirmer qu’une notification webhook a bien été déclenchée, retournez dans Glitch et sélectionnez LOGS. La sortie devrait alors ressembler à l’image suivante.

La charge utile complète de la notification webhook devrait ressembler à ce qui suit :

{
  "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 On-Premises de la plateforme WhatsApp Business

Accédez à notre projet webhook de départ sur Glitch : Remixer sur Glitch
Cliquez sur server.js dans le volet de navigation de gauche pour voir l’implémentation du point de terminaison du Webhook.
Cliquez sur Share en haut à droite pour obtenir l’URL du live site. Il s’agira de votre URL de rappel. Vous obtiendrez quelque chose du type : https://<project-name.glitch.me/webhook.
Cliquez sur le bouton Status du volet de navigation de gauche. Vous constatez que votre application écoute un port spécifique.

Envoyez un message ou adressez-vous à vous-même un message de test pour voir la notification. L’exemple suivant illustre un texto reçu commençant par « Bonjour » et un message envoyé dont le statut mis à jour est respectivement envoyé, puis livré et lu.

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

Plateforme WhatsApp Business | API Cloud | API On-Premises | API Business Management