No-Code Webflow OAuth: Faça solicitações autenticadas para a API Webflow usando Xano

Olá a todos!

Recentemente, assumi a tarefa de integrar o Webflow OAuth ao meu aplicativo e, como alguém que não codifica, gostaria de compartilhar minha abordagem usando o Xano como back-end e o Webflow como front-end. Se você é um profissional de codificação, tenha paciência comigo - nada de jogar tomates podres! Este é um não-codificador para outro, na esperança de facilitar um pouco sua jornada.

TLDR: Compilei cada etapa em um vídeo para aqueles que preferem o aprendizado visual, mas você encontrará uma versão detalhada do processo abaixo.

Compreendendo o OAuth

Vamos compreender rapidamente o conceito fundamental de como o OAuth opera. Imagine só: você está de férias e quer alugar um apartamento em um país estrangeiro. Você encontra um prédio de apartamentos onde pode alugar uma unidade. Na chegada, em vez de receber as chaves de todos os apartamentos, o proprietário envia a você um código único para acessar o cofre específico do seu apartamento.

Você usa este código para abrir o cofre e recuperar um cartão-chave, garantindo acesso ao apartamento durante a sua estadia.

Nesta analogia, o Webflow representa o proprietário do apartamento, o código único serve como código de acesso e o cartão-chave é análogo a um token de acesso.

Se precisar de acesso a qualquer informação sobre os projetos do Webflow de um usuário, como listas de páginas, ativos, coleções ou formulários, você precisará de um token de acesso. Este token é usado com quaisquer solicitações de API enviadas ao Webflow em nome do usuário.

No exemplo abaixo, demonstrarei a construção de um aplicativo Webflow simples que exibe informações sobre o projeto do usuário sem armazenar o token de acesso em meu banco de dados (embora em cenários do mundo real seja aconselhável armazenar tokens associados aos usuários).

Etapa 1: crie um novo aplicativo Webflow

Navegue até a guia "Aplicativos e integrações" do painel do Webflow e crie um novo aplicativo. Forneça informações gerais sobre seu aplicativo, incluindo nome, descrição e URL da página inicial. Especifique as permissões necessárias – usarei um aplicativo cliente de dados em meu exemplo, concedendo acesso de “Leitura” a “Sites”. Você pode ajustar essas permissões posteriormente, se necessário.

As informações cruciais de que precisamos aqui são o Client ID e o Client Secret , gerados automaticamente para seu aplicativo. Deixe o campo Redirecionar URL em branco por enquanto; iremos revisitá-lo na próxima etapa.

Etapa 2: Configurando um novo projeto de fluxo da Web como front-end

Crie um novo projeto Webflow com duas páginas: Home e Sites. Na página inicial, adicione um botão denominado "Mostrar sites", que acionará uma solicitação ao Webflow para o código de acesso.

Defina o URL do botão como https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread , substituindo YOUR_CLIENT_ID pelo ID do cliente real obtido anteriormente. Ajuste o URL se seu aplicativo exigir permissões adicionais.

Clicar neste botão exibirá uma tela de permissões para o usuário, permitindo-lhe escolher a quais projetos conceder acesso. Ao autorizar o aplicativo, eles serão redirecionados para o URL de redirecionamento. Lembre-se de copiar o URL da página Sites (a segunda página que você criou) e colá-lo no campo URL de redirecionamento do seu aplicativo.

Ao concluir esta etapa, clicar em “Mostrar Sites” redirecionará os usuários para a página Sites, com o código de acesso incluído na URL.

Etapa 3: Configurando um Projeto Xano e Criando a Primeira API

Crie um novo projeto no Xano e navegue até a guia APIs. Adicione um novo grupo de API e, dentro desse grupo, adicione um novo endpoint de API — vamos chamá-lo de "getToken".

No ponto final "getToken":

1. Adicione uma entrada de texto chamada "accessCode" para receber o código de acesso do frontend.

   
   

2. Faça uma solicitação POST para https://api.webflow.com/oauth/access_token com parâmetros de corpo:

   • client_id: seu ID de cliente

   • client_secret: seu segredo do cliente

   • grant_type: código_de_autorização

   • código: accessCode (usando a variável da entrada)

     
     

   • 

   
   

3. Defina a saída da primeira solicitação de API como “accessToken”, que será o token de acesso associado ao usuário.

   
   

4. Faça uma segunda solicitação de API (para fins de demonstração) para recuperar a lista de sites do usuário — uma solicitação GET para https://api.webflow.com/v2/sites . Inclua os seguintes cabeçalhos:

   • aceitar: aplicativo/json

   • autorização: accessToken.response.result.access_token

     
     

   • 

   
   

5. Defina a saída da segunda API como “siteList”, que representa a lista de projetos Webflow.

   
   

6. Retorne o "siteList" na resposta.

   
   

7. Copie o URL do endpoint da API para uso posterior.

Etapa 4: configurando uma solicitação de front-end do seu projeto Webflow

Retorne ao projeto Webflow e abra a página Sites – a página para a qual os usuários são redirecionados após conceder acesso aos seus projetos Webflow. Aqui, adicione as seguintes funções JavaScript na área de código personalizado antes da tag </body>.

Primeiro, vamos criar a função getSites() para recuperar os sites:

 function getSites() { const url = window.location.search; const params = new URLSearchParams(url); const accessCode = params.get('code'); const options = { method: 'POST', headers: {accept: 'application/json', 'content-type': 'application/json'}, body: JSON.stringify({accessCode: accessCode}) }; fetch('YOUR_API_ENDPOINT', options) .then(response => response.json()) .then(response => { const siteList = response.response.result.sites; showSites(siteList); }) .catch(err => console.log(err)); }

Então, vamos criar a função showSites() para exibir os sites recuperados:

 function showSites(sites) { const container = document.querySelector('#result'); sites.forEach(site => { const siteDiv = document.createElement('div'); siteDiv.classList.add('site'); const siteContent = `<h2>${site.displayName}</h2> <p><strong>ID:</strong> ${site.id}</p> <p><strong>Workspace ID:</strong> ${site.workspaceId}</p> <p><strong>Short Name:</strong> ${site.shortName}</p> <p><strong>Time Zone:</strong> ${site.timeZone}</p> <p><strong>Created On:</strong> ${site.createdOn}</p> <p><strong>Last Updated:</strong> ${site.lastUpdated}</p> <p><strong>Last Published:</strong> ${site.lastPublished}</p> <img src="${site.previewUrl}" alt="Preview"> `; siteDiv.innerHTML = siteContent; container.appendChild(siteDiv); }); }

Por último, certifique-se de que a função getSites() seja executada no carregamento da página:

 document.addEventListener('DOMContentLoaded', function() { getSites(); });

E aí está! Espero que este guia seja útil para meus colegas não programadores!

Sinta-se à vontade para entrar em contato se tiver alguma dúvida ou precisar de mais esclarecimentos. Boa codificação!