Documentation AEM as a Cloud Service User Guide

Use reCAPTCHA with Edge Delivery Services for AEM Forms as a Cloud Service

Last update: September 9, 2024

Topics:
Edge Delivery Services

CREATED FOR:

Admin
Developer

The reCAPTCHA feature is under the pre-release program. To request access to the reCAPTCHA feature for Edge Delivery Services for AEM Forms, send an email from your work address to mailto:aem-forms-ea@adobe.com.

reCAPTCHA is a popular tool used to protect websites from fraudulent activities, spam, and misuse. In Edge Delivery Services, the Adaptive Forms Block provides the capability to add Google reCAPTCHA to distinguish between humans and bots. This feature allows users to protect their website from spam and misuse.
For example, consider an enquiry form that collects data such as start and end trip dates, room budget, estimated trip cost, and traveler information. In such cases, there is a risk of malicious users exploiting the form for purposes like sending phishing emails or flooding it with irrelevant or harmful content using spambots. Integrating reCAPTCHA offers added security by verifying that submissions are from genuine users, effectively minimizing spam entries.

Edge Delivery Services only supports the Score based(v3)-reCAPTCHA for the Adaptive Form Block.

Recaptcha V2

By the end of this article, you learn to:

Enable Google reCAPTCHA for a single form
Enable reCAPTCHA for all the forms on your Site

Pre-requisites

Begin the development of Edge Delivery Services Forms by following the steps explained in Create a form using Adaptive Forms Block.
Register your domain with Google reCAPTCHA and obtain credentials.

Enable Google reCAPTCHA for a single form

Enabling Google reCAPTCHA for a single form involves integrating Google’s reCAPTCHA service into a specific web form to prevent automated abuse or spam submissions.

To enable Google reCAPTCHA for a single form:

Configure the reCAPTCHA secret key in the project configuration file
Add the reCAPTCHA site key to your form

To start configuring reCaptcha in Edge Delivery Services Forms, refer to the following spreadsheet that includes the form definition for a form.

Configure the reCAPTCHA secret key in the project configuration file

The Site Secret for domain registered with Google reCAPTCHA is added to project the configuration file (.helix/config) in your AEM Project folder at Microsoft SharePoint or Google Drive. To add the Site Secret to the config file:

Go to your AEM Project folder on Microsoft® SharePoint or Google Drive.
Create the .helix/config.xlsx file in your AEM Project folder in Microsoft SharePoint Site or the .helix/config file in AEM Project folder within your Google Drive.

NOTE
The project configuration file is a spreadsheet located at /.helix/config. If the file does not exist, create it.
Open the config file and add the following key and value pairs:
- captcha.secret: Google reCAPTCHA secret key value
- captcha.type: reCAPTCHA v2
NOTE
You can retrieve the reCAPTCHA keys from the Google reCAPTCHA Admin Console.

You must specify the value of captcha.type in the config file as reCAPTCHA v2.
Refer to the screenshot of a project configuration file below:
Save the config file.
Preview and publish the config file using AEM Sidekick.

Add reCAPTCHA site key to your form

The Site Key for a domain registered with Google reCAPTCHA is added to the spreadsheet of the form that is to be protected. To add the Site key to a form:

Go to your AEM Project folder on Microsoft® SharePoint or Google Drive and open your spreadsheet. You can also create new spreadsheet for a form.
Insert a row into the spreadsheet to add new field as CAPTCHA, including the following details:
- type: captcha
- value: Google reCAPTCHA site key value
Refer to the screenshot below, depicting the spreadsheet with the new row type as CAPTCHA:

NOTE
You can retrieve the reCAPTCHA keys from the Google reCAPTCHA Admin Console.
Save the spreadsheet.
Use AEM Sidekick to preview and publish the sheet.

After adding new row in the form definition, a reCAPTCHA badge appears at the bottom-right corner of the form. This ensures that the form is now protected from fraudulent activities, spam, and misuse.

recaptcha-form

Enable reCAPTCHA for all the forms on your Site

To apply Google reCAPTCHA to all the forms on your Site that use Adaptive Forms Block, skip the previous steps and directly embed the sitekey value into the recaptcha.js file. To include site key value in the recaptcha.js file:

Update the Google reCAPTCHA Site Key in the recaptcha.js file
Deploy the file and build the project
Preview the Site using the AEM sidekick

Update Google reCAPTCHA Site Key in recaptcha.js File

Open the corresponding GitHub repository on your local machine.
Navigate to [../Form Block/integrations] folder and open the recaptcha.js file.
Replace the siteKey with Google reCAPTCHA Site key value.

NOTE
You can retrieve the reCAPTCHA keys from the Google reCAPTCHA Admin Console.
Save the recaptcha.js file.