為您的 Webflow 網站啟用 Google reCAPTCHA：終極指南

, ,
1

為您的 Webflow 網站啟用 Google reCAPTCHA：終極指南

在現今的數位環境中，保護您的網站表單免受垃圾郵件和自動機器人程式的侵害至關重要。Google reCAPTCHA 提供了一種強大而有效的方法來區分人類用戶和惡意機器人，確保您收到的表單提交是真實的。Webflow 作為領先的無代碼網站開發平台，提供了與 Google reCAPTCHA 的無縫整合。在本篇詳盡的指南中，我們將引導您完成在 Webflow 專案中設定和啟用 Google reCAPTCHA 的每一個步驟。

Google reCAPTCHA 的重要性

網站表單，無論是用於聯繫、註冊還是電子商務，都是潛在的垃圾郵件目標。自動化腳本（機器人）可以提交數千個虛假請求，淹沒您的收件匣、扭曲您的分析數據，甚至可能導致安全漏洞。透過實施 Google reCAPTCHA，我們可以在不影響真實用戶體驗的情況下，有效地阻擋這些自動化攻擊。它增加了一層安全驗證，要求用戶執行簡單的任務（如勾選核取方塊或識別圖像），或者在背景中分析用戶行為（對於較新版本），以驗證其人類身份。

前置準備：開始之前

在我們深入整合過程之前，請確保您已準備好以下項目：

  1. 有效的 Google 帳戶：您需要一個 Google 帳戶才能存取 Google reCAPTCHA 管理控制台並為您的網站生成必要的密鑰。
  2. 一個 Webflow 專案：您需要有一個正在進行或已完成的 Webflow 網站，其中包含您希望保護的表單。
  3. 您的網站網域：您需要知道將要部署 reCAPTCHA 的確切網域（例如 yourwebsite.com）或子網域（例如 form.yourwebsite.com）。

步驟一：產生 Google reCAPTCHA 金鑰

我們的第一步是在 Google 端設定 reCAPTCHA 並取得將在 Webflow 中使用的 Site Key（網站金鑰）和 Secret Key（密鑰）。

  1. 前往 Google reCAPTCHA 管理控制台：使用您的 Google 帳戶登入 Google reCAPTCHA 網站，並導航至 v3 Admin Console（即使您打算使用 v2，管理也在這裡進行）。
  2. 註冊新網站：點擊「+」號或「Create」按鈕來註冊一個新的網站配置。
    • 標籤 (Label)：為您的設定提供一個易於識別的名稱，例如您的網站名稱。
    • reCAPTCHA 類型 (reCAPTCHA type)：這是關鍵的選擇。Webflow 主要原生支援 reCAPTCHA v2。在 v2 中，您有兩個主要選項：
      • “I’m not a robot” Checkbox（「我不是機器人」核取方塊）：這是最常見的選項，會在您的表單上顯示一個核取方塊，用戶需要點擊它。我們強烈建議從這個選項開始，因為它與 Webflow 的內建整合最為直接。
      • Invisible reCAPTCHA badge（隱形 reCAPTCHA 徽章）：此選項不會顯示核取方塊，而是在背景中運作。它通常會在頁面右下角顯示一個小的 reCAPTCHA 徽章。雖然它提供的用戶體驗更流暢，但在 Webflow 中的原生整合主要針對核取方塊版本。
      • reCAPTCHA v3：這是一個較新的版本，完全在背景運作，根據用戶的互動返回一個分數，您需要根據分數決定是否信任該用戶。雖然功能強大，但其與 Webflow 表單的原生整合不如 v2 直接，可能需要自訂代碼。為了與 Webflow 內建功能達到最佳兼容性，我們建議選擇 reCAPTCHA v2 “I’m not a robot” Checkbox。
    • 網域 (Domains)：輸入您將使用此 reCAPTCHA 的 Webflow 網站的完整網域。如果您使用 www 子網域（例如 www.yourwebsite.com），請同時添加根網域（yourwebsite.com）。如果您計劃在 webflow.io 的暫存網域上進行測試，也請務必添加該網域（例如 yourproject.webflow.io）。每行輸入一個網域。
    • 擁有者 (Owners)：您的 Google 帳戶將自動列為擁有者。您可以根據需要添加其他管理員。
    • 接受 reCAPTCHA 服務條款：仔細閱讀並勾選接受框。
    • 提交：點擊「Submit」或「Register」。
  3. 取得金鑰：提交後，您將看到兩個重要的金鑰：Site Key（網站金鑰） 和 Secret Key（密鑰）。請務必妥善保管這些金鑰，尤其是 Secret Key，絕不能在前端代碼中暴露。我們將在下一步中需要這些金鑰。

步驟二：在 Webflow 中整合 reCAPTCHA 金鑰

現在我們已經擁有了來自 Google 的金鑰，接下來需要將它們添加到您的 Webflow 專案設定中。

  1. 開啟 Webflow 專案設定：登入您的 Webflow 帳戶，打開您想要啟用 reCAPTCHA 的專案。點擊左上角的 Webflow 圖示，然後選擇 Project Settings。
  2. 導航至 Forms 標籤：在 Project Settings 頁面中，找到並點擊頂部導航欄中的 Forms 標籤。
  3. 啟用 Google reCAPTCHA：向下滾動到 reCAPTCHA 部分。您會看到 Google reCAPTCHA 的選項。
  4. 輸入金鑰：將您在步驟一中從 Google 獲取的 Site Key (Public Key) 複製並貼到 Webflow 中的 Site Key 欄位。同樣地，將 Secret Key (Private Key) 複製並貼到 Secret Key 欄位。請仔細檢查，確保沒有複製多餘的空格或字符。
  5. 選擇 reCAPTCHA 版本：確保選擇的版本（通常是 reCAPTCHA v2）與您在 Google 端註冊時選擇的版本一致。
  6. 儲存變更：點擊頁面頂部或底部的 Save Changes 按鈕。

此時，您的 Webflow 專案已經配置了 Google reCAPTCHA 的憑證。下一步是將 reCAPTCHA 元素實際添加到您網站上的特定表單中。

步驟三：將 reCAPTCHA 添加到您的 Webflow 表單

僅僅在專案設定中輸入金鑰並不足夠；我們還需要在 Webflow Designer 中明確地為每個需要保護的表單啟用 reCAPTCHA。

  1. 開啟 Webflow Designer：返回您的 Webflow 專案儀表板，點擊 Designer 按鈕進入視覺化編輯器。
  2. 選擇目標表單：導航到包含您想要添加 reCAPTCHA 的表單的頁面。在畫布上選擇該 Form Block 元素。
  3. 開啟表單設定：選中 Form Block 後，查看右側的 Settings 面板（齒輪圖示）。
  4. 啟用 reCAPTCHA：在 Form Settings 中，您應該會看到一個 Enable reCAPTCHA 的開關或選項（前提是您已在 Project Settings > Forms 中正確配置了金鑰）。將此開關切換到啟用狀態。
  5. 驗證 reCAPTCHA 元素：啟用後，如果使用的是 reCAPTCHA v2 Checkbox，您應該會看到一個 reCAPTCHA 元素（通常顯示為一個佔位符或實際的核取方塊）自動添加到了您的表單結構中，通常位於提交按鈕之前。您可以在 Navigator 面板中確認它的存在。
  6. 對所有需要保護的表單重複此步驟：如果您有多個表單需要保護，請對每一個表單重複步驟 2-5。
  7. 發佈您的網站：完成所有表單的 reCAPTCHA 啟用後，點擊 Designer 右上角的 Publish 按鈕，並選擇您要發佈到的網域（包括您的暫存網域和最終的自訂網域）。只有在發佈後，reCAPTCHA 才會在您的線上網站上生效。

步驟四：測試 reCAPTCHA 實施

發佈網站後，至關重要的一步是測試以確保 reCAPTCHA 按預期工作。

  1. 訪問您的線上網站：在瀏覽器中打開您剛剛發佈的網站頁面，導航到包含已啟用 reCAPTCHA 的表單。
  2. 檢查 reCAPTCHA 顯示：確認 reCAPTCHA v2 Checkbox（如果您選擇了這個版本）是否正確顯示在表單上。
  3. 嘗試提交表單（正常情況）：
    • 填寫表單的必填欄位。
    • 點擊 reCAPTCHA 核取方塊。您可能會被要求完成一個簡單的挑戰（例如選擇包含特定物件的圖像），或者如果 Google 的風險分析認為您是低風險用戶，它可能會直接驗證通過（顯示綠色勾號）。
    • 點擊提交按鈕。表單應該成功提交，並且您應該看到 Webflow 表單設定中配置的成功訊息。
  4. 嘗試提交表單（不點擊 reCAPTCHA）：
    • 填寫表單欄位。
    • 不要點擊 reCAPTCHA 核取方塊。
    • 嘗試點擊提交按鈕。表單提交應該會失敗，並且通常會顯示一條錯誤訊息，提示您需要完成 reCAPTCHA 驗證。
  5. 檢查表單提交記錄：登入您的 Webflow 帳戶，進入 Project Settings > Forms。檢查 Form Submissions 部分，確認成功的測試提交已記錄，並且沒有來自測試期間未通過 reCAPTCHA 驗證的提交記錄。
  6. 檢查 Google reCAPTCHA 分析：您也可以回到 Google reCAPTCHA 管理控制台，查看您網站的統計數據，了解有多少請求被允許，有多少被阻止。

reCAPTCHA 版本選擇考量

雖然我們建議使用 reCAPTCHA v2 Checkbox 以便與 Webflow 實現最佳原生整合，但了解不同版本之間的差異有助於做出明智決策：

功能/版本 reCAPTCHA v2 Checkbox reCAPTCHA v2 Invisible reCAPTCHA v3
用戶互動 需要點擊核取方塊 (有時需解謎) 通常無需互動，徽章顯示在頁面上 完全無需互動，背景分析
Webflow 原生支援 最佳 (內建開關直接啟用) 有限 (可能需手動調整，徽章位置可能需 CSS) 不直接支援 (需要自訂代碼處理分數)
用戶體驗 稍微中斷流程 更流暢 最流暢
安全性 強 強 非常強，但需要您根據分數實施邏輯
實施複雜度 最低 中等 最高 (在 Webflow 環境下)
適用場景 大多數標準 Webflow 表單 希望最小化用戶干擾，且願意做一些微調的場景 需要精細控制、監控用戶行為、且願意寫代碼的高級場景

對於絕大多數 Webflow 用戶而言，reCAPTCHA v2 “I’m not a robot” Checkbox 是最實用、最容易實施且能有效防止垃圾郵件的選擇。

疑難排解：常見問題與解決方案

如果在設定過程中遇到問題，請檢查以下幾點：

  • 金鑰不匹配或錯誤：確保您從 Google 複製的 Site Key 和 Secret Key 與您在 Webflow Project Settings > Forms 中輸入的完全一致，沒有多餘空格或遺漏字符。
  • 網域配置錯誤：在 Google reCAPTCHA 管理控制台中註冊的網域必須與您實際使用 Webflow 網站的網域完全匹配。包括 www 和非 www 版本，以及 webflow.io 的暫存網域（如果您在上面測試）。
  • 未在 Designer 中啟用 reCAPTCHA：僅在 Project Settings 中添加金鑰是不夠的，您必須進入 Designer，選擇特定表單，並在 Settings 面板中啟用 reCAPTCHA。
  • 未發佈網站：所有在 Designer 或 Project Settings 中的更改都需要發佈後才能在線上網站生效。
  • 瀏覽器擴充功能衝突：某些瀏覽器擴充功能（尤其是隱私或廣告攔截相關的）可能會干擾 reCAPTCHA 的正常運作。嘗試在無痕模式或禁用擴充功能的情況下測試。
  • Webflow 服務狀態：極少數情況下，Webflow 或 Google reCAPTCHA 服務本身可能遇到臨時問題。您可以檢查他們的官方狀態頁面。

透過遵循本指南中的步驟，我們能夠有效地為您的 Webflow 網站表單部署強大的 Google reCAPTCHA 保護。這不僅能顯著減少垃圾郵件提交，還能確保您從真實用戶那裡獲得高質量的互動，進而提升網站的整體效能和安全性。

在 Tenten.co，我們專精於利用如 Webflow 等尖端技術，為客戶打造高效、安全且具吸引力的數位體驗。從網站設計、開發到 SEO 優化和安全加固，我們的團隊擁有豐富的經驗與專業知識。如果您在實施 Google reCAPTCHA 或其他 Webflow 功能時需要專業協助，或者希望全面提升您的線上形象，我們隨時準備提供支援。立即預約一次免費諮詢會議，讓我們探討如何為您的業務目標量身定制最佳解決方案。

立即預約免費諮詢會議