reCAPTCHA 與 AEM Forms as a Cloud Service 適用的 Edge Delivery Services 搭配使用

reCAPTCHA 是一種受歡迎的工具,用來保護網站免遭詐騙活動、垃圾郵件和濫用。在 Edge Delivery Services 中,最適化 Forms 區塊有新增 Google reCAPTCHA 的功能,可區分人類和機器人。此功能可讓使用者保護其網站免遭垃圾郵件和濫用。
例如,考慮一個收集資料的查詢表單,例如開始和結束旅行日期、房間預算、預估旅行成本和旅行者資訊。在這種情況下,惡意使用者可能會利用該表單來發送網路釣魚電子郵件,或使用垃圾郵件機器人將不相關或有害內容填滿表單。整合 reCAPTCHA 可驗證提交內容是否來自真實使用者,以此提供更高的安全性並有效地減少垃圾郵件。

Edge Delivery Services 僅支援最適化表單區塊的​ 分數型 (v3)-reCAPTCHA

Recaptcha V2 {align="center" width="300"}

閱讀完本文章後,您將學會:

必要條件

為單一表單啟用 Google reCAPTCHA enable-google-recaptchas-for-a-single-form

為單一表單啟用 Google reCAPTCHA 涉及將 Google 的 reCAPTCHA 服務整合到特定網頁表單中,以防止自動化濫用或寄送垃圾郵件。

若要為單一表單啟用 Google reCAPTCHA:

若要開始在 Edge Delivery Services 表單中設定 reCaptcha,請參閱下列試算表,其中包括表單的表單定義。

在專案設定檔中設定 reCAPTCHA 祕密金鑰 configure-secret-key

將使用 Google reCAPTCHA 註冊的網域的 Site Secret 新增至專案設定檔 (.helix/config),其位於 Microsoft SharePoint 或 Google Drive 上的 AEM Project 資料夾中。若要將 Site Secret 新增至設定檔:

  1. 前往您儲存在 Microsoft® SharePoint 或 Google Drive 上的 AEM 專案資料夾。

  2. 在 Microsoft SharePoint 網站的 AEM 專案資料夾中建立 .helix/config.xlsx 檔案,或在 Google Drive 的 AEM 專案資料夾中建立 .helix/config 檔案。

    note note
    NOTE
    這個專案設定檔是試算表,位於 /.helix/config。如果檔案不存在,請建立檔案。
  3. 開啟 config 檔案,並新增以下鍵值對:

    • captcha.secret:Google reCAPTCHA 密鑰值
    • captcha.type:reCAPTCHA v2
    note note
    NOTE

    請參考下方專案設定檔螢幕擷圖:

    專案設定檔

  4. 儲存 config 檔案。

  5. 使用 AEM Sidekick 來預覽和發佈 config 檔案。

將 reCAPTCHA 網站金鑰新增至您的表單中 add-site-key

使用 Google reCAPTCHA 註冊的網域的網站金鑰,將會新增到要保護的表單的試算表中。若要將網站金鑰新增至表單:

  1. 前往 Microsoft® SharePoint 或 Google Drive 的 AEM 專案資料夾,並開啟您的試算表。您也可以為表單建立新的試算表。

  2. 在試算表中插入一行以新增驗證碼的欄位,包括以下詳細資訊:

    • 類型:驗證碼
    • :Google reCAPTCHA 網站金鑰值

    請參閱下方螢幕擷圖,顯示新一列類型為驗證碼的試算表:

    Recaptcha 試算表

    note note
    NOTE
    您可以從 Google reCAPTCHA Admin Console 擷取 reCAPTCHA 金鑰。
  3. 儲存試算表。

  4. 使用 AEM Sidekick 來預覽和發佈試算表。

在表單定義中新增一列後,表單右下角會出現一個 reCAPTCHA 徽章。這樣將確保該表單現在受到保護,避免詐騙活動、垃圾郵件和濫用的影響。

recaptcha-form

為網站上所有表單啟用 reCAPTCHA enable-recaptcha-for-all-the-forms

若要將 Google reCAPTCHA 套用至網站上使用自適應表單區塊的所有表單,請略過先前步驟並將 sitekey 值直接嵌入 recaptcha.js 檔案。若要將網站金鑰值加入 recaptcha.js 檔案:

更新 recaptcha.js 檔案中的 Google reCAPTCHA 網站金鑰

  1. 在本機電腦上開啟對應的 GitHub 存放庫。

  2. 前往 [../Form Block/integrations] 資料夾並開啟 recaptcha.js 檔案。

  3. 用 Google reCAPTCHA 網站金鑰值取代 siteKey

    Recaptcha 適用於所有表單

    note note
    NOTE
    您可以從 Google reCAPTCHA Admin Console 擷取 reCAPTCHA 金鑰。
  4. 儲存 recaptcha.js 檔案。

部署檔案並建置專案

部署已更新的 recaptcha.js 檔案到您的 GitHub 專案,並驗證建置是否成功。

使用 AEM Sidekick 預覽網站

使用 AEM Sidekick 來預覽和發佈網站。

您網站上的所有表單開始出現 reCAPTCHA 徽章。

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab