在自适应表单中使用 CAPTCHA using-captcha-in-adaptive-forms

版本
文章链接
AEM as a Cloud Service
单击此处
AEM 6.5
本文

Adobe 建议使用现代、可扩展的数据捕获核心组件,以创建新的自适应表单将自适应表单添加到 AEM Sites 页面。 这些组件代表有关创建自适应表单的重大改进,确保实现令人印象深刻的用户体验。 本文介绍了使用基础组件创作自适应表单的旧方法。

CAPTCHA(区分计算机和人类的完全自动化公共图灵测试)是一种在线交易中常用的程序,用于区分人类和自动化程序或机器人。 它提出了一个挑战,并评估用户响应以确定是人还是机器人与网站交互。 如果测试失败,它会阻止用户继续操作,并通过阻止机器人发布垃圾邮件或恶意目的来帮助确保在线交易的安全。

AEM Forms支持自适应表单中的验证码。 您可以使用Google的reCAPTCHA服务来实施CAPTCHA。

NOTE
  • AEM Forms支持reCAPTCHA v2和enterprise。 不支持任何其他版本。
  • AEM Forms应用程序上的离线模式不支持自适应表单中的验证码。

通过Google为自适应Forms配置reCAPTCHA服务 google-reCAPTCHA

AEM Forms用户可以使用Google的reCAPTCHA服务在自适应表单中实施CAPTCHA。 它提供高级验证码功能以保护您的站点。 有关reCAPTCHA工作方式的更多信息,请参阅Google reCAPTCHA。 包括reCAPTCHA v2和reCAPTCHA Enterprise在内的reCAPTCHA服务已集成到AEM Forms中。 根据要求,您可以配置reCAPTCHA服务以启用:

reCAPTCHA

配置 reCAPTCHA Enterprise steps-to-implement-reCAPTCHA-enterprise-in-forms

  1. 创建已启用reCAPTCHA Enterprise APIreCAPTCHA Enterprise项目

  2. 获取项目ID。

  3. 为网站🔗创建API密钥和站点密钥。

  4. 为云服务创建配置容器。

    1. 转到​工具>常规>配置浏览器。 See the Configuration Browser documentation for more information.

    2. Do the following to enable the global folder for cloud configurations or skip this step to create and configure another folder for cloud service configurations.

      1. In the Configuration Browser, select the global folder and select Properties.
      2. In the Configuration Properties dialog, enable Cloud Configurations.
      3. 选择​保存并关闭,以保存配置并退出对话框。
    3. In the Configuration Browser, select Create.

    4. In the Create Configuration dialog, specify a title for the folder and enable Cloud Configurations.

    5. Select Create to create the folder enabled for cloud service configurations.

  5. Configure the cloud service for reCAPTCHA Enterprise.

    1. On your Experience Manager author instance, go to tools-1 > Cloud Services.

    2. Select reCAPTCHA. The Configurations page opens. Select the configuration container created in the previous step and select Create.

    3. Select version as reCAPTCHA Enterprise and specify Name; Project ID, Site Key, and API key(Obtained in Step 2 and 3) for reCAPTCHA Enterprise service.

    4. Select key type, the key type should be same as the site key configured in the google cloud project, for example, Checkbox site key or Score-based site key.

    5. Specify a threshold score in the range 0–1 (Click to know more about score). Scores greater than or equal to the threshold scores identify human interaction, otherwise considered bot interaction.

      注意:

      • Form authors can specify a score in the range suitable for uninterrupted form submission.
    6. 选择​创建,创建云服务配置。

    7. In the Edit Component dialog, specify the name, project ID, site key, API key (obtained in steps 2 and 3), select the key type, and enter the threshold score. Select Save Settings and then select  OK  to complete the configuration.

Once the reCAPTCHA Enterprise service is enabled, it is available for use in adaptive forms. See using CAPTCHA in adaptive forms.

reCAPTCHA Enterprise

Configure Google reCAPTCHA v2 steps-to-implement-reCAPTCHA-v2-in-forms

  1. Obtain reCAPTCHA API key pair from Google. It includes a site key and a secret key.

  2. 为云服务创建配置容器。

    1. 转到​工具>常规>配置浏览器。 有关详细信息,请参阅配置浏览器文档。

    2. 执行以下操作可为云配置启用全局文件夹,或跳过此步骤为云服务配置创建和配置其他文件夹。

      1. 在配置浏览器中,选择​ 全局 ​文件夹,然后选择​属性

      2. 在配置属性对话框中,启用​云配置

      3. 选择​保存并关闭,以保存配置并退出对话框。

    3. 在配置浏览器中,选择​创建

    4. 在创建配置对话框中,指定文件夹的标题并启用​云配置

    5. 选择​ 创建 ​以创建为云服务配置启用的文件夹。

  3. 为reCAPTCHA v2配置云服务。

    1. 在您的AEM创作实例上,转到 tools-1 > Cloud Services
    2. 选择​reCAPTCHA。 此时将打开“配置”页面。 选择在上一步中创建的配置容器,然后选择​创建
    3. 将版本选择为reCAPTCHA v2,指定reCAPTCHA服务(在步骤1中获得)的名称、站点密钥和密钥,然后选择​ 创建 ​以创建云服务配置。
    4. 在“编辑组件”对话框中,指定在步骤1中获取的站点密钥和密钥。 选择​保存设置,然后选择​ 确定 ​以完成配置。

    配置reCAPTCHA服务后,便可在自适应表单中使用。 有关详细信息,请参阅在自适应表单中使用CAPTCHA

reCAPTCHA v2

在自适应表单中使用reCAPTCHA using-reCAPTCHA

要在自适应表单中使用reCAPTCHA,请执行以下操作:

  1. 在编辑模式下打开自适应表单。

    note note
    NOTE
    确保在创建自适应表单时选择的配置容器包含reCAPTCHA云服务。 您还可以编辑自适应表单属性,以更改与表单关联的配置容器。
  2. 从组件浏览器中,将​ Captcha ​组件拖放到自适应表单上。

    note note
    NOTE
    不支持在自适应表单中使用多个验证码组件。 此外,不建议在标记为延迟加载的面板或片段中使用验证码。
    note note
    NOTE
    验证码对时间敏感,大约一分钟后过期。 因此,建议在自适应表单中将Captcha组件放在提交按钮之前。
  3. 选择您添加的Captcha组件,然后选择 cmppr 以编辑其属性。

  4. 指定验证码小部件的标题。 默认值为​验证码。 如果不想显示标题,请选择​隐藏标题

  5. 从​ Captcha服务 ​下拉列表中,选择​ reCAPTCHA ​以启用reCAPTCHA服务(如果您已按照Google的reCAPTCHA服务中的说明进行配置)。

  6. 从“设置”下拉列表中选择配置。

  7. 如果所选配置具有reCAPTCHA Enterprise版本

    1. 你可以选择具有​ 密钥类型 ​的reCAPTCHA云配置作为​复选框。 在复选框键中,如果验证码验证失败,自定义错误消息将以内联消息的形式显示。 你可以选择大小为​ 普通 ​和​紧凑

    2. 你可以选择具有​ 密钥类型 ​的reCAPTCHA云配置作为基于​分数的。 在基于得分的键类型中,如果验证码验证失败,自定义错误消息将作为弹出消息显示。

    3. 当您选择​ 绑定引用 ​时,提交的数据是绑定数据,否则是未绑定的数据。 以下是提交表单时未绑定数据和绑定数据(以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构件选择大小为​ Normal ​或​Compact。 您还可以选择​ 不可见 ​选项,以便仅在可疑活动时显示验证码质询。 受reCAPTCHA保护的​ 徽章 ​将显示在受保护的表单上,如下所示。

      受reCAPTCHA徽章保护的Google

    已在自适应表单上启用reCAPTCHA服务。 您可以预览表单并查看验证码是否正常工作。

  8. 保存属性。

NOTE
请勿从Captcha服务下拉列表中选择​Default,因为默认的AEM CAPTCHA服务已弃用。

根据规则显示或隐藏验证码组件 show-hide-captcha

您可以选择根据您在自适应表单中组件上应用的规则来显示或隐藏CAPTCHA组件。 选择组件,选择 编辑规则 ,然后选择​ 创建 ​以创建规则。 有关创建规则的更多信息,请参阅规则编辑器

例如,仅当表单中的“货币值”字段的值超过25000时,CAPTCHA组件才必须在自适应表单中显示。

选择表单中的​ 货币值 ​字段并创建以下规则:

显示或隐藏规则

NOTE
  • 如果选择大小为​ 不可见 ​或reCAPTCHA Enterprise基于得分的键的reCAPTCHA v2配置,则显示/隐藏选项不适用。

验证验证码 validate-captcha

您可以在提交表单时验证自适应表单中的验证码,也可以根据用户操作和条件进行验证码验证。

在提交表单时验证验证码 validation-form-submission

要在提交自适应表单时自动验证验证码,请执行以下操作:

  1. 选择CAPTCHA组件并选择 cmppr 以查看组件属性。
  2. 在​ 验证验证码 ​部分中,选择​在提交表单时验证验证码
  3. 选择 完成 以保存组件属性。

在用户操作和条件上验证验证码 validate-captcha-user-action

要根据条件和用户操作验证验证码,请执行以下操作:

  1. 选择CAPTCHA组件并选择 cmppr 以查看组件属性。

  2. 在​ 验证CAPTCHA ​部分中,针对用户操作​ 选择 ​验证CAPTCHA。

  3. 选择 完成 以保存组件属性。

    note note
    NOTE
    如果您选择大小为​ 不可见 ​或reCAPTCHA基于企业得分的密钥的reCAPTCHA v2配置,则用户操作上的有效Captcha不适用。

Experience Manager Forms提供了ValidateCAPTCHA API以使用预定义条件验证验证码。 您可以使用自定义提交操作或通过定义自适应表单中组件的规则来调用API。

以下是使用预定义条件验证CAPTCHA的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;
        }
    }

The example signifies that the ValidateCAPTCHA API validates the CAPTCHA in the form only if number of digits in the numeric box specified by the user while filling the form is greater than 5.

Option 1: Use Experience Manager Forms ValidateCAPTCHA API to validate CAPTCHA using a custom Submit Action

Perform the following steps to use the ValidateCAPTCHA API to validate CAPTCHA using a custom Submit Action:

  1. Add the script that includes the ValidateCAPTCHA API to custom Submit Action. For more on custom Submit Actions, see Create a custom Submit Action for Adaptive Forms.
  2. Select the name of the custom Submit Action from the Submit Action drop-down list in Submission properties of an Adaptive Form.
  3. 选择​提交。 The CAPTCHA gets validated based on the conditions defined in ValidateCAPTCHA API of the custom Submit Action.

Option 2: Use Experience Manager Forms ValidateCAPTCHA API to validate CAPTCHA on a user action before submitting the form

You can also invoke ValidateCAPTCHA API by applying rules on a component in an Adaptive Form.

For example, you add a Validate CAPTCHA button in an Adaptive Form and create a rule to invoke a service on the click of a button.

The following figure illustrates how you can invoke a service on the click of a Validate CAPTCHA button:

Validate CAPTCHA

You can invoke the custom servlet that includes ValidateCAPTCHA API using the rule editor and enable or disable the submit button of the Adaptive Form based on the validation result.

Similarly, you can use rule editor to include a custom method to validate CAPTCHA in an Adaptive Form.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2