Documentation AEM as a Cloud Service User Guide

Connect your AEM Forms environment with hCaptcha® connect-your-forms-environment-with-hcaptcha-service

Last update: Wed Jun 26 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

User
Developer

This feature is under Early Adopter Program. You can write to aem-forms-ea@adobe.com from your official email id to join the early adopter program and request access to the capability.

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:

Integrate AEM Forms environment with hCaptcha Captcha

hCaptcha® service protects your forms from bots, spam, and automated abuse. It poses a checkbox widget challenge and evaluates the user response to determine if it’s a human or a bot interacting with the form. It prevents the user to proceed if the test fails and helps make online transactions secure by keeping bots from posting spam or malicious activities.

AEM Forms as a Cloud Service supports hCaptcha® in Adaptive Forms Core Components. You can use it to present a checkbox widget challenge on form submission.

Prerequisites to integrate AEM Forms environment with hCaptcha® prerequisite

To configure hCaptcha® with AEM Forms, you need to obtain the hCaptcha® sitekey and secret key from the hCaptcha® website.

Configure hCaptcha® steps-to-configure-hcaptcha

To integrate AEM Forms with hCaptcha® service, perform the following steps:

Create a Configuration Container on your AEM Forms as a Cloud Service environment. A Configuration Container holds Cloud Configurations used to connect AEM to external services. To create and configure a Configuration Container to connect your AEM Forms environment with hCaptcha®:
1. Open your AEM Forms as a Cloud Service instance.
2. Go to Tools > General > Configuration Browser.
3. In the Configuration Browser, you can select an existing folder or create a folder. You can create a folder and enable the Cloud Configurations option for it or Enable the Cloud Configurations option for an existing folder:
  - To create a folder and enable the Cloud Configurations option for it:
    1. In the Configuration Browser, click Create.
    2. In the Create Configuration dialog, specify a name, title, and select the Cloud Configurations option.
    3. Click Create.
  - To enable the Cloud Configurations option for an existing folder:
    1. In the Configuration Browser, select the folder and select Properties.
    2. In the Configuration Properties dialog, enable Cloud Configurations.
    3. Select Save & Close to save the configuration and exit the dialog.

Configure the Cloud Service:

On your AEM author instance, go to > Cloud Services and select hCaptcha®.
Select a Configuration Container, created or updated, as described in the previous section. Select Create.
Specify Title, Name, Site Key, and Secret Key for hCaptcha® service obtained in Prerequisite. Select Create.

note note
NOTE
Users need not to modify Client-side JavaScript validation URL and Server-side validation URL as they are already prefilled for hCaptcha® validation.

Once the hCAPTCHA service is configured, it is available for use in an Adaptive Form based on Core Components.

Use hCaptcha® in an Adaptive Forms Core Components {#using-hCaptcha®-core-components}

Open your AEM Forms as a Cloud Service instance.
Go to Forms > Forms and Documents.
Select an Adaptive Form and select Properties. For the Configuration Container option, select the Configuration Container that contains the Cloud Configuration that connects AEM Forms with hCaptcha® and select Save & Close.

If you do not have such a Configuration Container, see section Connect your AEM Forms environment with hCaptcha® to learn how to create a Configuration Container.
Select an Adaptive Form and select Edit. The Adaptive Form opens in Adaptive Forms Editor.
From the component browser, drag-drop or add the Adaptive Form hCaptcha® component onto the Adaptive Form.

Select the Adaptive Form hCaptcha® component and click properties icon. It opens the properties dialog. Specify the following properties:

hCaptcha v2

Name: Specify the name for your Captcha component, you can identify a form component easily with its unique name both in the form and in the rule editor.
Title: Specify the title for your Captcha component.
Configuration Settings: Select a Cloud Configuration configured for hCaptcha®.
Captcha Size: You can select the display size of the hCaptcha® challenge dialog. Use the Compact option to display a small sized and the Normal option to display a relatively large-size hCaptcha® challenge dialog.
Validation Message: Provide a validation message for your Captcha validation on form submission.

Script Validation Message - This option allows you to enter a message to be displayed if the script validation fails.

note note
NOTE
You can have multiple Cloud Configurations in your environment for a similar purpose. So, choose the service carefully. If no service is listed, see Connect your AEM Forms environment with hCaptcha® to learn how to create a Cloud Service that connects your AEM Forms environment with hCaptcha® service.

Select Done.

Now, only legitimate forms, in which the form filler successfully clears the challenge posed by the hCaptcha® service are allowed for the form submission. hCaptcha®

hCaptcha® is a registered trademark of Intuition Machines, Inc.

Frequently Asked Questions

Q: Can I use more than one Captcha component in an Adaptive Form?
Ans: Using more than one Captcha component in an Adaptive Form is not supported. Also, it is not recommended to use a Captcha component in a fragment or a panel marked for lazy loading.