在最適化Forms中使用reCAPTCHA using-reCAPTCHA-in-adaptive-forms

Adobe 建議使用新式且可擴充的資料擷取核心元件,用來建立新的最適化表單將最適化表單新增到 AEM Sites 頁面。這些元件代表最適化表單建立方面的重大進步,可確保令人印象深刻的使用者體驗。本文會介紹使用基礎元件編寫最適化表單的舊方法。

版本
文章連結
AEM 6.5
按一下這裡
AEM as a Cloud Service
本文章
套用至
根據Foundation元件的最適化表單。 針對以核心元件為基礎的最適化表單
按一下這裡

CAPTCHA (完全自動化公用圖靈測試來區分電腦和人之間的差異)是一種常用於線上交易的程式,以區分人和自動化程式或機器人。 這會帶來挑戰,並評估使用者的回應,以判斷其是否為人類或機器人與網站互動。 它可防止使用者在測試失敗時繼續進行,並透過防止機器人張貼垃圾郵件或惡意目的來確保線上交易的安全。

AEM Formsas a Cloud Service支援下列CAPTCHA解決方案:

透過Google設定reCAPTCHA服務 google-reCAPTCHA

表單作者可使用Google的reCAPTCHA服務,在最適化Forms中實作reCAPTCHA。 它提供進階驗證碼功能以保護您的網站。 如需reCAPTCHA運作方式的詳細資訊,請參閱Google reCAPTCHA。 AEM Forms支援reCAPTCHA v2和reCAPTCHA Enterprise。 不支援任何其他版本。 另請注意,AEM Forms應用程式上的離線模式不支援最適化Forms中的reCAPTCHA。 您可以根據自己的需求,設定reCAPTCHA服務以啟用:

reCAPTCHA

設定reCAPTCHA Enterprise steps-to-implement-reCAPTCHA-enterprise-in-forms

  1. 建立或選取Google Cloud專案並啟用reCAPTCHA Enterprise API

  2. 取得專案識別碼並建立網站的API金鑰網站金鑰

  3. 建立雲端服務的設定容器。

    1. 前往​ 工具 > 一般 > 設定瀏覽器

    2. 選取資料夾或建立資料夾,然後使用下列步驟啟用雲端設定的資料夾:

      1. 在組態瀏覽器中,選取資料夾並選取​ 屬性
      2. 在[組態內容]對話方塊中,啟用​ 雲端組態
      3. 選取​ 儲存並關閉 ​以儲存設定並結束對話方塊。
  4. 設定reCAPTCHA Enterprise的雲端服務。

    1. 在您的Experience Manager作者執行個體上,移至 tools-1 > Cloud Service
    2. 選取​ reCAPTCHA。 「組態」頁面隨即開啟。 選取您建立的組態容器,並選取​ 建立
    3. 選取版本為reCAPTCHA Enterprise,並指定reCAPTCHA Enterprise服務的名稱、專案ID、網站金鑰和API金鑰(在步驟2中取得)。
    4. 選取金鑰型別,金鑰型別應與您在Google Cloud專案中設定的網站金鑰相同,例如,核取方塊網站金鑰 ​或​ 以分數為基礎的網站金鑰
    5. 指定0到1🔗範圍內的臨界值分數。 分數大於或等於臨界值分數會識別人類互動,否則會被視為機器人互動。
    6. 選取​ 建立 ​以建立雲端服務組態。

reCAPTCHA Enterprise服務啟用後,就可在調適型表單中使用。 請參閱在最適化表單🔗中使用驗證碼。

設定Google reCAPTCHA v2 steps-to-implement-reCAPTCHA-v2-in-forms

  1. 從Google取得reCAPTCHA API金鑰組。 它包含​ 網站金鑰 ​和​ 秘密金鑰

  2. 建立雲端服務的設定容器。

    1. 前往​ 工具 > 一般 > 設定瀏覽器

    2. 選取資料夾或建立資料夾,然後使用下列步驟啟用雲端設定的資料夾:

      1. 在組態瀏覽器中,選取資料夾並選取​ 屬性
      2. 在[組態內容]對話方塊中,啟用​ 雲端組態
      3. 選取​ 儲存並關閉 ​以儲存設定並結束對話方塊。
  3. 設定reCAPTCHA v2的雲端服務。

    1. 在您的AEM作者執行個體上,移至 tools-1 > Cloud Service
    2. 選取​ reCAPTCHA。 「組態」頁面隨即開啟。 選取您建立的組態容器,並選取​ 建立
    3. 將版本選取為reCAPTCHA v2,指定reCAPTCHA服務的名稱、網站金鑰和秘密金鑰(在步驟1中取得),並選取​ 建立 ​以建立雲端服務組態。
    4. 在「編輯元件」對話方塊中,指定在步驟1中取得的網站和秘密金鑰。 選取​ 儲存設定,然後選取​ 確定 ​以完成設定。

    在設定reCAPTCHA服務後,就可用於調適型表單。 如需詳細資訊,請參閱在最適化表單中使用驗證碼

在最適化表單中使用Google reCAPTCHA using-reCAPTCHA

在最適化表單中使用Google reCAPTCHA:

  1. 在編輯模式中開啟最適化表單。

    note note
    NOTE
    確定建立最適化表單時選取的設定容器包含reCAPTCHA雲端服務。 您也可以編輯最適化表單屬性,以變更與表單相關聯的設定容器。
  2. 從元件瀏覽器中,將​ 驗證碼 ​元件拖放至最適化表單上。

    note note
    NOTE
    • 不支援在最適化表單中使用多個驗證碼元件。 此外,不建議在標示為延遲載入的面板或片段中使用驗證碼。
    • reCaptcha有時效性,大約會在幾分鐘後過期。 因此,建議將驗證碼元件放在最適化表單中的提交按鈕之前。
  3. 選取您新增的Captcha元件,並選取 cmppr 以編輯其屬性。

  4. 指定驗證碼介面工具集的標題。 預設值為​ 驗證碼。 如果您不想顯示標題,請選取​ 隱藏標題

  5. 從​ Captcha服務 ​下拉式清單中,選取​ reCAPTCHA ​以啟用reCAPTCHA服務(若您已依照Google🔗的reCAPTCHA服務說明進行設定)。

  6. 從「設定」下拉式清單中選取​ reCAPTCHA Enterprise ​或​ reCAPTCHA v2 ​的組態

    1. 若您選取​ reCAPTCHA Enterprise ​版本,金鑰型別可以是​ 核取方塊 ​或​ 以分數為基礎,其依據是您在設定網站的網站金鑰時的選擇
    note note
    NOTE
    • 在​ 金鑰型別 ​為​ 核取方塊 ​的雲端設定中,如果驗證碼驗證失敗,自訂的錯誤訊息會顯示為內嵌訊息。
    • 在​ 金鑰型別 ​為​ 以分數為 ​的雲端設定中,如果驗證碼驗證失敗,自訂的錯誤訊息會顯示為快顯訊息。
    1. 您可以選取​ Normal ​和​ Compact ​的大小。
    2. 您可以選取​ 繫結參考,在​ 繫結參考 ​中,提交的資料為繫結資料,否則為未繫結資料。 以下是提交表單時,未繫結資料和已繫結資料(以SSN為繫結參考)的XML範例。
    code language-xml
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <afData>
            <afUnboundData>
                <data>
                    <captcha16820607953761>
                        <captchaType>reCaptchaEnterprise</captchaType>
                        <captchaScore>0.9</captchaScore>
                    </captcha16820607953761>
                </data>
            </afUnboundData>
            <afBoundData>
                <Root
                    xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
                    <PersonalDetails>
                        <SSN>371237912</SSN>
                        <FirstName>Sarah </FirstName>
                        <LastName>Smith</LastName>
                    </PersonalDetails>
                    <OtherInfo>
                        <City>California</City>
                        <Address>54 Residency</Address>
                        <State>USA</State>
                        <Zip>123112</Zip>
                    </OtherInfo>
                </Root>
            </afBoundData>
            <afSubmissionInfo>
                <stateOverrides/>
                <signers/>
                <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
                <afSubmissionTime>20230608034928</afSubmissionTime>
            </afSubmissionInfo>
            </afData>
    
    code language-xml
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <afData>
            <afUnboundData>
                <data/>
            </afUnboundData>
            <afBoundData>
                <Root
                    xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
                    <PersonalDetails>
                        <SSN>
                            <captchaType>reCaptchaEnterprise</captchaType>
                            <captchaScore>0.9</captchaScore>
                        </SSN>
                        <FirstName>Sarah</FirstName>
                        <LastName>Smith</LastName>
                    </PersonalDetails>
                    <OtherInfo>
                        <City>California</City>
                        <Address>54 Residency</Address>
                        <State>USA</State>
                        <Zip>123112</Zip>
                    </OtherInfo>
                </Root>
            </afBoundData>
            <afSubmissionInfo>
                <stateOverrides/>
                <signers/>
                <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
                <afSubmissionTime>20230608035111</afSubmissionTime>
            </afSubmissionInfo>
            </afData>
    

    如果您選取​ reCAPTCHA v2 ​版本:

    1. 您可以為reCAPTCHA Widget選取大小為​ Normal ​或​ Compact
    2. 您可以選取​ 隱藏 ​選項,只在可疑活動時才顯示驗證碼質詢。

    已針對最適化表單啟用reCAPTCHA服務。 您可以預覽表單,並檢視驗證碼是否正常運作。 受reCAPTCHA 保護的 ​徽章(如下所示)會顯示在受保護的表單上。
    受reCAPTCHA徽章保護的Google

  7. 儲存屬性。

NOTE
請勿從Captcha服務下拉式清單中選取​ 預設,因為預設的AEM CAPTCHA服務已過時。

根據規則顯示或隱藏驗證碼元件 show-hide-captcha

您可以根據在最適化表單中元件套用的規則,選擇顯示或隱藏驗證碼元件。 選取元件,選取 編輯規則 ,然後選取​ 建立 ​以建立規則。 如需建立規則的詳細資訊,請參閱規則編輯器

例如,只有在表單中的「貨幣值」欄位的值超過25000時,CAPTCHA元件才會顯示在調適型表單中。

選取表單中的​ 貨幣值 ​欄位,並建立下列規則:

顯示或隱藏規則

NOTE
當您選取reCAPTCHA v2組態且大小設定為隱藏時,顯示/隱藏選項仍會停用。

進行驗證碼驗證 validate-captcha

您可以在提交表單時或在使用者動作和條件的基礎上進行最適化表單中的驗證碼驗證。

在表單提交時進行驗證碼驗證 validation-form-submission

若要在提交最適化表單時自動驗證碼:

  1. 選取CAPTCHA元件並選取 cmppr 以檢視元件屬性。
  2. 在​ 驗證碼驗證 ​區段中,選取​ 表單提交時驗證碼驗證
  3. 選取 完成 以儲存元件屬性。

驗證使用者動作和條件的驗證碼 validate-captcha-user-action

若要根據條件和使用者動作來驗證驗證碼:

  1. 選取CAPTCHA元件並選取 cmppr 以檢視元件屬性。
  2. 在​ 驗證碼 ​區段中,選取使用者動作上的​ 驗證碼
  3. 選取 完成 以儲存元件屬性。

Experience Manager Forms提供ValidateCAPTCHA API以使用預先定義的條件來驗證驗證碼。 您可以使用自訂提交動作或在調適型表單中定義元件規則來叫用API。

以下是ValidateCAPTCHA API的範例,使用預先定義的條件來驗證驗證碼:

if (slingRequest.getParameter("numericbox1614079614831").length() >= 5) {
     GuideCaptchaValidatorProvider apiProvider = sling.getService(GuideCaptchaValidatorProvider.class);
        String formPath = slingRequest.getResource().getPath();
        String captchaData = slingRequest.getParameter(GuideConstants.GUIDE_CAPTCHA_DATA);
        if (!apiProvider.validateCAPTCHA(formPath, captchaData).isCaptchaValid()){
            response.setStatus(400);
            return;
        }
    }

此範例表示ValidateCAPTCHA API只有在使用者在填寫表單時指定的數字方塊位數大於5時,才會驗證表單中的驗證碼。

選項1:使用Experience Manager Forms ValidateCAPTCHA API,使用自訂提交動作來驗證CAPTCHA

執行以下步驟來使用ValidateCAPTCHA API,使用自訂提交動作來驗證驗證碼:

  1. 將包含ValidateCAPTCHA API的指令碼新增至自訂提交動作。 如需自訂提交動作的詳細資訊,請參閱為最適化Forms建立自訂提交動作
  2. 從最適化表單的​ 提交 ​屬性中的​ 提交動作 ​下拉式清單中,選取自訂提交動作的名稱。
  3. 選取​ 提交。 系統會根據自訂提交動作的ValidateCAPTCHA API中定義的條件,來驗證驗證碼。

選項2:使用Experience Manager Forms ValidateCAPTCHA API在提交表單前,針對使用者動作驗證驗證碼

您也可以在最適化表單的元件上套用規則,以叫用ValidateCAPTCHA API。

例如,您在最適化表單中新增​ 驗證碼 ​按鈕,並建立規則以在按一下按鈕時叫用服務。

下圖說明如何在按一下​ 驗證碼 ​按鈕時叫用服務:

驗證碼驗證

您可以使用規則編輯器叫用包含ValidateCAPTCHA API的自訂servlet,並根據驗證結果啟用或停用最適化表單的提交按鈕。

同樣地,您可以使用規則編輯器在適用性表單中包含驗證碼的自訂方法。

編輯reCAPTCHA服務網域 reCAPTCHA-service-domain

reCAPTCHA服務使用https://www.recaptcha.net/做為預設網域。 您可以修改設定以設定https://www.google.com/或任何自訂網域名稱,以載入、演算及驗證reCAPTCHA服務。

設定​ 最適化表單和互動式通訊Web通道設定 ​的​ af.cloudservices.recaptcha.domain ​屬性,以指定https://www.google.com/或任何其他自訂網域名稱。 下列JSON檔案顯示範例:

{
  "af.cloudservices.recaptcha.domain": "https://www.google.com/"
}

若要設定值,請使用 AEM SDK 產生 OSGi 設定,並將設定部署至您的 Cloud Service 執行個體。

另請參閱 see-also

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