繁體中文（香港）
  • oidc
  • webflow
  • authentication

與 Webflow 整合

逐步指南，幫助你將 Webflow 與 Logto 整合。

Charles
Charles
Developer

介紹

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

本文將引導你如何將 Logto 整合到你的 Webflow 專案中，實現無縫用戶身份驗證。

先決條件

  1. 具有自定義代碼功能的 Webflow 帳戶（至少需要 “基礎” 計劃）。
  2. 正在運行的 Logto 實例，可以是自託管或使用 Logto Cloud。

整合步驟

準備工作

  1. 前往 Logto 控制台，使用 “Vanilla JS” 模板或 “不使用框架創建” 創建一個應用程式，並選擇 “單頁應用程式” 作為應用程式類型。
  2. 在 Webflow 儀表板中，創建一個新網站。

整合 JS SDK

在這一步中，我們將向你的網站添加全局級別的自定義代碼。由於 Webflow 是一個靜態網站，我們將利用 @logto/browser (Vanilla JS) SDK 進行用戶身份驗證。由於不能使用 NPM，我們將通過 CDN 服務，如 jsdelivr.com ，導入 SDK。

  1. 在 Webflow 儀表板上，將滑鼠懸停在你新創建的網站上，並點擊右上角的 “齒輪” 圖示。
  2. 在打開的設置頁面中，找到左側導航菜單中的 “自定義代碼”，並將以下 JavaScript 代碼粘貼到 “頁首代碼” 區域。你可以在 Logto 應用程式詳細資訊中找到你的應用 ID 和端點 URL。

實現登入

  1. 前往 Logto 控制台，在應用設定中，找到 “重定向 URI” 欄位，並輸入 https://your-awesome-site.webflow.io/callback，然後點擊 “儲存更改”。
  2. 返回 Webflow 設計器，在首頁添加一個 “登入” 按鈕。為了簡化本教程，我們還將為該按鈕分配一個 ID “sign-in” 以供後續使用 getElementById() 引用。
登錄按鈕設置
  1. 現在我們來為首頁添加一些頁面級的自定義代碼。點擊頁面菜單上的齒輪圖標，並在底部找到自定義代碼部分。粘貼以下代碼以綁定登錄按鈕的點擊處理程序。
��編輯頁面設置
  1. 在 Webflow 中創建一個新的 “回調” 頁面，並在上面放置一些靜態文本 “正在重定向...” 。我們將使用以下自定義代碼處理此頁面的登錄回調邏輯。
  1. 現在你可以通過部署 Webflow 網站來測試登入流程。部署後，“登入” 按鈕應該會出現在你的首頁。點擊它即可導航到 Logto 托管的登入頁面。登入後，你將首先被重定向到 “回調” 頁面，在那裏可以看到 “正在重定向...” 文本，然後返回到你的首頁。

實現登出

  1. 在 Logto 控制台，找到應用設置中的 “登出後重定向 URI”，然後輸入你的 Webflow 網站 URL https://your-awesome-site.webflow.io。
  2. 返回 Webflow 設計器，並在首頁添加一個 “登出” 按鈕。同樣，為按鈕分配一個 ID “sign-out”，並將以下代碼添加到頁面級的 “自定義代碼” 中。

處理身份驗證狀態

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

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

獲取用戶名並顯示歡迎信息

  1. 在首頁添加一個 ID 為 “container” 的彈性容器，並在容器內插入一個 ID 為 “username” 的 “標題 1” 元素。
  2. 在成功登入後自動獲取 userinfo，替換 “標題 1” 元素中的用戶名，並顯示容器。我們可以通過以下自定義代碼完成此操作。

檢查點：測試你的應用程式

現在，測試你的 Webflow 網站：

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

總結

本教程已經引導你將 Webflow 與 Logto 整合。通過使用 @logto/browser SDK，你可以輕鬆將用戶身份驗證整合到任何 Webflow 網站，只需幾個步驟。

請參考我們文檔網站上的 完整 Webflow 整合指南 以獲取更多詳情，例如獲取 JWT 訪問令牌和處理 RBAC（基於角色的訪問控制）等。

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