WhatsApp Business Platform > Cloud API > Leitfäden

Beispiel-Rückruf-URL für das Testen von Webhooks

Du kannst unsere Beispiel-Rückruf-App mit Glitch klonen, um eine öffentliche Rückruf-URL auf den Glitch-Servern zu erstellen. Mit dieser kannst du Webhooks testen. Das Erstellen des Glitch-Projekts hat den Vorteil, dass Webhook-Payloads in eine Protokolldatei geschrieben werden, die du beim Auslösen von Webhooks in Echtzeit ansehen kannst.

Vor dem Einrichten eines Endpunkts zum Testen von Webhooks für Cloud API

Dieser Leitfaden gehört zu einem aus mehreren Schritten bestehenden Prozess. Du musst eine Reihe dieser Schritte ausgeführt haben, bevor du mit dem Konfigurieren deines Beispiel-App-Endpunkts mit Glitch beginnen kannst. Du muss folgende Aufgaben ausgeführt haben:

Ausführliche Anleitungen für die ersten Schritte mit WhatsApp Business Cloud API, damit du deine erste Testnachricht senden kannst, findest du unter Erste Schritte mit der WhatsApp Business Cloud API.

Glitch einrichten und konfigurieren

Öffne glitch.com und erstelle ein Konto. Auf diese Weise kannst du alle Funktionen nutzen, die wir in diesem Leitfaden erläutern. Außerdem wird sichergestellt, dass die Benutzeroberfläche, die wir besprechen, mit der übereinstimmt, die du siehst. Wenn du kein Konto erstellst, fehlen die meisten Funktionen auf der Benutzeroberfläche und sie sieht anders aus.
Nachdem du dein Glitch-Konto eingerichtet hast, öffne unsere Glitch-Starterprojektvorlage mit dem folgenden Link: WhatsApp Platform Webhook-Projektvorlage.
Klicke oben rechts auf der Glitch-Webseite auf den Button Remix to Edit (Zu bearbeitender Remix), um unsere Beispiel-App zu klonen.
Auf „Remix to Edit“ klicken, um dein eigenes Glitch-Projekt zu erstellen
Hierdurch wird eine Kopie des Projekts für dein Konto erstellt.
Aktualisiere in der .env-Datei den Wert von WEBHOOK_VERIFY_TOKEN in einen zufälligen String deiner Wahl. Dann kannst du optional den Wert deines vorübergehenden/dauerhaften Zugriffsschlüssels aus WhatsApp > API-Setup in dein App-Dashboard kopieren und diesen Wert für GRAPH_API_TOKEN einfügen.
Glitch-Umgebungsvariablen für dein Projekt aktualisieren
Klicke auf Share (Teilen) oben rechts, um die URL der Live-Seite abzurufen. Füge an das Ende der URL /webhook an, um deine vollständige Rückruf-URL zu erhalten. Diese sieht ungefähr so aus: https://<project-name>.glitch.me/webhook.

Dein Endpunkt ist nun fertig. Du musst zu deinem App-Dashboard zurückkehren.

App-Dashboard mit Glitch-Endpunkt und Verifizierungstoken konfigurieren

Suche in deinem App-Dashboard nach dem WhatsApp-Produkt und klicke auf Konfiguration.
Navigiere anschließend zum Abschnitt „Webhooks“ und klicke auf Bearbeiten. Nach dem Klicken wird ein Dialogfeld angezeigt, in dem du nach der Rückruf-URL und dem Verifizierungstoken gefragt wirst. Hierfür musst du die Werte verwenden, die du zum Konfigurieren deines Glitch-Projekts im Abschnitt Glitch einrichten und konfigurieren verwendet hast. Beispiel: (https://<project-name>.glitch.me/webhook) als Rückruf-URL und („HAPPY“) als Verifizierungstoken.
Wenn du wieder auf der Konfigurationsseite bist, klicke auf Verwalten, um das Dialogfeld „Webhook-Felder" des App-Dashboards zu starten.
Dialogfeld „Webhook-Felder“ verwalten
Klicke im Feld „Tabelle“ für alle Webhook-Ereignisse, die du abonnieren möchtest, auf Abonnieren in der Spalte ganz rechts in der Tabelle. (Es wird empfohlen, alle Webhook-Ereignisse zu abonnieren.)

Klicke dann in der Zeile Nachrichten auf Testen, um eine Benachrichtigung an deinen Endpunkt zu senden.

Um zu überprüfen, ob eine Webhook-Benachrichtigung ausgelöst wurde, kehre zu Glitch zurück und wähle PROTOKOLLE aus. Die Ausgabe sollte aussehen wie im folgenden Bild.

Die vollständige Payload der Webhook-Benachrichtigung sollte wie folgt aussehen:

{
  "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 Platform On-Premises API

Gehe zu deinem Webhook-Starterprojekt auf Glitch: Auf Glitch remixen
Klicke im linken Navigationsbereich auf server.js, um die Implementierung des Webhook-Endpunkts vorzunehmen.
Klicke auf Share (Teilen) oben rechts, um die URL der Live-Seite abzurufen. Dies ist seine Rückruf-URL. Diese sieht ungefähr so aus: https://<project-name.glitch.me/webhook.
Klicke im linken Navigationsbereich auf den Button Status. Du wirst sehen, dass deine App auf Anfragen von einem bestimmten Port wartet.

Sende eine Nachricht (bzw. eine Testnachricht an dich selbst), um die Benachrichtigung anzuzeigen. Das folgende Protokollbeispiel zeigt eine empfangene Textnachricht mit dem Textkörper „Hi“ und eine gesendete Nachricht mit dem aktualisierten Status „Gesendet“, dann „Zugestellt“ und anschließend „Gelesen“.

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

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