## 介绍 [Webflow](https://webflow.com/) 是一个用于构建和托管网站的 SaaS 平台，提供了一个在线可视化编辑器，可以简化设计、构建和启动网站的过程，并且几乎不需要编写代码。本文将指导你如何将 Logto 集成到你的 Webflow 项目中，从而实现无缝的用户认证。 ## 先决条件 1. 一个启用了自定义代码功能的 Webflow 账户（至少需要“Basic”计划）。 2. 一个正在运行的 Logto 实例，可以是自托管的实例，也可以使用 [Logto Cloud](https://cloud.logto.io/)。 ## 集成步骤 ### 准备 1. 进入 Logto 控制台，使用“Vanilla JS”模板或“创建无框架”创建一个应用程序，并选择“单页应用程序”作为应用类型。 2. 在 Webflow 仪表板上，创建一个新站点。 ### 集成 JS SDK 在此步骤中，我们将向你的网站添加全局级别的自定义代码。由于 Webflow 是一个静态网站，我们将利用 **`@logto/browser`**（Vanilla JS）SDK 进行用户认证。因为无法使用 NPM，我们将通过类似 [jsdelivr.com](https://www.jsdelivr.com/) 的 CDN 服务引入我们的 SDK。 1. 在 Webflow 仪表板上，悬停在你新创建的站点上，点击右上角的“齿轮”图标。 2. 在打开的设置页面中，找到左侧导航菜单中的“Custom code”，然后将以下 JavaScript 代码粘贴到“Head code”部分。你可以在 Logto 应用详情中找到你的应用程序 ID 和端点 URL。 ```html ``` ### 实现登录功能假设你的 Webflow 网站运行在 `https://your-awesome-site.webflow.io`。 1. 前往 Logto 控制台，在应用设置中找到“Redirect URIs”字段，输入 `https://your-awesome-site.webflow.io/callback`，然后点击“保存更改”。 2. 返回 Webflow 设计器，在主页上添加一个“登录”按钮。为了简化教程，我们还将给按钮分配一个 ID “sign-in”，以便后续使用 `getElementById()` 进行引用。登录按钮设置

3. 现在让我们为主页添加一些页面级的自定义代码。点击页面菜单上的齿轮图标，并在底部找到自定义代码部分。粘贴以下代码，以便为登录按钮绑定点击事件处理程序。编辑页面设置

```html ``` 4. 在 Webflow 中创建一个新的“Callback”页面，并简单地放置一些静态文本“正在重定向...”。我们将在这个页面上通过以下自定义代码处理登录回调逻辑。 ```html ``` 5. 现在，你可以通过部署你的 Webflow 网站来测试登录流程。部署后，主页上应会显示“登录”按钮。点击它将跳转到由 Logto 托管的登录页面。登录后，系统将首先将你重定向到“Callback”页面，你可以在那里看到“正在重定向...”的文本，然后再返回你的主页。 ### 实现登出功能 1. 在 Logto 控制台的应用设置中，找到“Post logout redirect URIs”，并输入你的 Webflow 站点网址 `https://your-awesome-site.webflow.io`。 2. 返回 Webflow 设计器，并在你的主页上添加一个“登出”按钮。同样，给按钮分配一个 ID “sign-out”，并将以下代码添加到页面级“Custom code”。 ```js const signOutButton = document.getElementById('sign-out'); const onClickSignOut = () => logtoClient.signOut('https://your-awesome-site.webflow.io'); signOutButton.addEventListener('click', onClickSignOut); ``` ### **处理认证状态** 在 Logto SDK 中，我们通常可以使用 `logtoClient.isAuthenticated()` 方法来检查认证状态，如果用户已登录，值将为 `true`，否则为 `false`。在你的 Webflow 站点中，你也可以用它来编程方式显示和隐藏登录和登出按钮。使用以下自定义代码调整按钮的 CSS 样式。 ```js const isAuthenticated = await logtoClient.isAuthenticated(); signInButton.style.display = isAuthenticated ? 'none' : 'block'; signOutButton.style.display = isAuthenticated ? 'block' : 'none'; ``` ### 获取用户名并显示欢迎消息 1. 在主页上添加一个 ID 为“container”的弹性容器，并在容器中插入一个 ID 为“username”的“标题 1”元素。 2. 在成功登录后自动获取用户信息，替换“标题 1”元素中的用户名，并显示容器。我们可以使用以下自定义代码实现这个功能。 ```js const container = document.getElementById('container'); container.style.display = isAuthenticated ? 'flex' : 'none'; if (isAuthenticated) { (async () => { const user = await logtoClient.fetchUserInfo(); username.innerText = '欢迎回来: ' + user.name; })(); } ``` ### 检查点：测试你的应用程序现在，测试你的 Webflow 网站： 1. 部署并访问你的站点网址，登录按钮应为可见状态。 2. 点击登录按钮，SDK 将启动登录流程，将你重定向到 Logto 登录页面。 3. 登录后，你将被重定向回你的网站，看到用户名和登出按钮。 4. 点击登出按钮以退出登录。 ## 总结本教程指导你如何将 Webflow 与 Logto 集成。通过使用 **`@logto/browser`** SDK，你可以轻松将用户认证集成到你的任意 Webflow 站点中，只需几个步骤。请参阅我们的文档站点上的[完整的 Webflow 集成指南](https://docs.logto.io/quick-starts/webflow/)以获取更多详细信息，比如获取 JWT 访问令牌和处理 RBAC（基于角色的访问控制）等。可以在[这里](https://preview.webflow.com/preview/charless-trendy-site-f191c0?utm_medium=preview_link&utm_source=designer&utm_content=charless-trendy-site-f191c0&preview=0eae5f73661a8a5791787f0438bc29de&workflow=preview)以只读模式查看 Webflow 示例，部署的站点可以在 [https://charless-trendy-site-f191c0.webflow.io/](https://charless-trendy-site-f191c0.webflow.io/) 中找到。