在自适应Forms中使用reCAPTCHA using-reCAPTCHA-in-adaptive-forms

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

版本
文章链接
AEM 6.5
单击此处
AEM as a Cloud Service
本文
应用到
基于基础组件的自适应表单。 对于基于核心组件的自适应表单,
,请单击此处

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. 获取项目ID并为网站创建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服务一旦启用,就可用于自适应表单。 请参阅在自适应表单🔗中使用CAPTCHA 。

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

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

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

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

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

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

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

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

  6. 从​ reCAPTCHA Enterprise ​或​ reCAPTCHA v2 ​的“设置”下拉列表中选择配置

    1. 如果您选择​ reCAPTCHA Enterprise ​版本,则密钥类型可以是​ 复选框 ​或基于​ 分数,它基于您在为网站配置站点密钥时的选择:
    note note
    NOTE
    • 在将​ 键类型 ​作为​ 复选框 ​的云配置中,如果验证码验证失败,自定义错误消息将显示为内联消息。
    • 在​ 键类型 ​为​ 基于 ​分数的云配置中,如果验证码验证失败,自定义错误消息将显示为弹出消息。
    1. 你可以选择大小为​ 普通 ​和​ 紧凑
    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构件选择大小为​ Normal ​或​ Compact
    2. 您可以选择​ 不可见 ​选项,以便仅在可疑活动的情况下显示验证码质询。

    已在自适应表单上启用reCAPTCHA服务。 您可以预览表单并查看验证码是否正常工作。 受reCAPTCHA保护的​ 徽章 ​将显示在受保护的表单上,如下所示。
    受reCAPTCHA徽章保护的Google

  7. 保存属性。

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

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

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

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

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

显示或隐藏规则

NOTE
当您选择reCAPTCHA v2配置并且大小设置为不可见时,显示/隐藏选项保持禁用状态。

验证验证码 validate-captcha

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

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

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

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

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

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

  1. 选择CAPTCHA组件并选择 cmppr 以查看组件属性。
  2. 在​ 验证CAPTCHA ​部分中,针对用户操作​ 选择 ​验证CAPTCHA。
  3. 选择 完成 以保存组件属性。

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,并根据验证结果启用或禁用自适应表单的提交按钮。

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

编辑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