Hoe u Vercel kunt koppelen aan Shopify Flow

Q: De handtekening komt niet overeen

In deze bestelling: het geheim (de meest voorkomende oorzaak - een extra spatie of een sleutel uit de verkeerde omgeving), of de afzender het geheim van een ander eindpunt gebruikt, en of er iets tussen Vercel en de app de body herschrijft . Handtekeningen hebben betrekking op de ruwe bytes, dus een proxy die JSON opnieuw opmaakt, maakt ze ongeldig. De handtekeningtester op de webhook-pagina toont de exacte tekst die is ondertekend.

Vercel verstuurt een Webhook wanneer er een implementatie wordt aangemaakt, deze slaagt, mislukt of wanneer er wijzigingen plaatsvinden in een project of domein. Workflow Webhooks zet die oproep om in een Shopify Flow-trigger, zodat uw winkel hierop kan reageren: een klant taggen, een opmerking bij een bestelling toevoegen, een interne e-mail versturen, een metaveld bijwerken - alles Shopify Flow kan doen.

Deze handleiding beschrijft het volledige proces - Vercel verzendt, Workflow Webhooks ontvangt en verifieert, Shopify Flow voert de actie uit - waarbij bij elk verzoek de HMAC-handtekening van Vercel wordt gecontroleerd, zodat uitsluitend Vercel uw workflow kan starten.

Wat u kunt bouwen

Stuur uw team een e-mail wanneer de implementatie van een headless webshop mislukt.
Noteer na elke succesvolle implementatie de live-implementatie-ID in een metaveld van de winkel.
Start een workflow voor het opwarmen van de cache of het opnieuw indexeren zodra een implementatie gereed is.

Voorbeelden van gebeurtenissen die u kunt doorgeven: deployment.succeeded, deployment.error, project.created.

Voordat u begint

Workflow Webhooks geïnstalleerd in uw Shopify-winkel.
Shopify Flow geïnstalleerd, dat gratis te downloaden is via de App Store op Shopify.
Een account op Vercel waarmee u webhooks kunt aanmaken.

Stap 1 - Maak de webhook aan op Workflow Webhooks

Ga naar Workflow Webhooks -> Webhooks -> Maak een Webhook aan en geef deze een naam die u in Shopify Flow zult herkennen, zoals Vercel events.
Kies onder ‘Authenticatie’ de optie ‘HMAC’.
Kies onder ‘Signature provider’ voor Vercel. De app vult de header, het algoritme, de ondertekende Payload en het replay-venster automatisch voor u in - u hoeft verder niets meer in te stellen.
Laat het veld ‘geheim’ voorlopig leeg en klik op ‘Opslaan’. Kopieer de webhook-URL die op de pagina wordt weergegeven.

Zie Authenticatie voor de overige authenticatiemodi en Toewijzing van payloads en Flow-variabelen voor informatie over welke velden naar Shopify Flow worden verzonden.

Stap 2 - Voeg het eindpunt toe in Vercel

Open in Vercel ‘Instellingen’ -> ‘Webhooks’ voor het team of project, maak een webhook aan met de URL die u hebt gekopieerd en kopieer de geheimcode die daar wordt weergegeven.

Hoe u uw Vercel-ondertekeningsgeheim kunt vinden

Het webhook-geheim dat werd weergegeven toen u de webhook aanmaakte (of het clientgeheim van de integratie).

In de documentatie van Vercel over webhook-handtekeningen vindt u de exacte bewoordingen en schermafbeeldingen voor uw account.

Plak dat geheim in het veld ‘Secret’ van de webhook op Workflow Webhooks en sla het op. Vanaf dat moment wordt elke Vercel-levering geverifieerd voordat deze Shopify Flow bereikt.

Wat hiermee wordt gecontroleerd

Wat	Waarde
Handtekeningkoptekst	`x-vercel-signature`
Waar de handtekening staat	De volledige waarde van de header
Wat is ondertekend?	`{body}`
Handtekening	HMAC-SHA1, in hexadecimale notatie
Tijdstempel	Wordt niet gebruikt door deze afzender
Bescherming tegen herhaling	Geen - deze afzender ondertekent geen tijdstempel, zodat elke geldige handtekening geldig blijft
Het geheim	Wordt als platte tekst gebruikt. Plak de tekst precies zoals de afzender deze weergeeft

In de ondertekende payload is {body} de onbewerkte hoofdtekst van het verzoek, byte voor byte.

Een verzoek dat aan een van deze voorwaarden niet voldoet, wordt afgewezen met de foutmelding 401, wordt geregistreerd in Geschiedenis en probleemoplossing en leidt nooit tot het starten van een workflow.

Stap 3 - Stel de Shopify Flow-workflow samen

Maak in ‘Shopify Flow’ een workflow aan en kies de trigger ‘Workflow Webhooks’.
Klik op ‘Gebeurtenissen vastleggen’ en verstuur vervolgens een testgebeurtenis vanuit Vercel (of gebruik de optie ‘Test verzenden’ in Workflow Webhooks), zodat Shopify Flow de structuur van uw gegevens leert kennen.
Elke webhook die u bezit, activeert dezelfde Shopify Flow-trigger. Voeg daarom een eerste voorwaarde toe op basis van de webhook-id, zodat deze workflow uitsluitend voor Vercel geldt. De id wordt weergegeven op de webhook-pagina.
Voeg uw acties toe - tag een klant, voeg een notitie toe, verstuur een interne e-mail, werk een metaveld bij.

Een Shopify Flow-voorwaarde: de webhook-ID is gelijk aan de ID van één webhook — De eerste stap van elke workflow: een voorwaarde op basis van de webhook-ID, zodat de workflow uitsluitend voor deze webhook wordt uitgevoerd.

De voltooide workflow: Webhook-trigger, een voorwaarde op basis van de webhook-ID, gevolgd door het verzenden van een interne e-mail in de tak ‘Waar’ — De voltooide workflow: trigger, voorwaarde op basis van de webhook-ID, gevolgd door uw actie in de „True“-tak.

Stap 4 - Test het van begin tot eind

Activeer een echte gebeurtenis in Vercel. Onder Workflow Webhooks -> History zou u de aanroep moeten zien met de status „Success“. Als de handtekening onjuist was, krijgt u in plaats daarvan een vermelding met de status „Failed“ en de bijbehorende reden; op Gecertificeerde webhooks verifiëren vindt u uitleg over de handtekeningtester die u precies laat zien welke stap is mislukt.

Eén aanroep werd in History geopend, inclusief de verzoekheaders, de payload, de status, de duur en de identificatiegegevens — Een voltooide gebeurtenis in History: de status ‘Succes’ betekent dat Shopify Flow deze heeft geaccepteerd.

De handtekening komt niet overeen▾

In deze bestelling: het geheim (de meest voorkomende oorzaak - een extra spatie of een sleutel uit de verkeerde omgeving), of de afzender het geheim van een ander eindpunt gebruikt, en of er iets tussen Vercel en de app de body herschrijft. Handtekeningen hebben betrekking op de ruwe bytes, dus een proxy die JSON opnieuw opmaakt, maakt ze ongeldig. De handtekeningtester op de webhook-pagina toont de exacte tekst die is ondertekend.

Bij elk verzoek krijg ik een 401-foutmelding▾

Controleer of de authenticatie van de webhook is ingesteld op HMAC met de Vercel-provider geselecteerd, of het geheim is ingevuld en of Vercel de gegevens naar de URL verstuurt precies zoals deze in de app wordt weergegeven, inclusief de code aan het einde.

Er wordt niets weergegeven in de geschiedenis▾

Het verzoek is nooit aangekomen. Controleer de URL nogmaals in Vercel en bekijk het eigen afleveringslogboek van Vercel om te zien welk antwoord het heeft ontvangen. Een 404 duidt op een onjuiste of verwijderde webhook, een 429 betekent dat u de limiet voor het aantal aanroepen van uw abonnement hebt overschreden - zie Abonnementen en gebruik.

De workflow wordt voor de verkeerde gebeurtenissen uitgevoerd▾

Elke webhook in uw winkel activeert dezelfde Shopify Flow-trigger. Voeg als eerste stap van de workflow een voorwaarde toe op basis van de webhook-ID, of beperk de gebeurtenissen die u vanuit Vercel verstuurt.

Gerelateerd

Gecertificeerde webhooks verifiëren - elke aanbieder die wij controleren, en hoe wij een aanbieder beschrijven die wij niet controleren.
Toewijzing van payloads en Flow-variabelen - de juiste velden uit de payload halen en in Shopify Flow invoeren.
Bescherming tegen dubbele leveringen - wat er gebeurt wanneer Vercel een verzending opnieuw probeert.
Geschiedenis en probleemoplossing - het logboek van elk verzoek, inclusief de mogelijkheid tot het opnieuw afspelen ervan.