コンテンツにスキップ

Messenger Channel

実際の利用者が Facebook Page にメッセージを送り、Agent に Messenger 上で直接受信・返信させたい場合は Messenger channel を使います。

Codeer で Messenger を live にするうえで本当に重要なのは Webhook URL です。Messenger channel の Publish は主に Messenger webhook event の処理を開始するかどうかを切り替える役割で、実際の返答は紐づけた Agent の最新の公開済みバージョンが返します。

始める前に必要なもの

  • 少なくとも一度 publish 済みの Agent
  • workspace の channel 編集権限
  • 管理できる Facebook Page
  • Meta app
  • その Meta app で使える Messenger または Messaging 設定
  • Page メッセージを送信できる access token
  • 外部公開された HTTPS の Codeer 環境

公開 HTTPS が必要な理由

Meta は外部から到達できる HTTPS webhook だけを受け付けます。Codeer の Webhook URL が公開 HTTPS で到達できない場合、Meta の webhook verify で失敗します。

Meta 側で準備するもの

  1. Meta app

  2. Messenger メッセージを受信・送信する Facebook Page

  3. Messenger または Messaging 関連設定

  4. callback URL が Codeer の Webhook URL を指す webhook 設定

  5. その Page の messaging event subscription

  6. その Page としてメッセージを送信できる access token

Page、token、webhook subscription を同じ Page にそろえる

Codeer は、受信した webhook event がこの channel のものかを Facebook Page ID で確認します。Page ID、Page access token、webhook subscription が同じ Page に属していない場合、メッセージが無視されたり、Codeer が返信できなかったりします。

完全セットアップ手順

  1. 先に Codeer で Messenger channel を作成し、Webhook URL をコピーする

    • 先に Codeer の Editor で対象 Agent を publish します。
    • Channels を開きます。
    • New Channel を押します。
    • Messenger を選びます。
    • 安定した Name と Slug を設定します。
    • Messenger channel の Configuration で Webhook URL をコピーします。
    • この時点では Codeer の Messenger channel をまだ publish しません。先に Meta 側で必要な値を集めて Codeer に保存し、その後 Meta に戻って webhook を設定・verify してください。

  2. Meta app に Messenger または Messaging 設定を追加する

    • Meta for Developers を開きます。
    • Messenger に使う Meta app を開きます。
    • Messenger または Messaging の product / use case を追加します。
    • ユーザーがメッセージを送る Facebook Page を連携します。
    • その app が Page のメッセージを管理できる権限を持っていることを確認します。

    Meta dashboard の表示名は変わることがあります

    Meta は App Dashboard の navigation や use case 名を随時変更します。重要なのは、app が正しい Page に接続されていること、webhook verify が通ること、token がその Page として Messenger メッセージを送信できることです。

  3. Facebook Page ID を取得する

    • Facebook Page settings、Meta Business Suite、Meta App Dashboard、または Graph API tooling で Page ID を探します。
    • その ID をコピーします。あとで Codeer の Facebook Page ID に貼り付けます。

  4. Webhook Verify Token を作成する

    • この channel 専用の Webhook Verify Token として、推測されにくい文字列を作ります。
    • 控えておいてください。Meta の webhook 設定と Codeer フォームに同じ値を入力します。

    Verify Token は Page access token ではありません

    Webhook Verify Token は、Meta の webhook verify 用に自分で決める共有文字列です。Page access token は、Codeer が Facebook Page としてメッセージを送信するための token です。混同しないでください。

  5. Meta App Secret をコピーする

    • Meta App Dashboard で App Settings > Basic を開きます。
    • App Secret を探してコピーします。
    • あとで Codeer の Meta App Secret に貼り付けます。

    Meta App Dashboard の Basic settings 画面。App Secret の位置を示す

    Codeer は App Secret で webhook signature を検証します

    Messenger webhook が Codeer に届くと、Codeer は Meta App Secret を使って X-Hub-Signature-256 を検証します。App Secret が違う場合、event は無視されます。

  6. Page access token を作成または取得する

    • Meta App Dashboard、Graph API Explorer、または既存の Meta token flow で、Facebook Page としてメッセージを送信できる access token を取得します。
    • token が、Codeer に Facebook Page ID として入力する Page と同じ Page に属していることを確認します。
    • あとで Codeer の Access Token に貼り付けます。

    Messenger API 設定画面。Page access token の生成エリアを表示

    本番公開前に token と権限状態を確認する

    app が development mode のまま、または test token しかない場合、app roles を持つ人だけがテストできることがあります。一般ユーザーに提供する前に、Meta app、権限、token が本番 rollout 方針に合っていることを確認してください。

  7. Codeer で Messenger 設定を保存する

    • Codeer の Messenger channel に戻ります。
    • Configuration に次を入力します。
      • Facebook Page ID
      • Webhook Verify Token
      • Meta App Secret
      • Access Token
    • Messenger メッセージに応答する publish 済み Agent を選びます。
    • 設定を保存します。

    Meta で webhook を verify する前に Verify Token を保存してください

    Meta が webhook を verify するとき、Meta は Codeer の Webhook URL を呼び出し、Meta 側で入力した verify token を渡します。Codeer は channel に保存済みの Webhook Verify Token と照合するため、この手順は Meta の verify / save より前に必要です。

    選択できるのは publish 済み Agent だけです

    Agent が一覧に出ない場合は、Editor に戻って publish してから、再度 Messenger channel ページに戻ってください。

  8. Meta で webhook を設定する

    • Meta app の Messenger / Webhooks 設定で callback を追加します。
    • Callback URL に Codeer の Webhook URL を貼り付けます。
    • 先ほど作成した Webhook Verify Token を入力します。
    • Meta 側で verify / save を実行します。
    • verify が成功したら、メッセージを受け取る Facebook Page を subscribe します。
    • Codeer がユーザーからのメッセージを受信できるように、少なくとも Messenger messaging event を subscribe します。

    Messenger API 設定画面。webhook callback URL と verify token 欄を表示

  9. Codeer の Messenger channel を publish する

    • webhook、Page ID、認証情報、Agent binding がそろったら channel を publish します。
    • 新しい Messenger event の処理を止めたい場合は Unpublish を使います。

最初の live テスト

より多くの人に共有する前に、実際の Facebook account で一通り確認します。

  1. Facebook Page の Messenger conversation を開きます。

  2. 実際に近い text message を送ります。

  3. Messenger で Agent の返信を受け取れることを確認します。

  4. Codeer の Histories に戻り、会話が記録されていることを確認します。

  5. 返信が、紐づけた Agent の最新 publish 済み version から来ていることを確認します。

Troubleshooting

Messenger は接続できているのに返答が想定と違う場合は、次の順で確認してください。

  1. 正しい Agent version が publish 済みか。

  2. Messenger channel が publish 済みか。

  3. Meta webhook verify が成功しているか。

  4. webhook が正しい Facebook Page を subscribe しているか。

  5. Facebook Page ID が webhook event と Page access token と同じ Page に属しているか。

  6. Webhook Verify Token が Meta webhook 設定の値と完全に一致しているか。

  7. Meta App Secret が同じ Meta app のものか。

  8. Access Token がまだ有効で、その Page としてメッセージを送信できるか。

関連ガイド