在自适应Forms中使用CAPTCHA

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

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

注意
  • AEM Forms 仅支持reCaptcha v2。不支持任何其他版本。
  • 在AEM Forms应用程序的离线模式下,不支持自适应Forms中的验证码。

通过Google配置ReCAPTCHA服务

表单作者可以使用Google提供的reCAPTCHA服务在自适应Forms中实施CAPTCHA。 它提供高级验证码功能以保护您的网站。 有关reCAPTCHA工作原理的更多信息,请参阅Google reCAPTCHA

Recaptcha

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

  1. 从Google获取reCAPTCHA API密钥对。 它包括站点密钥和密钥。

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

    1. 转到 Tools > General > Configuration Browser.

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

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

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

      3. 点按​Save & Close​以保存配置并退出对话框。

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

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

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

  3. 为reCAPTCHA配置云服务。

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

    配置reCAPTCHA服务后,即可在自适应Forms中使用。 有关更多信息,请参阅自适应Forms中的使用CAPTCHA

在自适应Forms中使用CAPTCHA

要在自适应Forms中使用CAPTCHA,请执行以下操作:

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

    注意

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

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

    注意

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

    注意

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

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

  4. 指定CAPTCHA小组件的标题。 默认值为 Captcha。如果不希望显示标题,请选择​Hide title

  5. 如果按照ReCAPTCHA服务(由Google提供)中的说明对reCAPTCHA服务进行了配置,请从​Captcha service​下拉列表中选择​reCaptcha​以启用reCAPTCHA服务。 从设置下拉列表中选择配置。 此外,为reCAPTCHA小组件选择​Normal​或​Compact​的大小。

    注意

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

  6. 保存属性。

reCAPTCHA服务在自适应表单上启用。 您可以预览表单并查看CAPTCHA正常工作。

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

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

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

点按表单中的​Currency Value​字段,并创建以下规则:

显示或隐藏规则

验证验证码

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

在提交表单时验证验证码

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

  1. 点按CAPTCHA组件,然后选择cmppr以查看组件属性。
  2. 在​Validate CAPTCHA​部分中,选择​Validate CAPTCHA at form submission
  3. 点按完成以保存组件属性。

验证用户操作和条件的验证验证码

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

  1. 点按CAPTCHA组件,然后选择cmppr以查看组件属性。
  2. 在​Validate CAPTCHA​部分中,选择​Validate CAPTCHA on a user action
  3. 点按完成以保存组件属性。

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

以下是ValidateCAPTCHA API使用预定义条件验证CAPTCHA的示例:

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. 从自适应表单的​Submission​属性的​Submit Action​下拉列表中选择自定义提交操作的名称。
  3. 点按 Submit. 根据自定义提交操作的ValidateCAPTCHA API中定义的条件,验证CAPTCHA。

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

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

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

下图说明了在单击​Validate 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服务的​Site Key​和​Secret Key​设置。

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

编辑reCAPTCHA服务域

reCAPTCHA服务使用https://www.recaptcha.net/作为默认域。 您可以修改设置以设置https://www.google.com/或任何用于加载、渲染和验证reCAPTCHA服务的自定义域名。

设置​Adaptive Form and Interactive Communication Web Channel Configuration​配置的​af.cloudservices.recaptcha.domain​属性,以指定https://www.google.com/或任何其他自定义域名。 以下JSON文件显示一个示例:

{
  "af.cloudservices.recaptcha.domain": "https://www.google.com/"
}

要设置配置值,请使用AEM SDK生成OSGi配置,并将配置部署到Cloud Service实例。

在此页面上