Comment connecter Svix à Shopify Flow

Svix est l'infrastructure de webhooks sur laquelle reposent Clerk, Resend, Superwall et de nombreux autres produits. Si votre service d’envoi utilise Svix, ce préréglage permet de le vérifier. Workflow Webhooks transforme cet appel en un déclencheur « **Shopify Flow **», afin que votre boutique puisse y réagir : attribuer une balise à un client, ajouter une note de commande, envoyer un e-mail interne, mettre à jour un métachamp… tout ce que Shopify Flow permet de faire.

Ce guide décrit l'ensemble du processus : Svix envoie les données, Workflow Webhooks les reçoit et les vérifie, Shopify Flow effectue les opérations, la signature HMAC de Svix étant vérifiée à chaque requête, de sorte que seul Svix puisse lancer votre workflow.

Ce que vous pouvez construire

  • Marquez un client Shopify lorsque Clerk signale que celui-ci s'est inscrit ou a validé son adresse e-mail dans votre application.
  • Réagissez à un événement de réenvoi ou de retour d'e-mail et signalez le client dont l'adresse pose problème.
  • Recevez des messages provenant de n'importe quel produit fonctionnant sous Svix sans avoir à configurer de signature personnalisée.

Événements types à envoyer : tout événement défini par le service émetteur.

Ce même préréglage vérifie également les webhooks provenant de Clerk, Resend et Superwall.

Avant de commencer

  • Workflow Webhooks installé sur votre boutique Shopify.
  • Shopify Flow installée, disponible gratuitement sur la Boutique d'Shopify.
  • Un compte sur Svix disposant des droits nécessaires pour créer des webhooks.

Étape 1 - Créez le webhook sur Workflow Webhooks

  1. Accédez à Workflow Webhooks -> Webhooks -> Créer un webhook et attribuez-lui un nom que vous pourrez reconnaître dans Shopify Flow, tel que Svix events.
  2. Dans la section « Authentification », sélectionnez « HMAC ».
  3. Dans la section « Fournisseur de signature », sélectionnez « Svix ». L'application remplit automatiquement les champs « en-tête », « algorithme », « Payload signé » et « fenêtre de relecture » ; vous n'avez rien d'autre à configurer.
  4. Pour l'instant, ne renseignez pas le champ « secret » et cliquez sur « Enregistrer ». Copiez l'URL du webhook affichée sur la page.

Consultez la page Authentification pour connaître les autres modes d'authentification, et la page Mappage de la charge utile et variables de flux pour choisir les champs qui seront transmis à Shopify Flow.

Étape 2 - Ajouter le point de terminaison dans Svix

Ajoutez l'URL en tant que point de terminaison dans les paramètres du webhook du service d'envoi, puis affichez et copiez sa clé de signature (elle commence par whsec_).

Comment trouver votre clé de signature Svix

La clé de signature du point de terminaison commençant par « whsec_ », issue des paramètres du webhook du service.

La documentation de Svix consacrée aux signatures de webhooks, disponible à l'adresse, contient le libellé exact et les captures d'écran correspondant à votre compte.

Collez ce secret dans le champ « Secret » du webhook sur Workflow Webhooks, puis enregistrez. À partir de ce moment, chaque envoi Svix est vérifié avant d'atteindre Shopify Flow.

Ce que cette vérification permet de contrôler

Quoi ? Valeur
En-tête de signature svix-signature
Emplacement de la signature La valeur de l'en-tête, après le préfixe v1,
Ce qui est signé {header:svix-id}.{timestamp}.{body}
Signature HMAC-SHA256, encodé en base64
Horodatage L'en-tête svix-timestamp, exprimé en secondes Unix
Protection contre la lecture ultérieure Les requêtes dont l'horodatage signé remonte à plus de 5 minutes sont rejetées
Le secret Décodé en Base64 avant utilisation. Le préfixe whsec_ est supprimé avant le décodage. Collez-le exactement tel qu'il apparaît chez l'expéditeur.

Dans la charge utile signée, {body} correspond au corps brut de la requête, octet par octet, {timestamp} correspond à l'horodatage mentionné ci-dessus, et {header:svix-id} correspond à l'en-tête de requête svix-id.

Toute requête qui ne respecte pas l'une de ces conditions est rejetée avec le message 401, est enregistrée dans Historique et dépannage et ne déclenche jamais de workflow.

Étape 3 - Créer le workflow Shopify Flow

  1. Dans « Shopify Flow », créez un workflow et sélectionnez le déclencheur « Workflow Webhooks ».
  2. Cliquez sur « Enregistrer les événements », puis envoyez un événement test depuis Svix (ou utilisez l'option « Envoyer un test » dans Workflow Webhooks) afin que Shopify Flow apprenne la structure de vos données.
  3. Chaque webhook dont vous disposez déclenche le même déclencheur de flux ; veuillez donc ajouter une première condition sur l'identifiant du webhook afin de limiter ce workflow à Svix uniquement. L'identifiant est indiqué sur la page du webhook.
  4. Ajoutez vos actions : identifiez un client, ajoutez une note, envoyez un e-mail interne, mettez à jour un métachamp.
Shopify Flow
Dans Shopify Flow, sélectionnez « Choisir un déclencheur », ouvrez Workflow Webhooks et sélectionnez « Déclencheur Webhook ».
Condition de flux : l'identifiant du webhook est identique à celui d'un webhook
La première étape de chaque workflow : une condition portant sur l'identifiant du webhook, afin que le workflow ne s'exécute que pour ce webhook.
Le workflow final : déclencheur Webhook, une condition sur l'identifiant du webhook, puis envoi d'un e-mail interne sur la branche « True »
Le workflow final : un déclencheur, une condition basée sur l'identifiant du webhook, puis votre action sur la branche « True ».

Étape 4 - Testez le système de bout en bout

Déclenchez un événement réel dans Svix. Dans «Workflow Webhooks»** -> «History »,** vous devriez voir l'appel avec le statut « Success ». Si la signature était incorrecte, vous obtiendrez à la place une entrée indiquant un échec avec la raison correspondante, et la page Vérification des webhooks signés explique le fonctionnement de l'outil de vérification de signature qui vous indique précisément quelle étape a échoué.

Une requête a été enregistrée dans l'historique avec ses en-têtes de requête, sa payload, son statut, sa durée et ses identifiants
Un événement « livré » dans « Histoire » : le statut « Succès » signifie que Shopify Flow l'a accepté.
La signature ne correspond pas▾

Dans cette commande : le secret (cause la plus courante : un espace supplémentaire ou une clé provenant d'un environnement incorrect), le fait que l'expéditeur utilise le secret d'un autre point de terminaison, et le fait que quelque chose entre Svix et l'application réécrive le corps du message. Les signatures portent sur les octets bruts ; ainsi, un proxy qui reformate le JSON les invalide. Le testeur de signature disponible sur la page du webhook affiche le texte exact qui a été signé.

Je reçois un code 401 à chaque requête▾

Vérifiez que l'authentification du webhook est configurée sur HMAC avec le fournisseur Svix sélectionné, que le secret est renseigné et que Svix envoie ses requêtes à l'URL exactement telle qu'elle apparaît dans l'application, y compris le code à la fin.

Rien n'apparaît dans l'historique▾

La requête n'est jamais parvenue. Vérifiez à nouveau l'URL dans Svix et consultez le journal de livraison de Svix pour voir la réponse qu'il a reçue. Un message 404 indique un webhook incorrect ou supprimé, tandis qu'un message 429 signifie que vous avez dépassé la limite d'appels de votre forfait - consultez Forfaits et utilisation.

The workflow runs for inappropriate events▾

Chaque webhook de votre boutique déclenche le même déclencheur Shopify Flow. Ajoutez une condition sur l'identifiant du webhook comme première étape du workflow, ou affinez les événements que vous envoyez depuis Svix.

Les requêtes échouent avec le message « horodatage hors tolérance »▾

Svix appose un horodatage et l'application rejette tout événement datant de plus de 5 minutes. Il s'agit généralement d'un problème d'horloge du côté de l'expéditeur, ou d'une transmission que Svix a réessayé d'envoyer bien plus tard en conservant l'horodatage d'origine. Les nouvelles tentatives issues de la même requête d'origine ne peuvent pas être acceptées ; demandez à Svix d'envoyer un nouvel événement.

Connexes