Come collegare Vercel a Shopify Flow
Vercel invia un Webhook quando viene creata una distribuzione, quando questa va a buon fine o fallisce, oppure quando subiscono modifiche un progetto o un dominio. Workflow Webhooks trasforma tale chiamata in un trigger di Shopify Flow, in modo che il Suo negozio possa reagire di conseguenza: assegnare un Tag a un cliente, aggiungere una nota all’ordine, inviare un’e-mail interna, aggiornare un metacampo - qualsiasi operazione che Shopify Flow sia in grado di eseguire.
La presente guida illustra l’intero percorso - Vercel invia, Workflow Webhooks riceve e verifica, Shopify Flow agisce - con la firma HMAC di Vercel verificata ad ogni richiesta, in modo che solo Vercel possa avviare il Suo workflow.
Cosa potete realizzare
- Inviate un’e-mail al vostro team qualora l’implementazione di una vetrina online headless non vada a buon fine.
- Dopo ogni distribuzione riuscita, inserisca l’ID della distribuzione live in un metacampo dello shop.
- Una volta che la distribuzione è pronta, avvii un workflow di "cache-warming" o di reindicizzazione.
Eventi tipici da inviare: deployment.succeeded, deployment.error, project.created.
Prima di iniziare
- Workflow Webhooks installato sul Suo negozio Shopify.
- Shopify Flow installata, disponibile gratuitamente dall’App Store all’indirizzo Shopify.
- Un account su Vercel con l'autorizzazione a creare webhook.
Fase 1 - Creare il webhook all'indirizzo Workflow Webhooks
- Acceda a Workflow Webhooks -> Webhook -> Crea webhook e assegni al webhook un nome che potrà riconoscere in Shopify Flow, ad esempio
Vercel events. - Nella sezione "Autenticazione", selezionare HMAC.
- Alla voce “Fornitore di firma”, selezioni Vercel. L’app inserisce automaticamente l’intestazione, l’algoritmo, il payload firmato e la finestra di replay; non è necessario configurare nient’altro.
- Per il momento lasci il campo "Segreto" vuoto e clicchi su "Salva". Copi l'URL del webhook visualizzato nella pagina.
Per informazioni sulle altre modalità di autenticazione, si prega di consultare Autenticazione; per la scelta dei campi da trasmettere a Shopify Flow, si prega di consultare Mappatura del payload e variabili di flusso.
Fase 2 - Aggiungere l'endpoint in Vercel
In Vercel, apra Impostazioni -> Webhook per il team o il progetto, crei un webhook con l'URL che ha copiato e copi il codice segreto che le viene mostrato.
Come individuare il Suo segreto di firma Vercel
Il segreto del webhook visualizzato al momento della creazione del webhook (ovvero il segreto client dell'integrazione).
La documentazione ufficiale di Vercel sulle firme dei webhook, disponibile all'indirizzo, riporta il testo esatto e le schermate relative al Suo account.
Inserisca tale chiave segreta nel campo "Secret" del webhook all'indirizzo Workflow Webhooks e salvi. Da quel momento in poi, ogni distribuzione Vercel verrà verificata prima di raggiungere Shopify Flow.
Cosa verifica questa operazione
| Cosa | Valore |
|---|---|
| Intestazione della firma | x-vercel-signature |
| Dove si trova la firma | Il valore completo dell'intestazione |
| Cosa viene firmato | {body} |
| Firma | HMAC-SHA1, codificato in esadecimale |
| Data e ora | Non utilizzato da questo mittente |
| Protezione contro la riproduzione | Nessuna - questo mittente non appone una firma sul timestamp, pertanto ogni firma valida rimane valida |
| Il segreto | Da utilizzare come testo semplice. Lo incolli esattamente come lo presenta il mittente |
Nel payload firmato, {body} rappresenta il corpo della richiesta non elaborato, byte per byte.
Una richiesta che non soddisfi uno qualsiasi di questi requisiti viene respinta con il codice di errore 401, viene registrata in Cronologia e risoluzione dei problemi e non avvia mai un workflow.
Fase 3 - Creare il workflow Shopify Flow
- In "Shopify Flow", crei un workflow e selezioni il trigger "Workflow Webhooks".
- Clicchi su "Registra eventi", quindi invii un evento di prova da Vercel (oppure utilizzi l'opzione "Invia prova" in Workflow Webhooks) in modo che Shopify Flow possa apprendere la struttura dei Suoi dati.
- Ogni webhook di cui disponete attiva lo stesso trigger del Shopify Flow; pertanto, aggiungete una prima condizione relativa all’ID del webhook per limitare questo workflow esclusivamente a Vercel. L’ID è riportato nella pagina dedicata ai webhook.
- Aggiunga le Sue azioni: contrassegni un cliente, aggiunga una nota, invii un’e-mail interna, aggiorni un metacampo.
Fase 4 - Eseguire un test end-to-end
Attivi un evento reale su Vercel. In Workflow Webhooks -> Cronologia dovrebbe visualizzare la richiesta con lo stato “Successo”. Se la firma non era corretta, verrà invece visualizzata una voce con lo stato “Fallito” e il motivo corrispondente; inoltre, all’indirizzo Verifica dei webhook firmati è disponibile lo strumento di verifica della firma che indica esattamente quale fase non è andata a buon fine.
La firma non corrisponde▾
In questo ordine: il segreto (la causa più comune è uno spazio in eccesso o una chiave proveniente da un ambiente errato), se il mittente sta utilizzando il segreto di un endpoint diverso e se qualcosa tra Vercel e l’app riscrive il corpo del messaggio. Le firme coprono i byte grezzi, pertanto un proxy che riformatta il JSON le invalida. Il tester delle firme nella pagina del webhook mostra il testo esatto che è stato firmato.
Ricevo un errore 401 ad ogni richiesta▾
Verifichi che l'autenticazione del webhook sia impostata su HMAC con il provider Vercel selezionato, che il codice segreto sia stato inserito e che Vercel invii i dati all'URL esattamente come indicato dall'app, compreso il codice alla fine.
Nella cronologia non compare nulla▾
La richiesta non è mai arrivata. Verifichi nuovamente l’URL su Vercel e consulti il registro delle consegne di Vercel per verificare la risposta ricevuta. Un codice di errore 404 indica un webhook errato o eliminato, mentre un codice 429 significa che ha superato il limite di invocazioni previsto dal Suo piano - consulti Piani e utilizzo.
Il workflow viene eseguito per eventi non corretti▾
Ogni webhook del Suo negozio attiva lo stesso trigger di Shopify Flow. Aggiunga una condizione relativa all**'ID** del webhook come primo passo del workflow, oppure restringa la selezione degli eventi che invia da Vercel.
Correlati
- Verifica dei webhook firmati - ogni fornitore che verifichiamo e come descrivere quelli che non verifichiamo.
- Mappatura del payload e variabili di flusso - estrarre i campi corretti dal payload e inserirli in Shopify Flow.
- Protezione contro le consegne duplicate - cosa succede quando Vercel riprova a effettuare una consegna.
- Cronologia e risoluzione dei problemi - il registro di ogni richiesta, con la possibilità di riprodurla.