嘿大家！ 我最近解决了将 Webflow OAuth 集成到我的应用程序中的任务，作为一个不会编码的人，我想分享我使用 Xano 作为后端和 Webflow 作为前端的方法。如果您是一名编码专家，请耐心等待——不要扔烂番茄！这是一个无编码者对另一个无编码者的介绍，希望能让您的旅程更加顺利。 TLDR： 我已将每个步骤编译成视频，供那些喜欢视觉学习的人使用，但您可以在下面找到该过程的详细文本版本。 https://youtu.be/bTUatl6eTec?embedable=true 了解 OAuth 让我们快速掌握 OAuth 运作方式的基本概念。想象一下：您正在度假，想要在国外租一套公寓。您找到一栋可以租用单元的公寓楼。抵达后，业主不会向您提供所有公寓的钥匙，而是向您发送一次性代码以打开您特定公寓的钥匙箱。 您可以使用此代码打开密码箱并取出钥匙卡，以便您在住宿期间进入公寓。 在此类比中，Webflow 代表公寓业主，一次性代码充当访问代码，钥匙卡类似于访问令牌。 如果您需要访问有关用户 Webflow 项目的任何信息（例如页面列表、资产、集合或表单），您将需要访问令牌。此令牌与代表用户发送到 Webflow 的任何 API 请求一起使用。 在下面的示例中，我将演示如何构建一个简单的 Webflow 应用程序，该应用程序显示有关用户项目的信息，而不将访问令牌存储在数据库中（尽管在现实场景中，建议存储与用户关联的令牌）。 第 1 步：创建一个新的 Webflow 应用程序 导航到 Webflow 仪表板的“应用程序和集成”选项卡并创建一个新应用程序。提供有关您的应用程序的一般信息，包括其名称、描述和主页 URL。指定所需的权限 - 我将在示例中使用数据客户端应用程序，授予对“站点”的“读取”访问权限。如果需要，您可以稍后调整这些权限。 我们在这里需要的关键信息是为您的应用程序自动生成的 和 。暂时将“重定向 URL”字段留空；我们将在下一步中重新审视它。 Client ID Client Secret 步骤 2：设置一个新的 Webflow 项目作为前端 创建一个包含两个页面的新 Webflow 项目：主页和站点。在主页上，添加一个标有“显示站点”的按钮，这将触发向 Webflow 请求访问代码。 将按钮的 URL 设置为 ，将 YOUR_CLIENT_ID 替换为之前获取的实际客户端 ID。如果您的应用需要额外权限，请调整 URL。 https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread 单击此按钮将向用户显示权限屏幕，允许他们选择授予访问权限的项目。授权应用程序后，他们将被重定向到 重定向 URL — 请记住复制“站点”页面（您创建的第二个页面）的 URL 并将其粘贴到应用程序的“重定向 URL”字段中。 完成此步骤后，单击“显示站点”会将用户重定向到“站点”页面，访问代码包含在 URL 中。 第 3 步：设置 Xano 项目并创建第一个 API 在 Xano 中创建一个新项目，然后导航到 API 选项卡。添加一个新的 API 组，然后在该组中添加一个新的 API 端点 - 我们将其称为“getToken”。 在“getToken”端点中： 添加名为“accessCode”的文本输入以从前端接收访问代码。 使用正文参数向 发出 POST 请求： https://api.webflow.com/oauth/access_token client_id：您的客户端 ID client_secret：您的客户端秘密 grant_type: 授权码 code：accessCode（使用输入中的变量） 将第一个 API 请求的输出定义为“accessToken”，它将是与用户关联的访问令牌。 发出第二个 API 请求（用于演示目的）以检索用户的站点列表 - 对 的 GET 请求。包含以下标头： https://api.webflow.com/v2/sites 接受：应用程序/json 授权：accessToken.response.result.access_token 将第二个 API 的输出定义为“siteList”，它表示 Webflow 项目的列表。 在响应中返回“siteList”。 复制 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> ID: ${site.id} Workspace ID: ${site.workspaceId} Short Name: ${site.shortName} Time Zone: ${site.timeZone} Created On: ${site.createdOn} Last Updated: ${site.lastUpdated} Last Published: ${site.lastPublished} <img src="${site.previewUrl}" alt="Preview"> `; siteDiv.innerHTML = siteContent; container.appendChild(siteDiv); }); } 最后，确保 函数在页面加载时运行： getSites() document.addEventListener('DOMContentLoaded', function() { getSites(); }); 现在你就拥有了！我希望本指南对我的非编码人员有帮助！ 如果您有任何疑问或需要进一步说明，请随时与我们联系。快乐编码！

Read My Stories

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

从论坛到信息流：社交媒体算法如何塑造数字互动

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

如何将您的工作流程提高 10 倍：17 个必备应用程序

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

从论坛到信息流：社交媒体算法如何塑造数字互动

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

如何将您的工作流程提高 10 倍：17 个必备应用程序

释放人工智能的力量。前沿技术的系统评价：摘要与介绍

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps