繁體中文（台灣）
  • oidc
  • webflow
  • authentication

與 Webflow 整合

這是一份逐步指引，幫助你將 Webflow 與 Logto 整合。

Charles
Charles
Developer

不要在使用者認證上浪費數週時間
使用 Logto 更快地發布安全應用程式。幾分鐘內整合使用者認證，專注於您的核心產品。
立即開始
Product screenshot

介紹

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() 來引用。
登入按鈕設置
  1. 現在讓我們在主頁上添加一些頁面級自定義代碼。點擊頁面菜單上的齒輪圖標，然後在底部找到自定義代碼區域。粘貼以下代碼以綁定登入按鈕的點擊事件處理程序。
編輯頁面設置
  1. 在 Webflow 中創建一個新的 “Callback” 頁面，只需放置一些靜態文本 “Redirecting…”。 我們將使用以下自定義代碼來處理此頁面的登入回調邏輯。
  1. 現在，你可以通過部署你的 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/ 訪問。