與 Webflow 整合

介紹#

Webflow 是一個用於網站建設和託管的 SaaS 平台，提供一個在線可視化編輯器，簡化了使用最少代碼設計、構建和上線網站的過程。

本文將指導你如何將 Logto 整合到你的 Webflow 專案中，實現無縫的使用者驗證。

先決條件#

1. 開通自定義代碼功能的 Webflow 帳戶（至少需要 “Basic” 計劃）。
2. 一個運行中的 Logto 實例，無論是自託管還是使用 Logto Cloud。

整合步驟#

準備#

1. 瀏覽到 Logto 控制台，創建一個應用，使用 “Vanilla JS” 模板或 “Create without framework”，並選擇 “單頁應用” 作為應用程序類型。
2. 在 Webflow 儀表板中創建一個新站點。

整合 JS SDK#

此步驟中，我們將為你的網站添加全局級自定義代碼。由於 Webflow 是靜態網站，我們將利用 @logto/browser (Vanilla JS) SDK 進行使用者驗證。由於不能使用 NPM，我們將通過 jsdelivr.com 等 CDN 服務匯入我們的 SDK。

1. 在 Webflow 儀表板上，懸停在你新創建的站點上，然後點擊右上角的 “齒輪” 圖示。
2. 在打開的設置頁面中，找到左側導航菜單中的 “Custom code”，然後將以下 JavaScript 代碼粘貼到 “Head code” 區域中。 你可以在 Logto 應用詳情中找到你的應用 ID 和端點 URL。

實現登入#

1. 前往 Logto 控制台，在應用設置中，找到 “Redirect URIs” 欄位，輸入 https://your-awesome-site.webflow.io/callback，然後點擊 “儲存變更”。
2. 返回 Webflow 設計器，在主頁中添加一個 “登入” 按鈕。為了簡化本教程，我們還會給按鈕分配一個 ID “sign-in” 以便稍後使用 getElementById() 來引用。

3. 現在讓我們在主頁上添加一些頁面級自定義代碼。點擊頁面菜單上的齒輪圖標，然後在底部找到自定義代碼區域。粘貼以下代碼以綁定登入按鈕的點擊事件處理程序。

4. 在 Webflow 中創建一個新的 “Callback” 頁面，只需放置一些靜態文本 “Redirecting…”。 我們將使用以下自定義代碼來處理此頁面的登入回調邏輯。

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” 中。

處理驗證狀態#

在 Logto SDK 中，通常我們可以使用 logtoClient.isAuthenticated() 方法來檢查驗證狀態，若用戶已登入，值為 true；否則為 false。

在你的 Webflow 網站中，你也可以使用它來程式化地顯示和隱藏登入和登出按鈕。應用以下自定義代碼來相應調整按鈕 CSS。

獲取用戶名並顯示歡迎訊息#

1. 在主頁上添加一個 ID 為 “container” 的彈性容器，並在容器內插入一個 ID 為 “username” 的 “Heading 1” 元素。
2. 成功登入後自動獲取用戶信息，替換 “Heading 1” 元素中的用戶名並顯示容器。 我們可以使用以下自定義代碼來做到這一點。

檢查點：測試你的應用#

現在，測試你的 Webflow 網站：

1. 部署並訪問你網站的 URL，登入按鈕應是可見的。
2. 點擊登入按鈕，SDK 將啟動登入過程，重定向你至 Logto 登入頁面。
3. 登入之後，你將被重定向回到你的網站，看到用戶名和登出按鈕。
4. 點擊登出按鈕以登出。

總結#

本教程已指導你將 Webflow 與 Logto 整合。通過使用 @logto/browser SDK，你可以輕鬆地將使用者驗證整合到任何你的 Webflow 網站中，只需幾個步驟即可。

有關進一步細節，例如獲取 JWT 訪問令牌和處理 RBAC（基於角色的存取控制）等，請參閱我們文檔網站上的 完整 Webflow 整合指南。

Webflow 演示可以在這裡找到，只讀模式可用，已部署的網站可在 https://charless-trendy-site-f191c0.webflow.io/ 訪問。