在自适应表单中使用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企业项目 启用方式 reCAPTCHA Enterprise API.

  2. 获取 项目ID

  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. 在“编辑组件”对话框中,指定名称、项目ID、站点密钥、API密钥(在步骤2和3中获得),选择密钥类型,然后输入阈值分数。 选择 保存设置  然后选择  确定  以完成配置。

reCAPTCHA Enterprise服务一旦启用,就可用于自适应表单。 请参阅 在自适应表单中使用CAPTCHA.

reCAPTCHA Enterprise

配置Google reCAPTCHA v2 steps-to-implement-reCAPTCHA-v2-in-forms

  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服务后,便可在自适应表单中使用。 有关更多信息,请参阅 在自适应表单中使用CAPTCHA.

reCAPTCHA v2

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

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

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

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

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

  4. 指定验证码小部件的标题。 默认值为 验证码. 选择 隐藏标题 如果您不希望显示标题。

  5. 验证码服务 下拉列表,选择 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构件。 您还可以选择 不可见 选项,用于仅在可疑活动时显示CAPTCHA质询。 此 受reCAPTCHA保护 徽章(如下所示)显示在受保护的表单上。

      Google受reCAPTCHA徽章保护

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

  8. 保存属性。

NOTE
不选择 默认 从“验证码服务”下拉列表中,默认的AEM CAPTCHA服务已弃用。

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

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

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

选择 货币值 字段,并创建以下规则:

显示或隐藏规则

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

验证验证码 validate-captcha

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

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

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

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

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

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

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

  2. 验证验证码 部分,选择 在用户操作时验证验证码.

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

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

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

以下示例为 ValidateCAPTCHA 用于使用预定义条件验证CAPTCHA的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用于在提交表单之前在用户操作中验证CAPTCHA

您还可以调用 ValidateCAPTCHA API,方法是对自适应表单中的组件应用规则。

例如,您添加 验证验证码 按钮,并创建规则以在单击按钮时调用服务。

下图说明了在单击服务时调用服务的方式 验证验证码 按钮:

验证验证码

您可以调用自定义servlet,其中包含 ValidateCAPTCHA 使用规则编辑器的API,并根据验证结果启用或禁用自适应表单的提交按钮。

同样,您可以使用规则编辑器在自适应表单中包含用于验证验证码的自定义方法。

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