无代码 Webflow OAuth：使用 Xano 向 Webflow API 发出经过身份验证的请求

嘿大家！

我最近解决了将 Webflow OAuth 集成到我的应用程序中的任务，作为一个不会编码的人，我想分享我使用 Xano 作为后端和 Webflow 作为前端的方法。如果您是一名编码专家，请耐心等待——不要扔烂番茄！这是一个无编码者对另一个无编码者的介绍，希望能让您的旅程更加顺利。

TLDR：我已将每个步骤编译成视频，供那些喜欢视觉学习的人使用，但您可以在下面找到该过程的详细文本版本。

了解 OAuth

让我们快速掌握 OAuth 运作方式的基本概念。想象一下：您正在度假，想要在国外租一套公寓。您找到一栋可以租用单元的公寓楼。抵达后，业主不会向您提供所有公寓的钥匙，而是向您发送一次性代码以打开您特定公寓的钥匙箱。

您可以使用此代码打开密码箱并取出钥匙卡，以便您在住宿期间进入公寓。

在此类比中，Webflow 代表公寓业主，一次性代码充当访问代码，钥匙卡类似于访问令牌。

如果您需要访问有关用户 Webflow 项目的任何信息（例如页面列表、资产、集合或表单），您将需要访问令牌。此令牌与代表用户发送到 Webflow 的任何 API 请求一起使用。

在下面的示例中，我将演示如何构建一个简单的 Webflow 应用程序，该应用程序显示有关用户项目的信息，而不将访问令牌存储在数据库中（尽管在现实场景中，建议存储与用户关联的令牌）。

第 1 步：创建一个新的 Webflow 应用程序

导航到 Webflow 仪表板的“应用程序和集成”选项卡并创建一个新应用程序。提供有关您的应用程序的一般信息，包括其名称、描述和主页 URL。指定所需的权限 - 我将在示例中使用数据客户端应用程序，授予对“站点”的“读取”访问权限。如果需要，您可以稍后调整这些权限。

我们在这里需要的关键信息是为您的应用程序自动生成的Client ID和Client Secret 。暂时将“重定向 URL”字段留空；我们将在下一步中重新审视它。

步骤 2：设置一个新的 Webflow 项目作为前端

创建一个包含两个页面的新 Webflow 项目：主页和站点。在主页上，添加一个标有“显示站点”的按钮，这将触发向 Webflow 请求访问代码。

将按钮的 URL 设置为https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread ，将 YOUR_CLIENT_ID 替换为之前获取的实际客户端 ID。如果您的应用需要额外权限，请调整 URL。

单击此按钮将向用户显示权限屏幕，允许他们选择授予访问权限的项目。授权应用程序后，他们将被重定向到重定向 URL — 请记住复制“站点”页面（您创建的第二个页面）的 URL 并将其粘贴到应用程序的“重定向 URL”字段中。

完成此步骤后，单击“显示站点”会将用户重定向到“站点”页面，访问代码包含在 URL 中。

第 3 步：设置 Xano 项目并创建第一个 API

在 Xano 中创建一个新项目，然后导航到 API 选项卡。添加一个新的 API 组，然后在该组中添加一个新的 API 端点 - 我们将其称为“getToken”。

在“getToken”端点中：

1. 添加名为“accessCode”的文本输入以从前端接收访问代码。

   
   

2. 使用正文参数向https://api.webflow.com/oauth/access_token发出 POST 请求：

   • client_id：您的客户端 ID

   • client_secret：您的客户端秘密

   • grant_type: 授权码

   • code：accessCode（使用输入中的变量）

     
     

   • 

   
   

3. 将第一个 API 请求的输出定义为“accessToken”，它将是与用户关联的访问令牌。

   
   

4. 发出第二个 API 请求（用于演示目的）以检索用户的站点列表 - 对https://api.webflow.com/v2/sites的 GET 请求。包含以下标头：

   • 接受：应用程序/json

   • 授权：accessToken.response.result.access_token

     
     

   • 

   
   

5. 将第二个 API 的输出定义为“siteList”，它表示 Webflow 项目的列表。

   
   

6. 在响应中返回“siteList”。

   
   

7. 复制 API 端点 URL 供以后使用。

步骤 4：从 Webflow 项目配置前端请求

返回 Webflow 项目并打开“站点”页面 - 用户在授予其 Webflow 项目访问权限后将被重定向到的页面。在这里，在自定义代码区域的 </body> 标记之前添加以下 JavaScript 函数。

首先，让我们创建getSites()函数来检索站点：

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

然后，让我们创建showSites()函数来显示检索到的站点：

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

最后，确保getSites()函数在页面加载时运行：

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

现在你就拥有了！我希望本指南对我的非编码人员有帮助！

如果您有任何疑问或需要进一步说明，请随时与我们联系。快乐编码！