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

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.

{align="center" width="300"}

By the end of this article, you learn to:

Pre-requisites

Enable Google reCAPTCHA for a single form enable-google-recaptchas-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:

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 configure-secret-key

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:

Add reCAPTCHA site key to your form add-site-key

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:

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.

Enable reCAPTCHA for all the forms on your Site enable-recaptcha-for-all-the-forms

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 Google reCAPTCHA Site Key in recaptcha.js File

Deploy the file and build the project

Deploy the updated recaptcha.js file to your GitHub project and verify a successful build.

Preview the Site using the AEM sidekick

Use AEM Sidekick to preview and publish the site.

The reCAPTCHA badge starts appearing for all the forms on your Site.