Use reCAPTCHA in Adaptive Forms using-reCAPTCHA-in-adaptive-forms
Adobe recommends using the modern and extensible data capture Core Componentsfor creating new Adaptive Formsor adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.
For Adaptive Form based on Core Components, Click here.
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 as a Cloud Service supports the following CAPTCHA solutions:
Configure reCAPTCHA service by Google google-reCAPTCHA
Form authors can use the reCAPTCHA service by Google to implement reCAPTCHA in Adaptive Forms. It offers advance CAPTCHA capabilities to protect your site. For more information on how reCAPTCHA works, see Google reCAPTCHA. AEM Forms supports reCAPTCHA v2 and reCAPTCHA Enterprise. Any other version is not supported. Also notice, reCAPTCHA in Adaptive Forms is not supported in offline mode on AEM Forms app. Based on your requirement you can configure reCAPTCHA service to enable:
Configure reCAPTCHA Enterprise steps-to-implement-reCAPTCHA-enterprise-in-forms
-
Create or select a Google Cloud project and enable reCAPTCHA Enterprise API.
-
Obtain the Project ID and create an API key and a site key for websites.
-
Create configuration container for cloud services.
-
Go to Tools > General > Configuration Browser.
-
Select a folder or create a folder, and enable the folder for cloud configurations using following steps:
- In the Configuration Browser, select the folder and select Properties.
- In the Configuration Properties dialog, enable Cloud Configurations.
- Select Save & Close to save the configuration and exit the dialog.
-
-
Configure the cloud service for reCAPTCHA Enterprise.
- On your Experience Manager author instance, go to > Cloud Services.
- Select reCAPTCHA. The Configurations page opens. Select the configuration container that you created and select Create.
- Select version as reCAPTCHA Enterprise and specify Name, Project ID, Site Key, and API key (Obtained in Step 2) for reCAPTCHA Enterprise service.
- Select key type, the key type should be same as the site key that you configured in the Google Cloud project, for example, Checkbox site key or Score-based site key.
- Specify a threshold score in the range 0 to 1. Scores greater than or equal to the threshold scores identify human interaction, otherwise considered bot interaction.
- Select Create to create the cloud service configuration.
Once the reCAPTCHA Enterprise service is enabled, it is available for use in adaptive forms. See using CAPTCHA in adaptive forms.
Configure Google reCAPTCHA v2 steps-to-implement-reCAPTCHA-v2-in-forms
-
Obtain reCAPTCHA API key pair from Google. It includes a site key and a secret key.
-
Create configuration container for cloud services.
-
Go to Tools > General > Configuration Browser.
-
Select a folder or create a folder, and enable the folder for cloud configurations using following steps:
- In the Configuration Browser, select the folder and select Properties.
- In the Configuration Properties dialog, enable Cloud Configurations.
- Select Save & Close to save the configuration and exit the dialog.
-
-
Configure the cloud service for reCAPTCHA v2.
- On your AEM author instance, go to > Cloud Services.
- Select reCAPTCHA. The Configurations page opens. Select the configuration container that you created and select Create.
- Select version as reCAPTCHA v2 , specify Name, Site key, and Secret Key for reCAPTCHA service (Obtained in Step 1) and select Create to create the cloud service configuration.
- In the Edit Component dialog, specify the site and secret keys obtained in step 1. Select Save Settings and then select OK to complete the configuration.
Once the reCAPTCHA service is configured, it is available for use in adaptive forms. For more information, see using CAPTCHA in adaptive forms.
Use Google reCAPTCHA in adaptive forms using-reCAPTCHA
To use Google reCAPTCHA in an adaptive form:
-
Open an adaptive form in edit mode.
note note NOTE 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.
note note NOTE - 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.
- reCaptcha is time-sensitive and expires in about a couple of minutes. Therefore, it is recommended to place the Captcha component just before the Submit button in the adaptive form.
-
Select the Captcha component that you added and select 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 for reCAPTCHA Enterprise or reCAPTCHA v2
- If you select reCAPTCHA Enterprise version, the key type can be of checkbox or score based, It is based on your selection when you configure site key for websites:
note note NOTE - In the cloud configuration with key type as checkbox, the customized error message appears as an inline message if the captcha validation fails.
- In the cloud configuration with key type as score based, the customized error message shows as a pop-up message if the captcha validation fails.
- You can select size as Normal and Compact.
- You can select a Bind Reference, In Bind Reference the data submitted is a bound data, otherwise it is unbound data. Below are XML examples of unbound data and bound data (with bind reference as SSN) respectively, when a form is submitted.
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>
If you select reCAPTCHA v2 version:
- You can select the size as Normal or Compact for the reCAPTCHA widget.
- You can select the Invisible option to show the CAPTCHA challenge only in the case of a suspicious activity.
The reCAPTCHA service is enabled on the adaptive form. You can preview the form and see the CAPTCHA working. The protected by reCAPTCHA badge, displayed below, is displayed on the protected forms.
-
Save the properties.
Show or hide CAPTCHA component based on rules show-hide-captcha
You can select to show or hide the CAPTCHA component based on rules that you apply on a component in an Adaptive Form. Select the component, select , and select 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.
Select the Currency Value field in the form and create the following rules:
Validate CAPTCHA validate-captcha
You can validate CAPTCHA in an Adaptive Form either when you submit the form or base the CAPTCHA validation on user actions and conditions.
Validate CAPTCHA on form submission validation-form-submission
To validate a CAPTCHA automatically when you submit an Adaptive Form:
- Select the CAPTCHA component and select to view the component properties.
- In the Validate CAPTCHA section, select Validate CAPTCHA at form submission.
- Select to save the component properties.
Validate CAPTCHA on user actions and conditions validate-captcha-user-action
To validate a CAPTCHA based on conditions and user actions:
- Select the CAPTCHA component and select to view the component properties.
- In the Validate CAPTCHA section, select Validate CAPTCHA on a user action.
- Select to save the component properties.
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:
- Add the script that includes the
ValidateCAPTCHA
API to custom Submit Action. For more on custom Submit Actions, see Create a custom Submit Action for Adaptive Forms. - Select the name of the custom Submit Action from the Submit Action drop-down list in Submission properties of an Adaptive Form.
- Select Submit. The CAPTCHA gets validated based on the conditions defined in
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.
Edit reCAPTCHA service domain reCAPTCHA-service-domain
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.
See Also see-also
- Create an AEM Adaptive Form
- Add an AEM Adaptive Form to the AEM Sites page
- Apply themes to an AEM Adaptive Form
- Add components to an AEM Adaptive Form
- Use CAPTCHA in an AEM Adaptive Form
- Generate a PDF version (DoR) of an AEM Adaptive Form
- Translate an AEM Adaptive Form
- Enable Adobe Analytics for an Adaptive Form to track form usage
- Connect Adaptive Form to Microsoft SharePoint
- Connect Adaptive Form to Microsoft Power Automate
- Connect Adaptive Form to Microsoft OneDrive
- Connect Adaptive Form to Microsoft Azure Blob Storage
- Connect Adaptive Form to Salesforce
- Use Adobe Sign in an AEM Adaptive Form
- Add a new locale for an Adaptive Form
- Send Adaptive Form data to a database
- Send Adaptive Form data to a REST endpoint
- Send Adaptive Form data to AEM Workflow
- Use Forms Portal to list AEM Adaptive Forms on an AEM website
- Add versionings, comments, and annotations to an Adaptive Form
- Compare Adaptive Forms