在自适应表单中使用CAPTCHA

CAPTCHA(Completely Automated Public Turing test to tell Computers and Humans Apart)是在线交易中常用的项目,用于区分人类和自动项目或机器人。 它提出了挑战并评估用户响应,以确定它是人还是机器人与站点交互。 它可防止用户在测试失败时继续操作,并通过阻止蠕虫程序发布垃圾邮件或恶意内容,帮助确保在线交易安全。

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

注意
  • AEM Forms仅支持reCaptcha v2。 不支持任何其他版本。
  • 在AEM Forms应用程序的脱机模式下,不支持自适应表单中的CAPTCHA。

Google配置ReCAPTCHA服务

表单作者可以使用Google提供的reCAPTCHA服务在自适应表单中实现CAPTCHA。 它优惠高级CAPTCHA功能以保护您的站点。 有关reCAPTCHA工作方式的详细信息,请参阅Google reCAPTCHA

Recaptcha

要在AEM Forms中实施reCAPTCHA服务,请执行以下操作:

  1. 从Google获取reCAPTCHA API密钥对。 它包含一个站点密钥和一个秘密。

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

    1. 转到​工具>常规>配置浏览器

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

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

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

      3. 点按​保存并关闭​以保存配置并退出对话框。

    3. 在配置浏览器中,点按​创建

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

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

  3. 为reCAPTCHA配置云服务。

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

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

在自适应表单中使用CAPTCHA

要在自适应表单中使用CAPTCHA:

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

    注意

    确保在创建自适应表单时选择的配置容器包含reCAPTCHA云服务。 您还可以编辑自适应表单属性以更改与表单关联的配置容器。

  2. 从组件浏览器中,将​Captcha​组件拖放到自适应表单上。

    注意

    不支持在自适应表单中使用多个Captcha组件。 此外,不建议在标记为延迟加载的面板或片段中使用CAPTCHA。

    注意

    Captcha是时间敏感型的,约一分钟后过期。 因此,建议将Captcha组件放在自适应表单中“提交”按钮之前。

  3. 选择您添加的Captcha组件,然后点按cmpr以编辑其属性。

  4. 指定CAPTCHA Widget的标题。 默认值为​Captcha。 如果不希望显示标题,请选择​隐藏标题

  5. 从​Captcha服务​下拉列表中,如果按Google🔗的 ReCAPTCHA服务中所述配置reCAPTCHA服务,请选择​reCaptcha​以启用reCAPTCHA服务。 从设置下拉菜单中选择配置。 此外,为reCAPTCHA Widget选择​Normal​或​Compact​大小。

    注意

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

  6. 保存属性。

reCAPTCHA服务在自适应表单上启用。 您可以预览表单并查看CAPTCHA的运行情况。

根据规则显示或隐藏CAPTCHA组件

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

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

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

显示或隐藏规则

验证验证码

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

在表单提交时验证CAPTCHA

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

  1. 点按CAPTCHA组件并选择cmppr以视图组件属性。
  2. 在​验证CAPTCHA​部分,选择​验证表单提交时的CAPTCHA
  3. 点按完成以保存组件属性。

验证用户操作和条件的CAPTCHA

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

  1. 点按CAPTCHA组件并选择cmppr以视图组件属性。
  2. 在​验证CAPTCHA​部分,选择​验证用户操作​上的CAPTCHA。
  3. 点按完成以保存组件属性。

Experience Manager Forms 提 ValidateCAPTCHA 供API以使用预定义条件验证CAPTCHA。您可以使用自定义提交操作或通过定义自适应表单中组件的规则来调用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;
        }
    }

该示例表示,仅当填写表单时用户指定的数字框中的数字数大于5时,ValidateCAPTCHA API才验证表单中的CAPTCHA。

选项1:使用 Experience Manager Forms ValidateCAPTCHA API使用自定义提交操作验证CAPTCHA

请执行以下步骤以使用ValidateCAPTCHA API使用自定义提交操作验证CAPTCHA:

  1. 将包含ValidateCAPTCHA API的脚本添加到自定义提交操作。 有关自定义提交操作的详细信息,请参阅为自适应Forms创建自定义提交操作
  2. 从自适应表单的​提交​属性中的​提交操作​下拉列表中选择自定义提交操作的名称。
  3. 点按​提交。 根据自定义提交操作的ValidateCAPTCHA API中定义的条件验证CAPTCHA。

选项2:在提 Experience Manager Forms 交表单之前,使用ValidateCAPTCHA API验证用户操作的CAPTCHA

您还可以通过对自适应表单中的组件应用规则来调用ValidateCAPTCHA API。

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

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

验证验证码

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

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

添加自定义CAPTCHA服务

Experience Manager Forms 提供reCAPTCHA作为CAPTCHA服务。但是,可以添加自定义服务以在​CAPTCHA Service​下拉列表中显示。

以下是该接口的示例实现,用于向自适应表单添加其他CAPTCHA服务:

package com.adobe.aemds.guide.service;

import org.osgi.annotation.versioning.ConsumerType;

/**
 * An interface to provide captcha validation at server side in Adaptive Form
 * This interface can be used to provide custom implementation for different captcha services.
 */
@ConsumerType
public interface GuideCaptchaValidator {
    /**
     * This method should define the actual validation logic of the captcha
     * @param captchaPropertyNodePath path to the node with CAPTCHA configurations inside form container
     * @param userResponseToken  The user response token provided by the CAPTCHA from client-side
     *
     * @return  {@link GuideCaptchaValidationResult} validation result of the captcha
     */
     GuideCaptchaValidationResult validateCaptcha(String captchaPropertyNodePath, String userResponseToken);

    /**
     * Returns the name of the captcha validator. This should be unique among the different implementations
     * @return  name of the captcha validator
     */
     String getCaptchaValidatorName();
}

captchaPropertyNodePath 指Sling存储库中CAPTCHA组件的资源路径。使用此属性可包含特定于CAPTCHA组件的详细信息。 例如,captchaPropertyNodePath包含在CAPTCHA组件上配置的reCAPTCHA云配置的信息。 云配置信息提供用于实现reCAPTCHA服务的​站点密钥​和​密钥​设置。

userResponseToken 指在表 g_recaptcha_response 单中解析CAPTCHA后生成的。

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now