在最適化表單中使用驗證碼

上次更新: 2023-12-21
版本 文章連結
AEM as a Cloud Service 按一下這裡
AEM 6.5 本文章

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

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

AEM Forms支援最適化表單中的驗證碼。 您可以使用Google的reCAPTCHA服務來實作CAPTCHA。

注意
  • AEM Forms支援reCAPTCHA v2和enterprise。 不支援任何其他版本。
  • AEM Forms應用程式上的離線模式不支援適用性表單中的驗證碼。

由Google為最適化Forms設定reCAPTCHA服務

AEM Forms使用者可以使用Google的reCAPTCHA服務,以最適化表單實施驗證碼。 它提供進階驗證碼功能以保護您的網站。 如需reCAPTCHA運作方式的詳細資訊,請參閱 Google reCAPTCHA. reCAPTCHA服務(包括reCAPTCHA v2和reCAPTCHA Enterprise)整合至AEM Forms。 您可以根據自己的需求,設定reCAPTCHA服務以啟用:

reCAPTCHA

設定reCAPTCHA Enterprise

  1. 建立 reCAPTCHA企業專案 啟用方式 reCAPTCHA Enterprise API.

  2. 取得 專案識別碼。

  3. 建立 API金鑰網站的網站金鑰.

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

    1. 前往 「工具」>「一般」>「設定瀏覽器」. 請參閱 設定瀏覽器 檔案以取得詳細資訊。

    2. 請執行以下操作來啟用雲端設定的全域資料夾,或跳過此步驟來建立和設定雲端服務設定的另一個資料夾。

      1. 在設定瀏覽器中,選取 全域 資料夾並選取 屬性.
      2. 在組態內容對話方塊中,啟用 雲端設定.
      3. 選取 儲存並關閉 以儲存組態並結束對話方塊。
    3. 在設定瀏覽器中,選取 建立.

    4. 在建立設定對話方塊中,指定資料夾的標題並啟用 雲端設定.

    5. 選取 建立 以建立為雲端服務設定啟用的資料夾。

  5. 設定reCAPTCHA Enterprise的雲端服務。

    1. 在您的Experience Manager編寫執行個體上,前往 tools-1 > Cloud Service.

    2. 選取 reCAPTCHA. 「組態」頁面隨即開啟。 選取在上一步建立的設定容器,然後選取「 」 建立.

    3. 選取reCAPTCHA Enterprise版本並指定reCAPTCHA Enterprise服務的名稱;專案ID、網站金鑰和API金鑰(在步驟2和3中取得)。

    4. 選取金鑰型別,金鑰型別應與Google雲端專案中設定的網站金鑰相同,例如, 核取方塊網站索引鍵以分數為基礎的網站金鑰.

    5. 指定範圍為0-1的臨界值分數(按一下以進一步瞭解分數)。 分數大於或等於臨界值分數會識別人類互動,否則會被視為機器人互動。

      注意:

      • 表單作者可在適合表單提交不中斷的範圍中指定分數。
    6. 選取 建立 以建立雲端服務設定。

    7. 在「編輯元件」(Edit Component)對話方塊中,指定名稱、專案ID、網站金鑰、API金鑰(在步驟2和3中取得)、選取金鑰型別,然後輸入臨界值分數。 選取 儲存設定 然後選取 確定 以完成設定。

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

reCAPTCHA Enterprise

設定Google reCAPTCHA v2

  1. 取得 reCAPTCHA API金鑰組 來自Google。 它包含 網站金鑰秘密金鑰.

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

    1. 前往 「工具」>「一般」>「設定瀏覽器」. 請參閱 設定瀏覽器 檔案以取得詳細資訊。

    2. 請執行以下操作來啟用雲端設定的全域資料夾,或跳過此步驟來建立和設定雲端服務設定的另一個資料夾。

      1. 在設定瀏覽器中,選取 全域 資料夾並選取 屬性.

      2. 在組態內容對話方塊中,啟用 雲端設定.

      3. 選取 儲存並關閉 以儲存組態並結束對話方塊。

    3. 在設定瀏覽器中,選取 建立.

    4. 在建立設定對話方塊中,指定資料夾的標題並啟用 雲端設定.

    5. 選取 建立 以建立為雲端服務設定啟用的資料夾。

  3. 設定reCAPTCHA v2的雲端服務。

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

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

reCAPTCHA v2

在最適化表單中使用reCAPTCHA

若要在最適化表單中使用reCAPTCHA:

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

    注意

    確定建立最適化表單時選取的設定容器包含reCAPTCHA雲端服務。 您也可以編輯最適化表單屬性,以變更與表單相關聯的設定容器。

  2. 在元件瀏覽器中,拖放 驗證碼 元件至最適化表單。

    注意

    不支援在最適化表單中使用多個驗證碼元件。 此外,不建議在標示為延遲載入的面板或片段中使用驗證碼。

    注意

    驗證碼會區分大小寫,且約一分鐘後過期。 因此,建議將驗證碼元件放在最適化表單中的提交按鈕之前。

  3. 選取您新增的驗證碼元件,然後選取 cmppr 以編輯其屬性。

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

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

  6. 從「設定」下拉式清單中選取設定。

  7. 如果選取的組態版本為reCAPTCHA Enterprise

    1. 您可以選取reCAPTCHA雲端設定,使用 金鑰型別 作為 核取方塊. 在核取方塊索引鍵中,如果驗證碼驗證失敗,自訂的錯誤訊息會顯示為內嵌訊息。 您可以選取大小為 一般精簡.

    2. 您可以選取reCAPTCHA雲端設定,使用 金鑰型別 作為 以分數為基礎. 在以分數為基礎的金鑰型別中,如果驗證碼驗證失敗,自訂的錯誤訊息會顯示為快顯訊息。

    3. 當您選取 繫結參考 提交的資料為已繫結資料,否則為未繫結資料。 以下是提交表單時,未繫結資料和已繫結資料(以SSN為繫結參考)的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>
      
          <?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。 您也可以選取 隱形 選項僅在可疑活動時顯示CAPTCHA質詢。 此 受reCAPTCHA保護 徽章(如下所示)會顯示在受保護的表單上。

      Google受reCAPTCHA徽章保護

    已針對最適化表單啟用reCAPTCHA服務。 您可以預覽表單,並檢視驗證碼是否正常運作。

  8. 儲存屬性。

注意

不要選取 預設 驗證碼服務下拉式清單中,預設的AEM驗證碼服務已過時。

根據規則顯示或隱藏驗證碼元件

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

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

選取 貨幣值 欄位建立下列規則:

顯示或隱藏規則

注意
  • 如果您選取reCAPTCHA v2組態與大小為 隱形 或以reCAPTCHA Enterprise分數為基礎的金鑰,則顯示/隱藏選項不適用。

進行驗證碼驗證

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

在表單提交時進行驗證碼驗證

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

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

驗證使用者動作和條件的驗證碼

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

  1. 選取驗證碼元件並選取 cmppr 以檢視元件屬性。

  2. 驗證碼驗證 區段,選取 使用者動作時進行驗證碼驗證.

  3. 選取 完成 以儲存元件屬性。

    注意

    如果您選取reCAPTCHA v2組態與大小為 隱形 或reCAPTCHA Enterprise分數型金鑰,則使用者動作上的有效Captcha不適用。

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 只有在使用者在填寫表單時指定的數字方塊位數大於5時,API才會驗證表單中的驗證碼。

選項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,方法是在最適化表單的元件上套用規則。

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

下圖說明如何在 驗證碼驗證 按鈕:

驗證碼驗證

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

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

本頁內容