SvixをShopify Flowに接続する方法
Svixは、Clerk、Resend、Superwallをはじめとする多くの製品の基盤となっているWebhookインフラストラクチャです。 送信元がSvix経由で配信を行っている場合、このプリセットがそれを確認します。「Workflow Webhooks」は、その呼び出しをShopify Flowのトリガーに変換するため、ストア側でそれに応じて対応することができます。お客様へのタグ付け、注文メモの追加、社内メールの送信、メタフィールドの更新など、Shopify Flowで可能なあらゆる操作が可能です。
このガイドでは、一連のプロセス全体――Svixが送信し、Workflow Webhooksが受信・検証し、Shopify Flowが処理を行う――をセットアップします。すべてのリクエストにおいてSvixのHMAC署名が検証されるため、Svix以外ではワークフローを開始することができません。
どのようなものを作れるか
- Clerkから、Shopifyのお客様がアプリで登録またはメールアドレスの確認を行ったという報告があった際は、そのお客様にタグを付けてください。
- 再送や配信失敗のイベントが発生した際に処理を行い、住所に問題があるお客様にフラグを立ててください。
- カスタム署名を設定することなく、Svixを搭載したあらゆる製品から受信できます。
送信される代表的なイベント：送信サービスが定義するあらゆるイベントです。
このプリセットでは、Clerk、Resend、SuperwallからのWebhookの検証も行います。
始める前に
- Workflow Webhooks Shopifyストアにインストールされています。
- Shopify Flow インストール済みです。これは、ShopifyのApp Storeから無料で入手できます。
- Svix上のアカウントで、Webhookを作成する権限があるもの。
ステップ 1 - Workflow Webhooks で Webhook を作成します
- Workflow Webhooks を開き**、[Webhook] → [Create Webhook]** の順に選択し、Shopify Flow で識別しやすい名前（例：
Svix events）を付けてください。 - **「認証」**で、「**HMAC」**を選択してください。
- 「署名プロバイダー」で「Svix」を選択してください。アプリがヘッダー、アルゴリズム、署名済みペイロード、リプレイウィンドウを自動的に入力してくれます。これ以外に設定する必要はありません。
- 「シークレット」の欄はひとまず空のままにして、「保存」をクリックしてください。ページに表示されているWebhook URLをコピーしてください。
その他の認証モードについては、認証 を、Shopify Flow に送信するフィールドの選択については、ペイロードのマッピングとShopify Flow変数 を参照してください。
ステップ 2 - Svix にエンドポイントを追加する
送信サービスのWebhook設定に、そのURLをエンドポイントとして追加し、署名用シークレット（whsec_ で始まるもの）を表示してコピーしてください。
Svixの署名用秘密鍵の確認方法
サービスのWebhook設定にある、whsec_ で始まるエンドポイント署名用シークレットです。
Svixが提供するWebhookの署名に関するドキュメント（）には、お客様のアカウントに関する正確な説明文とスクリーンショットが掲載されています。
そのシークレットを、Workflow Webhooks の Webhook の**「Secret」**フィールドに貼り付けて、保存してください。それ以降、すべての Svix 配信は、Shopify Flow に到達する前に検証されるようになります。
これが何をチェックするのか
| 何 | 値 |
|---|---|
| 署名ヘッダー | svix-signature |
| 署名の位置 | プレフィックス「v1,」の後のヘッダー値 |
| 何が署名されたのでしょうか | {header:svix-id}.{timestamp}.{body} |
| 署名 | HMAC-SHA256、Base64エンコード済み |
| タイムスタンプ | svix-timestampヘッダー（Unix秒として） |
| リプレイ防止機能 | 署名付きタイムスタンプが現在時刻から5分以上離れているリクエストは拒否されます |
| その秘密 | ご使用前にBase64デコードを行ってください。デコードを行う前に、先頭の「whsec_」は削除されます。送信者が表示したとおりに、正確に貼り付けてください。 |
署名付きペイロードにおいて、{body} はバイト単位でリクエスト本体の生のデータであり、{timestamp} は上記のタイムスタンプ、{header:svix-id} は svix-id のリクエストヘッダーです。
これらのいずれかの条件を満たさないリクエストは、401 のエラーで拒否され、沿革とトラブルシューティング に記録され、ワークフローは開始されません。
ステップ 3 - 「Shopify Flow」ワークフローを作成する
- Shopify Flow でワークフローを作成し、「Workflow Webhooks」トリガーを選択してください。
- 「**イベントの記録」**を押してから、Svixからテストイベントを送信してください（または「Workflow Webhooks」の「テスト送信」機能をご利用ください）。これにより、Shopify Flowがデータの形状を学習します。
- 所有しているすべてのWebhookは同じFlowトリガーを起動するため、このワークフローをSvixのみに限定するために、Webhook IDを最初の条件として追加してください。IDはWebhookページに表示されています。
- アクションを追加してください ― お客様にタグを付ける、メモを追加する、社内メールを送信する、メタフィールドを更新するなど。
ステップ4 - エンドツーエンドでテストする
Svixで実際のイベントをトリガーしてください。**「Workflow Webhooks」→「History」**に、ステータスが「**Success」**の呼び出しが表示されるはずです。署名が正しくない場合は、その理由が記載された失敗のエントリが表示されます。また、署名付きWebhookの検証 には、どのステップで失敗したかを正確に示す署名テスターの説明が記載されています。
署名が一致しません▾
順に、シークレット（最も一般的な原因は、余分なスペースや、誤った環境のキーの使用です）、送信者が別のエンドポイントのシークレットを使用しているかどうか、そしてSvixとアプリの間でボディが書き換えられていないかどうかです。署名は生のバイトを対象としているため、JSONのフォーマットを変更するプロキシによって署名が破損してしまいます。 Webhookページの署名テスターには、署名された正確なテキストが表示されます。
どのリクエストでも401エラーが表示されます▾
Webhookの認証が**「HMAC」**に設定され、プロバイダーとして「Svix」が選択されていること、シークレットが入力されていること、そしてSvixがアプリに表示されているURL（末尾のコードを含めて）に正確にPOSTしていることをご確認ください。
「履歴」には何も表示されません▾
リクエストは届きませんでした。SvixでURLを再確認し、Svix自身の配信ログで受信した応答を確認してください。「404」というエラーは、Webhookが間違っているか削除されていることを意味します。「429」というエラーは、プランの呼び出し制限を超えていることを意味します。詳細は プランと利用方法 をご覧ください。
ワークフローが誤ったイベントに対して実行されてしまいます▾
ストア内のすべてのWebhookは、同じShopify Flowトリガーを起動します。ワークフローの最初のステップとして、WebhookIDに基づく条件を追加するか、Svixから送信するイベントを絞り込んでください。
リクエストが「タイムスタンプが許容範囲外」というエラーで失敗します▾
Svixはタイムスタンプに署名を行い、アプリは5分以上経過したものはすべて拒否します。これは通常、送信側の時計の問題か、あるいはSvixが元のタイムスタンプのままかなり遅れて再送信を行ったケースです。同じ元のリクエストからの再送信は通過できませんので、Svixに新しいイベントを送信するよう依頼してください。
関連情報
- 署名付きWebhookの検証 - 当社が審査済みのすべてのプロバイダー、および審査対象外のプロバイダーの記載方法について。
- ペイロードのマッピングとShopify Flow変数 - ペイロードから適切なフィールドを抽出し、Shopify Flowに取り込むこと。
- 重複配送防止 - Svixが配信を再試行すると、どうなるのでしょうか。
- 沿革とトラブルシューティング - すべてのリクエストのログ（再生機能付き）。