## 介紹 [Webflow](https://webflow.com/) 是一個用於網站建設和託管的 SaaS 平台，提供一個在線可視化編輯器，簡化了使用最少代碼設計、構建和上線網站的過程。本文將指導你如何將 Logto 整合到你的 Webflow 專案中，實現無縫的使用者驗證。 ## 先決條件 1. 開通自定義代碼功能的 Webflow 帳戶（至少需要 “Basic” 計劃）。 2. 一個運行中的 Logto 實例，無論是自託管還是使用 [Logto Cloud](https://cloud.logto.io/)。 ## 整合步驟 ### 準備 1. 瀏覽到 Logto 控制台，創建一個應用，使用 “Vanilla JS” 模板或 “Create without framework”，並選擇 “單頁應用” 作為應用程序類型。 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” 頁面，只需放置一些靜態文本 “Redirecting…”。我們將使用以下自定義代碼來處理此頁面的登入回調邏輯。 ```html ``` 5. 現在，你可以通過部署你的 Webflow 網站來測試登入流程。部署後，“登入” 按鈕應出現在你的主頁上。點擊它將重定向至由 Logto 託管的登入頁面。登入後，你將首先被重定向到 “Callback” 頁面，在那裡你會看到 “Redirecting…” 文本，然後重定向回你的主頁。 ### 實現登出 1. 在 Logto 控制台中，在應用設置中找到 “Post logout redirect URIs”，然後輸入你的 Webflow 網站 URL `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” 的 “Heading 1” 元素。 2. 成功登入後自動獲取用戶信息，替換 “Heading 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 網站中，只需幾個步驟即可。有關進一步細節，例如獲取 JWT 訪問令牌和處理 RBAC（基於角色的存取控制）等，請參閱我們文檔網站上的 [完整 Webflow 整合指南](https://docs.logto.io/quick-starts/webflow/)。 Webflow 演示可以在[這裡](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/) 訪問。