如何在 Webflow 中啟用和集成 Google reCAPTCHA [完整指南]

社區資源
1

如何在 Webflow 中使用 Google reCAPTCHA

在當今數字時代，保護網站表單免受機器人和垃圾郵件攻擊至關重要。Google reCAPTCHA 作為一個強大的防護工具，可以有效區分真實用戶和自動化機器人，同時確保良好的用戶體驗。本文將詳細介紹如何在 Webflow 開發項目中啟用和集成 Google reCAPTCHA，幫助您提升網站的安全性能。

了解 Google reCAPTCHA 版本差異

在開始集成前，了解不同版本的 reCAPTCHA 很重要：

版本 特點 最佳應用場景
reCAPTCHA v2 需要用戶點擊復選框或解答挑戰（如識別圖片） 需要可見安全措施的網站，如登錄表單、聯繫表單或具有高機器人流量的結帳頁面
reCAPTCHA v3 在後台運行，基於用戶與網站的互動評分，無需用戶交互 優先考慮無障礙用戶體驗的網站，如電子商務平台或訂閱服務

值得注意的是，Webflow 原生只支持 reCAPTCHA v2 的集成，而 v3 則需要自定義代碼實現。

在 Webflow 中啟用 reCAPTCHA v2（原生支持方法）

1. 獲取 Google reCAPTCHA 密鑰

  1. 訪問 Google reCAPTCHA 管理頁面（透過 Webflow 表單設置中的鏈接）
  2. 登入您的 Google 帳戶
  3. 點擊「註冊新網站」
  4. 填寫網站標籤（命名您的網站）
  5. 選擇 reCAPTCHA 類型為「Challenge v2」（Webflow 目前僅支持此類型）
  6. 添加您的網站域名（包括主域名和測試域名）
  7. 接受服務條款並提交
  8. 系統將生成站點密鑰（Site Key）和密鑰（Secret Key）

2. 在 Webflow 表單中添加 reCAPTCHA 元素

  1. 在 Webflow 設計器中，打開包含表單的頁面
  2. 點擊「+」圖標，在「表單」類別中找到「reCAPTCHA」元素
  3. 將此元素拖放到您的表單內（可以放在表單的任何位置）
  4. 為 reCAPTCHA 元素添加適當的樣式和間距

3. 配置網站設置

  1. 進入「項目設置」>「網站設置」
  2. 點擊左側的「表單」選項卡
  3. 向下滾動找到 reCAPTCHA 設置
  4. 將您從 Google 獲得的「站點密鑰」和「密鑰」分別粘貼到相應字段
  5. 啟用 reCAPTCHA 選項

4. 發布並測試

  1. 發布網站
  2. 測試表單，確認 reCAPTCHA 正常運作
  3. 提交表單時，用戶需要勾選「我不是機器人」復選框才能成功提交

移動端優化技巧

對於移動設備，特別是較小屏幕的手機，reCAPTCHA 元素可能會被截斷。解決方法是：

  1. 選擇 reCAPTCHA 元素
  2. 點擊「設置」
  3. 添加自定義屬性：
    • 名稱：data-size
    • 值：compact
  4. 這會使 reCAPTCHA 在移動設備上顯示為緊湊版本

使用 Finsweet 組件實現 Cookie 合規的 reCAPTCHA

如果您需要確保 reCAPTCHA 僅在用戶接受 Cookie 後加載，可以使用 Finsweet 的組件：

  1. 移除 Webflow 原生的 reCAPTCHA
  2. 在表單中添加一個 ID 為「recaptcha」的 Div 塊
  3. 替換腳本中的站點密鑰
  4. 在網站設置中禁用 reCAPTCHA
  5. 在網站設置中移除站點密鑰
  6. 發布項目

集成 reCAPTCHA v3（需要自定義代碼）

雖然 Webflow 不原生支持 v3，但可以使用自定義代碼實現：

  1. 從 Google 獲取 reCAPTCHA v3 的站點密鑰
  2. 將以下腳本添加到網站的頭部：
<script src="https://www.google.com/recaptcha/api.js?render=your_site_key"></script>
  1. 添加自定義 JavaScript 來處理表單提交：
<script>
grecaptcha.ready(function() {
  document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默認表單提交
    grecaptcha.execute('your_site_key', {action: 'submit'}).then(function(token) {
      document.getElementById('g-recaptcha-response').value = token;
      e.target.submit(); // 以程序方式提交表單
    });
  });
});
</script>
  1. 在表單中添加一個隱藏的輸入字段來存儲 reCAPTCHA 令牌

為什麼要同時註冊主域名和測試域名

在註冊 reCAPTCHA 時，建議同時添加主域名和測試域名，原因有：

  1. 開發者通常在測試環境中測試新功能（包括 reCAPTCHA）後再部署到線上
  2. 如果測試域名未註冊，開發者可能會遇到 reCAPTCHA 服務無法正常運行的問題
  3. 這種不一致可能導致在測試期間忽略安全漏洞
  4. 確保 reCAPTCHA 在開發環境和生產環境中表現一致

確保 reCAPTCHA 集成的 Cookie 合規性

在集成 Google reCAPTCHA 時確保符合 GDPR 和 Cookie 法規非常重要。以下是一些關鍵步驟：

1. 實施 Cookie 橫幅

在加載 Google reCAPTCHA 之前，您必須通過 Cookie 橫幅獲得用戶的明確同意。這個橫幅應該：

  • 清晰地告知用戶 reCAPTCHA 收集的數據類型（如 IP 地址、Cookie、鼠標移動、設備設置）
  • 提供一個用戶可以主動同意使用 Cookie 的選擇機制
  • 為不願意同意的用戶提供退出選項

2. 在獲得同意前阻止 reCAPTCHA 加載

為了符合 GDPR，在用戶同意前 reCAPTCHA 不應該加載。使用如 CCM19 等工具或自定義腳本來初始阻止 reCAPTCHA 並僅在獲得同意後激活它。

3. 更新隱私政策

在您的隱私政策中包含有關 Google reCAPTCHA 的詳細信息：

  • 指明收集的數據類型（例如 Cookie、IP 地址、用戶行為）
  • 解釋數據收集的目的以及如何處理
  • 披露任何第三方數據傳輸情況
  • 提供用戶隨時撤銷同意的說明

故障排除和常見問題

無效站點密鑰錯誤

如果遇到「無效站點密鑰」錯誤：

  1. 確認是否正確複製了完整的密鑰
  2. 重新生成新的密鑰
  3. 清除瀏覽器緩存
  4. 確保域名在 reCAPTCHA 設置中正確註冊

後端集成問題

如果前端顯示正常但後端驗證失敗：

  1. 檢查密鑰是否正確配置
  2. 確認 Webflow 表單設置中的配置
  3. 重新發布網站以應用更改

企業版 reCAPTCHA 集成

Google 現已推出 reCAPTCHA Enterprise 版本，但 Webflow 的集成流程略有不同：

  1. 在 Google Cloud 控制台 設置 reCAPTCHA Enterprise 項目
  2. 生成站點密鑰
  3. 注意 Enterprise 版本可能不提供傳統的「密鑰」，但 Webflow 依然需要它
  4. 參考 Google Cloud 文檔了解最新的集成方法

結論

在 Webflow 中集成 Google reCAPTCHA 是提高網站安全性的重要步驟。根據您的需求和技術能力，可以選擇使用原生支持的 v2 或通過自定義代碼實現 v3。無論選擇哪種方式，都能有效減少垃圾提交，保護您的網站數據。

隨著技術的發展，reCAPTCHA 也在不斷演進，建議定期檢查 Google 和 Webflow 的最新文檔，以確保您的集成方法保持最佳狀態。最終，成功的 reCAPTCHA 集成應該在提供安全保護的同時，確保良好的用戶體驗。

需要專業的網站安全解決方案？Tenten.co 的專業團隊可以幫助您實現各種網站安全措施，包括 reCAPTCHA 的完美集成。我們提供從安全評估到全面實施的一站式服務，確保您的網站既安全又符合所有相關法規。立即預約免費諮詢，讓我們共同打造一個更安全的數字體驗。