Standard WebhooksをShopify Flowに接続する方法

「Standard Webhook」は、Webhookの署名を行うためのオープンな仕様であり、OpenAIやSupabase Auth Hooksをはじめ、ますます多くのサービスで採用されています。 1つのプリセットでこれらすべてに対応できます。「Workflow Webhooks」を使用すると、その呼び出しが「Shopify Flow」のトリガーに変換されるため、ストア側でそれに応じて対応することが可能です。お客様へのタグ付け、注文メモの追加、社内メールの送信、メタフィールドの更新など、Shopify Flowで可能なあらゆる操作を実行できます。

このガイドでは、Standard Webhookによる送信、Workflow Webhooksによる受信と検証、Shopify Flowによる処理という一連の流れをすべて設定します。すべてのリクエストにおいてStandard WebhookのHMAC署名が検証されるため、Standard Webhook以外ではワークフローを開始することができません。

どのようなものを作れるか

  • OpenAIのWebhook(完了したバッチジョブや完了したレスポンス)を受け取り、Shopify Flowにその結果に基づいてストア内で処理を行わせます。
  • Supabase Auth Hook に応答することで、ご自身のアプリでの新規登録時に、一致する Shopify のお客様にタグ付けが行われるようになります。
  • standardwebhooks.com の仕様に準拠しているサービスであれば、カスタム署名を設定することなく受信できます。

送信対象となる代表的なイベント:送信サービスが定義するあらゆるイベントです。

このプリセットでは、OpenAI や Supabase Auth Hooks からの Webhook の検証も行います。

始める前に

  • Workflow Webhooks Shopifyストアにインストールされています。
  • Shopify Flow インストール済みです。これは、ShopifyのApp Storeから無料で入手できます。
  • Webhookを作成する権限を持つ、Standard Webhook のアカウントです。

ステップ 1 - Workflow Webhooks で Webhook を作成します

  1. Workflow Webhooks を開き**、[Webhook] → [Create Webhook]** の順に選択して、Shopify Flow で識別しやすい名前(例:Standard Webhooks events)を付けてください。
  2. **「認証」**で、「**HMAC」**を選択してください。
  3. 「署名プロバイダー」で、「**標準 Webhook」**を選択してください。アプリがヘッダー、アルゴリズム、署名付きペイロード、リプレイウィンドウを自動的に入力してくれます。他に設定すべき項目はありません。
  4. 「シークレット」の欄はひとまず空のままにして、「保存」をクリックしてください。ページに表示されているWebhookのURLをコピーしてください。

その他の認証モードについては、認証 を、Shopify Flow に送信するフィールドの選択については、ペイロードのマッピングとShopify Flow変数 をご参照ください。

ステップ 2 - 標準 Webhook にエンドポイントを追加する

送信サービスのエンドポイントとしてそのURLを追加し、表示される署名用シークレット(whsec_で始まるもの)をコピーしてください。

Standard Webhookの署名用シークレットを確認する方法

whsec_ で始まる署名用シークレットです。そのまま貼り付けてください。もし「v1,whsec_...」(Supabase)のように表示されている場合は、先頭の「v1,」を除いてください。

Standard WebhookのWebhook署名に関する公式ドキュメント()には、お客様のアカウントに関する正確な記述とスクリーンショットが掲載されています。

そのシークレットを、Workflow Webhooks の Webhook の**「Secret」**フィールドに貼り付けて、保存してください。それ以降、すべての Standard Webhook の配信は、Shopify Flow に到達する前に検証されるようになります。

これが何をチェックするのか

何 値
署名ヘッダー webhook-signature
署名の位置 プレフィックス「v1,」の後のヘッダー値
何が署名されたのでしょうか {header:webhook-id}.{timestamp}.{body}
署名 HMAC-SHA256、Base64エンコード
タイムスタンプ webhook-timestampヘッダー(Unix秒として)
リプレイ防止機能 署名付きタイムスタンプが現在時刻から5分以上経過しているリクエストは拒否されます
その秘密 ご使用前にBase64デコードを行ってください。デコードを行う前に、先頭の「whsec_」は削除されます。送信者が表示したとおりに、正確に貼り付けてください。

署名付きペイロードにおいて、{body} はバイト単位でリクエスト本文の生のデータであり、{timestamp} は前述のタイムスタンプ、{header:webhook-id} は webhook-id のリクエストヘッダーです。

これらのいずれかに失敗したリクエストは、401 として拒否され、沿革とトラブルシューティング に記録され、ワークフローは開始されません。

ステップ 3 - 「Shopify Flow」ワークフローを作成する

  1. Shopify Flow でワークフローを作成し、「Workflow Webhooks」トリガーを選択してください。
  2. 「イベントの記録」をクリックし、Standard Webhooks からテストイベントを送信してください(または、Workflow Webhooks で「テストを送信」を使用してください)。これにより、Shopify Flow がデータの形式を学習します。
  3. 所有しているすべてのWebhookは同じFlowトリガーを起動するため、このワークフローを「標準Webhook」のみに限定するには、Webhook IDを条件として最初に設定してください。IDはWebhookページに表示されています。
  4. アクションを追加してください ― お客様にタグを付けたり、メモを追加したり、社内メールを送信したり、メタフィールドを更新したりできます。
Shopify Flow
Shopify Flowで「トリガーを選択」を選択し、「Workflow Webhooks」を開き、「Webhookトリガー」を選択してください。
Shopify Flowの条件:Webhook IDが、あるWebhookのIDと一致していること
すべてのワークフローの最初のステップは、Webhook ID に基づく条件設定です。これにより、この Webhook に対してのみワークフローが実行されるようになります。
完成したワークフロー:Webhookトリガー、Webhook IDに基づく条件、そして「True」分岐で内部メールを送信します
完成したワークフロー:トリガー、Webhook ID に基づく条件、そして「True」の分岐でのアクションとなります。

ステップ4 - エンドツーエンドでテストする

Standard Webhook で実際のイベントをトリガーしてください。**「Workflow Webhooks」→「History」**に、ステータスが「**Success」**の呼び出しが表示されるはずです。署名が正しくない場合は、その理由が記載された失敗のエントリが表示されます。また、署名付きWebhookの検証 では、どのステップで失敗したかを正確に確認できる署名テスターについて解説しています。

「History」には、リクエストヘッダー、ペイロード、ステータス、所要時間、および識別子を含む1つの呼び出しが開かれていました
「History」で配信されたイベント:ステータスが「Success」の場合、Shopify Flowがそれを受け入れたことを意味します。
署名が一致しません▾

順に、シークレット(最も一般的な原因は、余分なスペースや、間違った環境のキーです)、送信者が別のエンドポイントのシークレットを使用しているかどうか、そして「標準Webhook」とアプリの間でボディが書き換えられているかどうかです。 署名は生のバイト列を対象としているため、JSONのフォーマットを変更するプロキシによって署名が破綻してしまいます。Webhookページの署名テスターでは、署名された正確なテキストが表示されます。

どのリクエストでも401エラーが表示されます▾

Webhookの認証が**「HMAC」**に設定され、「Standard Webhook」プロバイダーが選択されていること、シークレットが入力されていること、そして「Standard Webhook」が、アプリに表示されている通り(末尾のコードを含めて)正確にURLへPOSTしていることをご確認ください。

「履歴」には何も表示されません▾

リクエストは届きませんでした。「Standard Webhooks」のURLを再度確認し、「Standard Webhooks」自体の配信ログで受信した応答内容をご確認ください。「404」は、Webhookが間違っているか削除されていることを意味します。「429」は、ご利用のプランの呼び出し制限を超えていることを意味します。詳細は プランと利用方法 をご覧ください。

ワークフローが、誤ったイベントに対して実行されてしまいます▾

ストア内のすべてのWebhookは、同じShopify Flowトリガーを起動します。ワークフローの最初のステップとして、Webhook IDに基づく条件を追加するか、標準Webhookから送信するイベントを絞り込んでください。

リクエストが「タイムスタンプが許容範囲外」というエラーで失敗します▾

Standard Webhook はタイムスタンプに署名を行っており、アプリは5分以上経過したものはすべて拒否します。これは通常、送信側の時計の問題か、Standard Webhook が元のタイムスタンプのままかなり遅れて再送信を行ったことが原因です。同じ元のリクエストからの再送信は通過できませんので、Standard Webhook に新しいイベントを送信するよう依頼してください。

関連情報