Como conectar o Vercel a umShopify Flow
O Vercel envia um Webhook quando uma implantação é criada, é bem-sucedida, falha ou quando ocorre uma alteração em um projeto ou domínio. O Workflow Webhooks transforma essa chamada em um gatilho do Shopify Flow, para que sua loja possa reagir a ela: marcar um cliente, adicionar uma nota ao pedido, enviar um e-mail interno, atualizar um metacampo - tudo o que o Shopify Flow pode fazer.
Este guia define todo o fluxo de trabalho - o Vercel envia, o Workflow Webhooks recebe e verifica, e o Shopify Flow executa - com a assinatura HMAC do Vercel verificada em cada solicitação, de modo que somente o Vercel possa iniciar seu fluxo de trabalho.
O que o senhor pode construir
- Envie um e-mail para sua equipe quando a implantação de uma loja virtual sem interface falhar.
- Anote o ID da implantação em produção em um metacampo da loja após cada implantação bem-sucedida.
- Inicie um fluxo de trabalho de atualização do cache ou de reindexação assim que a implantação estiver pronta.
Eventos típicos a serem enviados: deployment.succeeded, deployment.error, project.created.
Antes de começar
- Workflow Webhooks instalado na sua loja do Shopify.
- Shopify Flow instalada, que está disponível gratuitamente na App Store do Shopify.
- Uma conta no Vercel com permissão para criar webhooks.
Etapa 1 - Crie o webhook em Workflow Webhooks
- Acesse Workflow Webhooks -> Webhooks -> Criar webhook e atribua a ele um nome que você reconheça no Shopify Flow, como
Vercel events. - Na seção “Autenticação”, selecione HMAC.
- Em “Provedor de assinatura”, selecione Vercel. O aplicativo preenche automaticamente o cabeçalho, o algoritmo, o payload assinado e a janela de repetição para você - não há mais nada a ser configurado.
- Deixe o campo “segredo” em branco por enquanto e clique em “Salvar”. Copie a URL da webhook exibida na página.
Consulte Autenticação para conhecer os outros modos de autenticação e Mapeamento de payload e variáveis de fluxo para saber como selecionar quais campos serão enviados ao Shopify Flow.
Etapa 2 - Adicione o endpoint no Vercel
No Vercel, abra Configurações -> Webhooks para a equipe ou projeto, crie um webhook com a URL que você copiou e copie o segredo exibido.
Como localizar seu segredo de assinatura do Vercel
O segredo do webhook exibido quando o senhor criou o webhook (ou o segredo do cliente da integração).
A própria documentação do Vercel sobre assinaturas de webhooks, disponível em, contém o texto exato e as capturas de tela referentes à sua conta.
Cole esse segredo no campo “Secret” do webhook em Workflow Webhooks e salve. A partir desse momento, todas as entregas do Vercel serão verificadas antes de chegarem ao Shopify Flow.
O que isso verifica
| O que | Valor |
|---|---|
| Cabeçalho de assinatura | x-vercel-signature |
| Onde fica a assinatura | O valor completo do cabeçalho |
| O que foi assinado | {body} |
| Assinatura | HMAC-SHA1, codificado em hexadecimal |
| Data e hora | Não é utilizado por este remetente |
| Proteção contra reprodução | Nenhuma - esse remetente não assina um carimbo de data e hora; portanto, todas as assinaturas válidas permanecem válidas |
| O segredo | Utilizado como texto simples. Cole-o exatamente como o remetente o apresenta |
Na payload assinada, {body} é o corpo da solicitação em formato bruto, byte a byte.
Uma solicitação que não atenda a qualquer um desses critérios é rejeitada com o código de erro 401, é registrada em Histórico e solução de problemas e nunca inicia um fluxo de trabalho.
Etapa 3 - Criar o fluxo de trabalho Shopify Flow
- No “Shopify Flow”, crie um fluxo de trabalho e selecione o gatilho “Workflow Webhooks”.
- Clique em “Gravar eventos” e, em seguida, envie um evento de teste a partir do Vercel (ou utilize a opção “Enviar teste” em Workflow Webhooks) para que o Shopify Flow aprenda o formato dos seus dados.
- Cada webhook de que o senhor dispõe aciona o mesmo gatilho do Shopify Flow; portanto, adicione uma primeira condição com base no ID do webhook para restregar esse fluxo de trabalho exclusivamente ao Vercel. O ID é exibido na página do webhook.
- Adicione suas ações - marque um cliente, adicione uma nota, envie um e-mail interno, atualize um metacampo.
Etapa 4 - Teste de ponta a ponta
Aque um evento real no Vercel. Em Workflow Webhooks -> Histórico, o(a) senhor(a) deverá ver a invocação com o status “Sucesso”. Caso a assinatura esteja incorreta, o(a) senhor(a) receberá uma entrada com status de falha e o motivo correspondente; além disso, Verificação de webhooks assinados explica como funciona o verificador de assinaturas, que mostra exatamente em qual etapa ocorreu a falha.
A assinatura não corresponde▾
Nestes pedidos: o segredo (a causa mais comum - um espaço a mais ou uma chave do ambiente errado), se o remetente está usando o segredo de um endpoint diferente e se algo entre o Vercel e o aplicativo reescreve o corpo da mensagem. As assinaturas abrangem os bytes brutos; portanto, um proxy que reformata o JSON as invalida. O verificador de assinaturas na página do webhook mostra o texto exato que foi assinado.
Recebo o código 401 em todas as solicitações▾
Verifique se a autenticação do webhook está configurada como HMAC com o provedor Vercel selecionado, se o segredo está preenchido e se o Vercel está enviando a solicitação para a URL exatamente como o aplicativo a exibe, incluindo o código no final.
Não há nada no Histórico▾
A solicitação nunca chegou. Verifique novamente a URL no Vercel e consulte o próprio registro de entrega do Vercel para ver a resposta recebida. Um erro do tipo 404 indica um webhook incorreto ou excluído; um erro do tipo 429 significa que você ultrapassou o limite de chamadas do seu plano - consulte Planos e uso.
O fluxo de trabalho é executado para os eventos errados▾
Cada webhook da sua loja aciona o mesmo gatilho do Shopify Flow. Adicione uma condição com base no ID do webhook como primeira etapa do fluxo de trabalho ou restrinja os eventos que você envia do Vercel.
Relacionado
- Verificação de webhooks assinados - todos os prestadores de serviços que verificamos e como descrever aqueles que não verificamos.
- Mapeamento de payload e variáveis de fluxo - extrair os campos corretos da payload e inseri-los no Shopify Flow.
- Proteção contra entregas duplicadas - o que ocorre quando o Vercel tenta novamente uma entrega.
- Histórico e solução de problemas - o registro de todas as solicitações, com reprodução.