Sådan forbinder du Vercel med Shopify Flow
Vercel sender en Webhook, når der oprettes en deployment, når den lykkes eller mislykkes, eller når der sker ændringer i et projekt eller et domæne. Workflow Webhooks omdanner dette opkald til en Shopify Flow-udløser, så din butik kan reagere på det: mærk en kunde, tilføj en ordrekommentar, send en intern e-mail, opdater et metafelt - alt, hvad Shopify Flow kan gøre.
Denne vejledning beskriver hele forløbet - Vercel sender, Workflow Webhooks modtager og verificerer, Shopify Flow udfører - hvor Vercels HMAC-signatur kontrolleres ved hver eneste anmodning, så kun Vercel kan igangsætte din arbejdsgang.
Hvad du kan bygge
- Send en e-mail til dit team, når en implementering af en headless-webshop mislykkes.
- Skriv ID’et for den live-implementering ind i et metafelt i butikken efter hver vellykket implementering.
- Start en cache-opvarmning eller en reindeksering, når en implementering er klar.
Typiske begivenheder, der skal sendes: deployment.succeeded, deployment.error, project.created.
Før du går i gang
- Workflow Webhooks installeret på din Shopify-butik.
- Shopify Flow installeret, som kan hentes gratis fra App Store på Shopify.
- En konto på Vercel med tilladelse til at oprette webhooks.
Trin 1 - Opret webhook på Workflow Webhooks
- Åbn Workflow Webhooks -> Webhooks -> Opret webhook, og giv den et navn, du kan genkende i Shopify Flow, f.eks.
Vercel events. - Vælg HMAC under »Autentificering«.
- Vælg Vercel under »Signature provider«. Appen udfylder selv header, algoritme, signeret payload og replay-vindue for dig - der er ikke andet, du skal konfigurere.
- Lad feltet »Hemmelighed« stå tomt foreløbig, og klik på »Gem«. Kopier den webhook-URL, der vises på siden.
Se Godkendelse for de øvrige godkendelsesmetoder, og Kortlægning af payload og strømningsvariabler for at vælge, hvilke felter der skal sendes til Shopify Flow.
Trin 2 - Tilføj endpointet i Vercel
I Vercel skal du åbne Indstillinger -> Webhooks for holdet eller projektet, oprette en webhook med den URL, du har kopieret, og kopiere den hemmelige nøgle, der vises.
Sådan finder du din Vercel-signeringsnøgle
Den webhook-hemmelighed, der blev vist, da du oprettede webhooken (eller integrationens klienthemmelighed).
Vercels egen dokumentation om webhook-signaturer indeholder den nøjagtige formulering og skærmbilleder til netop din konto.
Indsæt den hemmelighed i feltet »Secret« for webhooken på Workflow Webhooks, og gem. Fra det øjeblik bliver hver eneste Vercel-levering verificeret, før den når frem til Shopify Flow.
Hvad dette kontrollerer
| Hvad | Værdi |
|---|---|
| Signaturhoved | x-vercel-signature |
| Hvor underskriften er placeret | Hele værdien i overskriften |
| Hvad der er underskrevet | {body} |
| Underskrift | HMAC-SHA1, hex-kodet |
| Tidspunkt | Bruges ikke af denne afsender |
| Beskyttelse mod gentagelse | Ingen - denne afsender underskriver ikke et tidsstempel, så alle gyldige underskrifter forbliver gyldige |
| Hemmeligheden | Bruges som almindelig tekst. Indsæt den nøjagtigt, som afsenderen viser den |
In the signed payload, {body} is the raw request body, byte for byte.
En anmodning, der ikke opfylder et af disse kriterier, afvises med fejlkoden »401«, registreres i »Historik og fejlfinding« og udløser aldrig en arbejdsgang.
Trin 3 - Opret arbejdsgangen »Shopify Flow«
- I »Shopify Flow« skal du oprette en arbejdsgang og vælge udløseren »Workflow Webhooks«.
- Tryk på »Record events«, og send derefter en testbegivenhed fra Vercel (eller brug »Send test« i »Workflow Webhooks«), så Shopify Flow kan lære dataenes struktur at kende.
- Hver eneste webhook, du ejer, udløser den samme Shopify Flow-trigger, så tilføj en første betingelse baseret på webhook-id’et for at sikre, at denne arbejdsgang kun kører på Vercel. Id’et vises på webhook-siden.
- Tilføj dine handlinger - tag en kunde, tilføj en note, send en intern e-mail, opdater et metafelt.
Trin 4 - Test det fra start til slut
Udløser en rigtig begivenhed i Vercel. Under »Workflow Webhooks« → »History« bør du kunne se opkaldet med status »Success«. Hvis signaturen var forkert, får du i stedet en fejlmeddelelse med årsagen, og på Bekræftelse af signerede webhooks finder du en forklaring på signaturtesteren, der viser dig præcis, hvilket trin der mislykkedes.
Underskriften stemmer ikke overens▾
I denne rækkefølge: hemmeligheden (den mest almindelige årsag - et ekstra mellemrum eller en nøgle fra det forkerte miljø), om afsenderen bruger en anden endpoints hemmelighed, og om noget mellem Vercel og appen omskriver brødteksten. Signaturerne dækker de rå bytes, så en proxy, der omformaterer JSON, ødelægger dem. Signaturtesteren på webhook-siden viser den nøjagtige tekst, der blev signeret.
Jeg får en 401-fejl ved hver eneste forespørgsel▾
Kontroller, at webhookens godkendelse er indstillet til HMAC med Vercel valgt som udbyder, at den hemmelige nøgle er udfyldt, og at Vercel sender data til URL’en nøjagtigt som angivet i appen, inklusive koden i slutningen.
Der vises intet under »Historik«▾
Anmodningen blev aldrig modtaget. Tjek URL’en igen i Vercel, og se i Vercels egen leveringslog, hvilket svar der blev modtaget. En 404 betyder, at webhooken er forkert eller slettet, mens en 429 betyder, at du har overskredet dit abonnements grænse for antal opkald - se Planer og anvendelse.
Arbejdsgangen kører for de forkerte begivenheder▾
Hver eneste webhook i din butik udløser den samme Shopify Flow-trigger. Tilføj en betingelse baseret på webhook-id’et som det første trin i arbejdsgangen, eller begræns de begivenheder, du sender fra Vercel.
Relateret
- Bekræftelse af signerede webhooks - alle udbydere, vi verificerer, og hvordan man beskriver en, vi ikke verificerer.
- Kortlægning af payload og strømningsvariabler - at udtrække de rigtige felter fra payloadet og overføre dem til Shopify Flow.
- Beskyttelse mod dobbeltlevering - hvad der sker, når Vercel forsøger at sende en levering igen.
- Historik og fejlfinding - loggen over hver enkelt anmodning, med mulighed for afspilning.