CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a program commonly used in online transactions to distinguish between humans and automated programs or bots. It poses a challenge and evaluates user response to determine if it’s a human or a bot interacting with the site. It prevents the user to proceed if the test fails and helps make online transactions secure by keeping bots from posting spam or malicious purposes.
AEM Forms supports CAPTCHA in Adaptive Forms. You can use reCAPTCHA service by Google to implement CAPTCHA.
Form authors can use the reCAPTCHA service by Google to implement CAPTCHA in Adaptive Forms. It offers advanced CAPTCHA capabilities to protect your site. For more information on how reCAPTCHA works, see Google reCAPTCHA.
To implement the reCAPTCHA service in AEM Forms:
Obtain reCAPTCHA API key pair from Google. It includes a site key and secret.
Create configuration container for cloud services.
Go to Tools > General > Configuration Browser.
Do the following to enable the global folder for cloud configurations or skip this step to create and configure another folder for cloud service configurations.
In the Configuration Browser, select the global folder and tap Properties.
In the Configuration Properties dialog, enable Cloud Configurations.
Tap Save & Close to save the configuration and exit the dialog.
In the Configuration Browser, tap Create.
In the Create Configuration dialog, specify a title for the folder and enable Cloud Configurations.
Tap Create to create the folder enabled for cloud service configurations.
Configure the cloud service for reCAPTCHA.
Once the reCAPTCHA service is configured, it is available for use in Adaptive Forms. For more information, see Using CAPTCHA in Adaptive Forms.
To use CAPTCHA in Adaptive Forms:
Open an Adaptive Form in edit mode.
Ensure that the configuration container selected when creating the Adaptive Form contains the reCAPTCHA cloud service. You can also edit Adaptive Form properties to change the configuration container associated with the form.
From the component browser, drag-drop the Captcha component onto the Adaptive Form.
Using more than one Captcha component in an Adaptive Form is not supported. Also, it is not recommended to use CAPTCHA in a panel marked for lazy loading or in a fragment.
Captcha is time-sensitive and expires in about a minute. Therefore, it is recommended to place the Captcha component just before the Submit button in the Adaptive Form.
Select the Captcha component you added and tap to edit its properties.
Specify a title for the CAPTCHA widget. The default value is Captcha. Select Hide title if you do not want title to appear.
From the Captcha service drop-down, select reCaptcha to enable reCAPTCHA service if you configured it as described in ReCAPTCHA service by Google. Select a configuration from the Settings drop-down.
Select the type as Normal or Compact for the reCAPTCHA widget. You can also select the Invisible option to show the CAPTCHA challenge only in the case of a suspicious activity. The protected by reCAPTCHA badge, displayed below, is displayed on the protected forms.
Do not select Default from the Captcha service drop-down as the default Experience Manager CAPTCHA service is deprecated.
Save the properties.
The reCAPTCHA service is enabled on the Adaptive Form. You can preview the form and see the CAPTCHA working.
You can select to show or hide the CAPTCHA component based on rules that you apply on a component in an Adaptive Form. Tap the component, select , and tap Create to create a rule. For more information on creating rules, see Rule Editor.
For example, the CAPTCHA component must display in an Adaptive Form only if the Currency Value field in the form has a value of more than 25000.
Tap the Currency Value field in the form and create the following rules:
You can validate CAPTCHA in an Adaptive Form either when you submit the form or base the CAPTCHA validation on user actions and conditions.
To validate a CAPTCHA automatically when you submit an Adaptive Form:
To validate a CAPTCHA based on conditions and user actions:
Experience Manager Forms provides ValidateCAPTCHA
API to validate CAPTCHA using pre-defined conditions. You can invoke the API using a custom Submit Action or by defining rules on components in an Adaptive Form.
The following is an example of a ValidateCAPTCHA
API to validate CAPTCHA using pre-defined conditions:
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;
}
}
The example signifies that the ValidateCAPTCHA
API validates the CAPTCHA in the form only if number of digits in the numeric box specified by the user while filling the form is greater than 5.
Option 1: Use Experience Manager Forms ValidateCAPTCHA API to validate CAPTCHA using a custom Submit Action
Perform the following steps to use the ValidateCAPTCHA
API to validate CAPTCHA using a custom Submit Action:
ValidateCAPTCHA
API to custom Submit Action. For more on custom Submit Actions, see Create a custom Submit Action for Adaptive Forms.ValidateCAPTCHA
API of the custom Submit Action.Option 2: Use Experience Manager Forms ValidateCAPTCHA API to validate CAPTCHA on a user action before submitting the form
You can also invoke ValidateCAPTCHA
API by applying rules on a component in an Adaptive Form.
For example, you add a Validate CAPTCHA button in an Adaptive Form and create a rule to invoke a service on the click of a button.
The following figure illustrates how you can invoke a service on the click of a Validate CAPTCHA button:
You can invoke the custom servlet that includes ValidateCAPTCHA
API using the rule editor and enable or disable the submit button of the Adaptive Form based on the validation result.
Similarly, you can use rule editor to include a custom method to validate CAPTCHA in an Adaptive Form.
Experience Manager Forms provides reCAPTCHA as the CAPTCHA service. However, you can add a custom service to display in the CAPTCHA Service drop-down list.
The following is a sample implementation of the interface to add additional CAPTCHA service to your Adaptive Form:
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
refers to the resource path of the CAPTCHA component in the Sling repository. Use this property to include details specific to the CAPTCHA component. For example, captchaPropertyNodePath
includes information for the reCAPTCHA cloud configuration configured on the CAPTCHA component. The cloud configuration information provides Site Key and Secret Key settings for implementing the reCAPTCHA service.
userResponseToken
refers to the g_recaptcha_response
that gets generated after solving a CAPTCHA in a form.
reCAPTCHA service uses https://www.recaptcha.net/
as the default domain. You can modify the settings to set https://www.google.com/
or any custom domain name for loading, rendering, and validating the reCAPTCHA service.
Set the af.cloudservices.recaptcha.domain property of the Adaptive Form and Interactive Communication Web Channel Configuration configuration to specify https://www.google.com/
or any other custom domain name. The following JSON file displays a sample:
{
"af.cloudservices.recaptcha.domain": "https://www.google.com/"
}
To set values of a configuration, Generate OSGi Configurations using the AEM SDK, and deploy the configuration to your Cloud Service instance.