## 介紹 [Webflow](https://webflow.com/) 是一個用於網站構建和託管的 SaaS 平台，提供線上可視化編輯器，簡化了使用最少代碼設計、構建和發布網站的過程。本文將引導你如何將 Logto 整合到你的 Webflow 專案中，實現無縫用戶身份驗證。 ## 先決條件 1. 具有自定義代碼功能的 Webflow 帳戶（至少需要 “基礎” 計劃）。 2. 正在運行的 Logto 實例，可以是自託管或使用 [Logto Cloud](https://cloud.logto.io/)。 ## 整合步驟 ### 準備工作 1. 前往 Logto 控制台，使用 “Vanilla JS” 模板或 “不使用框架創建” 創建一個應用程式，並選擇 “單頁應用程式” 作為應用程式類型。 2. 在 Webflow 儀表板中，創建一個新網站。 ### 整合 JS SDK 在這一步中，我們將向你的網站添加全局級別的自定義代碼。由於 Webflow 是一個靜態網站，我們將利用 **`@logto/browser`** (Vanilla JS) SDK 進行用戶身份驗證。由於不能使用 NPM，我們將通過 CDN 服務，如 [jsdelivr.com](https://www.jsdelivr.com/) ，導入 SDK。 1. 在 Webflow 儀表板上，將滑鼠懸停在你新創建的網站上，並點擊右上角的 “齒輪” 圖示。 2. 在打開的設置頁面中，找到左側導航菜單中的 “自定義代碼”，並將以下 JavaScript 代碼粘貼到 “頁首代碼” 區域。你可以在 Logto 應用程式詳細資訊中找到你的應用 ID 和端點 URL。 ```html ``` ### 實現登入假設你的 Webflow 網站運行在 `https://your-awesome-site.webflow.io`。 1. 前往 Logto 控制台，在應用設定中，找到 “重定向 URI” 欄位，並輸入 `https://your-awesome-site.webflow.io/callback`，然後點擊 “儲存更改”。 2. 返回 Webflow 設計器，在首頁添加一個 “登入” 按鈕。為了簡化本教程，我們還將為該按鈕分配一個 ID “sign-in” 以供後續使用 `getElementById()` 引用。登錄按鈕設置

3. 現在我們來為首頁添加一些頁面級的自定義代碼。點擊頁面菜單上的齒輪圖標，並在底部找到自定義代碼部分。粘貼以下代碼以綁定登錄按鈕的點擊處理程序。編輯頁面設置

```html ``` 4. 在 Webflow 中創建一個新的 “回調” 頁面，並在上面放置一些靜態文本 “正在重定向...” 。我們將使用以下自定義代碼處理此頁面的登錄回調邏輯。 ```html ``` 5. 現在你可以通過部署 Webflow 網站來測試登入流程。部署後，“登入” 按鈕應該會出現在你的首頁。點擊它即可導航到 Logto 托管的登入頁面。登入後，你將首先被重定向到 “回調” 頁面，在那裏可以看到 “正在重定向...” 文本，然後返回到你的首頁。 ### 實現登出 1. 在 Logto 控制台，找到應用設置中的 “登出後重定向 URI”，然後輸入你的 Webflow 網站 URL `https://your-awesome-site.webflow.io`。 2. 返回 Webflow 設計器，並在首頁添加一個 “登出” 按鈕。同樣，為按鈕分配一個 ID “sign-out”，並將以下代碼添加到頁面級的 “自定義代碼” 中。 ```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. 在成功登入後自動獲取 userinfo，替換 “標題 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. 部署並訪問你的網站 URL，“登入” 按鈕應該是可見的。 2. 單擊登入按鈕，SDK 將啟動登入過程，將你重定向到 Logto 登入頁面。 3. 登入成功後，你將被重定向回你的網站，看到用戶名和登出按鈕。 4. 單擊登出按鈕即可登出。 ## 總結本教程已經引導你將 Webflow 與 Logto 整合。通過使用 **`@logto/browser`** SDK，你可以輕鬆將用戶身份驗證整合到任何 Webflow 網站，只需幾個步驟。請參考我們文檔網站上的 [完整 Webflow 整合指南](https://docs.logto.io/quick-starts/webflow/) 以獲取更多詳情，例如獲取 JWT 訪問令牌和處理 RBAC（基於角色的訪問控制）等。可以在這裡找到 Webflow 演示 [here](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)，只讀模式，並且部署的網站可以在 [https://charless-trendy-site-f191c0.webflow.io/](https://charless-trendy-site-f191c0.webflow.io/) 找到。