Use Google reCAPTCHA in an AEM Adaptive Form based on Core Components using-reCAPTCHA-in-adaptive-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.

1. Go to Tools > General > Configuration Browser.

2. Select a folder or create a folder, and enable the folder for cloud configurations using following steps:

   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 for reCAPTCHA Enterprise.

1. On your Experience Manager author instance, go to > Cloud Services.
2. Select reCAPTCHA. The Configurations page opens. Select the configuration container that you created and select Create.
3. Select version as reCAPTCHA Enterprise and specify Name, Project ID, Site Key, and API key (Obtained in Step 2) for reCAPTCHA Enterprise service.
4. 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.
5. 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.
6. Select Create to create the cloud service configuration.

Obtain reCAPTCHA API key pair from Google. It includes a site key and a secret key.

Create 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 reCAPTCHA service by Google:

1. Open your AEM Forms as a Cloud Service instance.

2. Go to Tools > General > Configuration Browser. In the Configuration Browser, you can:

3. 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 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:

1. On your AEM author instance, go to > Cloud Services and select reCAPTCHA.
2. Select a Configuration Container, created or updated in previous section. Select Create.
3. Specify Title, Name, Site Key, and Secret Key for reCAPTCHA service (Obtained in Step 1). Select Create.

Once the reCAPTCHA service is configured, it is available for use in an Adaptive Form. For more information, see using Google reCAPTCHA in an Adaptive Form.

Open your AEM Forms as a Cloud Service instance.

Go to Forms > Forms and Documents.

Select an Adaptive Forms and select Properties. For the Configuration Container option, select the Configuration Container that contains the Cloud Configuration that connects AEM Forms with reCAPTCHA service by Google and select Save & Close.

If you do not have such a Configuration Container, see section Connect your AEM Forms environment with reCAPTCHA service by Google to learn how to create such a Configuration Container.

Select an Adaptive Forms and select Edit. The Adaptive Form opens in Adaptive Forms Editor.

From the component browser, drag-drop the Adaptive Form reCAPTCHA component onto the Adaptive Form.

Select the Adaptive Form reCAPTCHA component and select the properties icon. It opens the properties dialog. Specify the following mandatory properties:

• Name: You can identify a form component easily with its unique name both in the form and in the rule editor, but the name must not contain spaces or special characters.

• Title: Specify a title for the CAPTCHA widget. The default value is Captcha. Select Hide title if you do not want title to appear. Select Allow Rich Text for Title to edit your title in rich text format. You can also mark your title as Unbound Form Element.

• CAPTCHA Configuration: Select a configuration from the Settings drop-down for reCAPTCHA Enterprise or reCAPTCHA v2 to present the Google reCAPTCHA dialog for the form:

  1. 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.

     1. You can select size as **Normal** and **Compact**.

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

• Captcha Size: You can select the display size of Google reCAPTCHA challenge dialog. Use the Compact option to display a small sized and the Normal option to display a relatively large-size Google reCAPTCHA challenge dialog.
  If you select reCAPTCHA v2 version:

  1. You can select the size as Normal or Compact for the reCAPTCHA widget.
  2. 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.

Select Done.

Now, the protected by reCAPTCHA is displayed on your Adaptive Form. It is displayed on all the Adaptive Forms which are configured to use the Google reCAPTCHA service.

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