WebhooksテストのコールバックURLのサンプル

Glitchを使ってサンプルコールバックアプリのクローンを作成すれば、Glitchのサーバー上に公開コールバックURLを作成して、それをWebhooksのテストに使うことができます。Glitchプロジェクトを作成する目的は、Webhooksがトリガーされるのに応じて、リアルタイムで閲覧できるログファイルにWebhookペイロードを書き込むことです。

クラウドAPI用Webhookテストエンドポイントを設定する前に

このガイドは、複数のステップから成る処理の一部です。Glitchを使ってサンプルアプリエンドポイントを設定するには、その前に、所定のステップを完了する必要があります。以下のことがすでに完了していなければなりません。

WhatsApp BusinessクラウドAPIを利用してテストメッセージを初めて送信する手順を示すスタートガイド情報については、WhatsApp BusinessクラウドAPIのスタートガイドをご覧ください。

Glitchの設定と構成

glitch.comにアクセスしてアカウントを作成してください。そうすると、このガイドで扱われているすべての機能を使うことができるようになり、ここで説明しているUIと実際に表示されるUIが同じものになります。アカウントを作成しないと、ほとんどのUI機能が失われ、表示が違うものになります。
Glitchアカウントを設定した後、用意されているスターターGlitchプロジェクトテンプレートを開きます。次のリンク、WhatsAppプラットフォームWebhookプロジェクトテンプレートを使ってください。
Glitchウェブページの右上隅にある[編集するリミックス]ボタンをクリックして、サンプルアプリのクローンを作成します。
[編集するリミックス]をクリックしてGlitchプロジェクトを作成する
自分のアカウント用にプロジェクトのコピーが作成されます。
.envファイルで、WEBHOOK_VERIFY_TOKENの値をランダムな任意の文字列に変更します。次に任意で、アプリダッシュボードの[WhatsApp] > [API設定]から一時/永続アクセストークンの値をコピーし、GRAPH_API_TOKENの値に貼り付けます。
プロジェクト用にGlitch環境変数を変更する
右上にある[シェア]をクリックして、ライブサイトのURLを取得します。URLの末尾に/webhookを追加して、完全なコールバックURLを取得します。 https://<project-name>.glitch.me/webhookのようになります。

エンドポイントの準備が整ったら、アプリダッシュボードに戻る必要があります。

Glitchエンドポイントと認証トークンによりアプリダッシュボードを設定する

アプリダッシュボードでWhatsApp製品を見つけ、[設定]をクリックします。
次に、Webhooksのセクションを見つけて、[編集]をクリックします。クリックすると、画面にダイアログが表示され、コールバックURLと認証トークンを指定するよう求められます。[Glitchの設定と構成]セクションで、Glitchプロジェクトの設定に使った値を使う必要があります。例えば、コールバックURLには(https://<project-name>.glitch.me/webhook)、そして認証トークンには("HAPPY")を指定します。
設定ページに戻り、[管理]をクリックします。[アプリダッシュボードWebhookフィールド]ダイアログが表示されます。
Webhookフィールドダイアログを管理する
フィールドテーブルで、サブスクリプション登録するすべてのWebhookイベントに対して、テーブルの右端の列にある[サブスクリプション登録する]をクリックします(すべてサブスクリプション登録することをおすすめします)。

それからメッセージ行で、[テスト]をクリックしてエンドポイントに通知を送信します。

Webhook通知がトリガーされたことを確認するには、Glitchに戻って[LOGS]を選択します。出力は次の画像のようになっているはずです。

Webhook通知の完全なペイロードは、次のようになります。

{
  "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プラットフォームのオンプレミスAPI

GlitchのスターターWebhookプロジェクトを開きます。 Remix on Glitch
左のナビゲーションでserver.jsをクリックして、Webhookエンドポイントの実装を表示します。
右上にある[シェア]をクリックして、ライブサイトのURLを取得します。これが対象のコールバックURLになります。 https://<project-name.glitch.me/webhookのようになります。
左ナビゲーションペインの[ステータス]ボタンをクリックします。アプリが特定のポートをリッスンしていることを確認できます。

メッセージを送信するか、自分にテストメッセージを送信して、通知を確認します。次のログのサンプルは、本文が"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"}]}

WhatsApp Businessプラットフォーム | クラウドAPI | オンプレミスAPI | ビジネス管理API