在自适应表单中使用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. 转到​ 工具>常规>配置浏览器。 有关详细信息,请参阅配置浏览器文档。

    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 Cloud项目中配置的站点密钥相同,例如,复选框站点密钥 ​或​ 基于得分的站点密钥

    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. 从Google获取reCAPTCHA API密钥对。 它包含​ 站点密钥 ​和​ 密钥

  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. 从组件浏览器中,将​ 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;
        }
    }

该示例表示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。

例如,您在自适应表单中添加了​ 验证CAPTCHA ​按钮,并创建了一个规则以在单击按钮时调用服务。

下图说明了如何通过单击​ 验证CAPTCHA ​按钮调用服务:

验证验证码

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

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

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