No-Code Webflow OAuth : effectuez des requêtes authentifiées à l'API Webflow à l'aide de Xano

Salut tout le monde!

J'ai récemment abordé la tâche d'intégrer Webflow OAuth dans mon application, et en tant que personne qui ne code pas, je voulais partager mon approche en utilisant Xano comme backend et Webflow comme frontend. Si vous êtes un pro du codage, soyez indulgents avec moi : ne jetez pas de tomates pourries ! C'est un no-codeur à un autre, dans l'espoir de faciliter un peu votre voyage.

TLDR : J'ai compilé chaque étape dans une vidéo pour ceux qui préfèrent l'apprentissage visuel, mais vous trouverez ci-dessous une version textuelle détaillée du processus.

Comprendre OAuth

Comprenons rapidement le concept fondamental du fonctionnement d'OAuth. Imaginez ceci : vous êtes en vacances et souhaitez louer un appartement dans un pays étranger. Vous trouvez un immeuble d’appartements où vous pouvez louer un logement. À votre arrivée, au lieu de recevoir les clés de tous les appartements, le propriétaire vous envoie un code à usage unique pour accéder au coffre à clés de votre appartement.

Vous utilisez ce code pour ouvrir le coffre-fort et récupérer une carte-clé, vous donnant accès à l'appartement pendant votre séjour.

Dans cette analogie, Webflow représente le propriétaire de l'appartement, le code à usage unique sert de code d'accès et la carte-clé est analogue à un jeton d'accès.

Si vous avez besoin d'accéder à des informations sur les projets Webflow d'un utilisateur, telles que des listes de pages, d'actifs, de collections ou de formulaires, vous aurez besoin d'un jeton d'accès. Ce jeton est utilisé avec toutes les requêtes API envoyées à Webflow au nom de l'utilisateur.

Dans l'exemple ci-dessous, je vais démontrer la création d'une application Webflow simple qui affiche des informations sur le projet de l'utilisateur sans stocker le jeton d'accès dans ma base de données (bien que dans des scénarios réels, il soit conseillé de stocker les jetons associés aux utilisateurs).

Étape 1 : Créer une nouvelle application Webflow

Accédez à l'onglet « Applications et intégrations » de votre tableau de bord Webflow et créez une nouvelle application. Fournissez des informations générales sur votre application, notamment son nom, sa description et l'URL de sa page d'accueil. Spécifiez les autorisations requises : j'utiliserai une application client de données dans mon exemple, accordant un accès en "Lecture" aux "Sites". Vous pourrez ajuster ces autorisations ultérieurement si nécessaire.

Les informations cruciales dont nous avons besoin ici sont l' ID client et le secret client , générés automatiquement pour votre application. Laissez le champ URL de redirection vide pour le moment ; nous y reviendrons à l'étape suivante.

Étape 2 : Configuration d'un nouveau projet Webflow en tant que frontend

Créez un nouveau projet Webflow avec deux pages : Accueil et Sites. Sur la page d'accueil, ajoutez un bouton intitulé « Afficher les sites », qui déclenchera une demande de code d'accès à Webflow.

Définissez l'URL du bouton sur https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread , en remplaçant YOUR_CLIENT_ID par l'ID client réel obtenu précédemment. Ajustez l'URL si votre application nécessite des autorisations supplémentaires.

En cliquant sur ce bouton, un écran d'autorisations s'affichera pour l'utilisateur, lui permettant de choisir les projets auxquels accorder l'accès. Après avoir autorisé l'application, ils seront redirigés vers l' URL de redirection. N'oubliez pas de copier l'URL de la page Sites (la deuxième page que vous avez créée) et de la coller dans le champ URL de redirection de votre application.

Une fois cette étape terminée, cliquer sur « Afficher les sites » redirigera les utilisateurs vers la page Sites, avec le code d'accès inclus dans l'URL.

Étape 3 : Configuration d'un projet Xano et création de la première API

Créez un nouveau projet dans Xano et accédez à l'onglet API. Ajoutez un nouveau groupe d'API, puis, au sein de ce groupe, ajoutez un nouveau point de terminaison d'API : appelons-le « getToken ».

Dans le point de terminaison « getToken » :

1. Ajoutez une entrée de texte nommée "accessCode" pour recevoir le code d'accès du frontend.

   
   

2. Effectuez une requête POST à https://api.webflow.com/oauth/access_token avec les paramètres body :

   • client_id : votre identifiant client

   • client_secret : votre secret client

   • type_octroi : code_autorisation

   • code : accessCode (en utilisant la variable de l'entrée)

     
     

   • 

   
   

3. Définissez le résultat de la première requête API comme « accessToken », qui sera le jeton d'accès associé à l'utilisateur.

   
   

4. Effectuez une deuxième requête API (à des fins de démonstration) pour récupérer la liste des sites de l'utilisateur : une requête GET à https://api.webflow.com/v2/sites . Incluez les en-têtes suivants :

   • accepter : application/json

   • autorisation : accessToken.response.result.access_token

     
     

   • 

   
   

5. Définissez la sortie de la deuxième API comme « siteList », qui représente la liste des projets Webflow.

   
   

6. Renvoyez la "siteList" dans la réponse.

   
   

7. Copiez l'URL du point de terminaison de l'API pour une utilisation ultérieure.

Étape 4 : Configuration d'une requête frontend à partir de votre projet Webflow

Revenez au projet Webflow et ouvrez la page Sites, la page où les utilisateurs sont redirigés après avoir accordé l'accès à leurs projets Webflow. Ici, ajoutez les fonctions JavaScript suivantes dans la zone de code personnalisé avant la balise </body>.

Tout d'abord, créons la fonction getSites() pour récupérer les 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)); }

Créons ensuite la fonction showSites() pour afficher les sites récupérés :

 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); }); }

Enfin, assurez-vous que la fonction getSites() s'exécute au chargement de la page :

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

Et voila! J'espère que ce guide s'avérera utile pour mes collègues no-codeurs !

N'hésitez pas à nous contacter si vous avez des questions ou si vous avez besoin de précisions supplémentaires. Bon codage !