Hey everyone!
I recently tackled the task of integrating Webflow OAuth into my app, and as someone who doesn't code, I wanted to share my approach using Xano as a backend and Webflow as a frontend. If you're a coding pro, please bear with me—no throwing rotten tomatoes! This is one no-coder to another, hoping to smoothen your journey a bit.
TLDR: I've compiled every step into a video for those who prefer visual learning, but you'll find a detailed text version of the process below.
https://youtu.be/bTUatl6eTec?embedable=true
Understanding OAuth
Let's quickly grasp the fundamental concept of how OAuth operates. Picture this: you're on holiday and want to rent an apartment in a foreign country. You find an apartment building where you can rent a unit. Upon arrival, instead of being given keys to all the flats, the owner sends you a one-time code to access your specific flat's key lockbox.
You use this code to open the lockbox and retrieve a key card, granting you access to the apartment during your stay.
In this analogy, Webflow represents the apartment owner, the one-time code serves as an access code, and the key card is analogous to an access token.
If you need access to any information about a user's Webflow projects—such as lists of pages, assets, collections, or forms—you'll require an access token. This token is used with any API requests sent to Webflow on behalf of the user.
In the example below, I'll demonstrate building a simple Webflow app that displays information about the user's project without storing the access token in my database (although in real-world scenarios, it's advisable to store tokens associated with users).
Step 1: Create a New Webflow App
Navigate to your Webflow dashboard's "Apps & Integrations" tab and create a new app. Provide general information about your app, including its name, description, and home page URL. Specify the required permissions—I'll use a data client app in my example, granting "Read" access to "Sites." You can adjust these permissions later if needed.
The crucial pieces of information we need here are the Client ID and Client Secret, automatically generated for your app. Leave the Redirect URL field blank for now; we'll revisit it in the next step.
Step 2: Setting Up a New Webflow Project as the Frontend
Create a new Webflow project with two pages: Home and Sites. On the Home page, add a button labeled "Show Sites," which will trigger a request to Webflow for the access code.
Set the button's URL to https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread, replacing YOUR_CLIENT_ID with the actual Client ID obtained earlier. Adjust the URL if your app requires additional permissions.
Clicking this button will display a permissions screen to the user, allowing them to choose which projects to grant access to. Upon authorizing the app, they'll be redirected to the Redirect URL—remember to copy the URL of the Sites page (the second page you created) and paste it into the Redirect URL field of your app.
Upon completing this step, clicking "Show Sites" will redirect users to the Sites page, with the access code included in the URL.
Step 3: Setting Up a Xano Project and Creating the First API
Create a new project in Xano, and navigate to the APIs tab. Add a new API Group, and then within that group, add a new API Endpoint—let's call it "getToken."
In the "getToken" endpoint:
-
Add a text input named "accessCode" to receive the access code from the frontend.
-
Make a POST request to https://api.webflow.com/oauth/access_token with body parameters:
-
client_id: Your Client ID
-
client_secret: Your Client Secret
-
grant_type: authorization_code
-
code: accessCode (using the variable from the input)
-
-
Define the output of the first API request as "accessToken," which will be the access token associated with the user.
-
Make a second API request (for demonstration purposes) to retrieve the user's site list—a GET request to https://api.webflow.com/v2/sites. Include the following headers:
-
accept: application/json
-
authorization: accessToken.response.result.access_token
-
-
Define the output of the second API as "siteList," which represents the list of Webflow projects.
-
Return the "siteList" in the response.
-
Copy the API endpoint URL for later use.
Step 4: Configuring a Frontend Request From Your Webflow Project
Return to the Webflow project and open the Sites page—the page where users are redirected after granting access to their Webflow projects. Here, add the following JavaScript functions in the custom code area before the </body> tag.
First, let's create the getSites() function to retrieve the 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));
}
Then, let's create the showSites() function to display the retrieved sites:
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);
});
}
Lastly, ensure that the getSites() function runs on page load:
document.addEventListener('DOMContentLoaded', function() {
getSites();
});
And there you have it! I hope this guide proves helpful for my fellow no-coders!
Feel free to reach out if you have any questions or need further clarification. Happy coding!