Add Google reCAPTCHA to Forms in Universal Editor

Requirements:

1. Google Cloud Project with billing enabled
2. Project ID (from GCP dashboard)
3. Domain verification for your forms
4. Admin access to GCP and AEM

Setup:

1. Create or select a Google Cloud Project

   • Go to Google Cloud Console
   • Create a new project or select an existing one
   • Note your Project ID

2. Enable reCAPTCHA Enterprise API

   • Go to APIs & Services > Library
   • Search for “reCAPTCHA Enterprise API”
   • Click Enable

3. Create API Credentials

   • Go to APIs & Services > Credentials
   • Click Create Credentials > API Key
   • Copy and store your API key

4. Create Site Key

   • Go to Security > Fraud Defense > Keys
   • Click Create key and select Web as the application type
   • Add your domain(s)
   • Click Next step (optional) to open the additional settings
   • Keep Will you use challenges? turned off to create a score-based site key
   • Click Create key and copy the site key

Validation Checkpoint: Ensure you have:

• Project ID
• API Key
• Site Key
• Verified domain in Google Cloud

Figure: Enabling cloud configurations for your form container

Setup:

1. Access Configuration Browser

   • Log in to your AEM author instance
   • Go to Tools > General > Configuration Browser

2. Enable Cloud Configurations

   • Locate your form’s configuration container
   • Select Properties
   • Check Cloud Configurations
   • Click Save & Close

3. Verify Configuration

   • Confirm “Cloud Configurations” appears in the container properties

Validation Checkpoint:

• Cloud Configurations enabled for your container
• Container appears in Configuration Browser
• Properties show “Cloud Configurations” as enabled

Figure: reCAPTCHA Enterprise configuration interface in AEM

Configuration:

1. Access reCAPTCHA Configuration

   • Go to Tools > Cloud Services > reCAPTCHA
   • Select your form’s configuration container
   • Click Create

2. Configure Enterprise Settings

   • Title: Descriptive name (e.g., “Production reCAPTCHA”)
   • Name: System name (auto-generated or custom)
   • Version: Select ReCAPTCHA Enterprise
   • Project ID: Enter your Google Cloud Project ID
   • Site Key: Enter the site key from Google Cloud
   • API Key: Enter your Google Cloud API key
   • Key Type: Select Score-based site key

3. Set Security Threshold

   • Threshold Score: Set between 0.0 and 1.0

   • Recommended values:

     • 0.7-0.9: High security (may block some legitimate users)
     • 0.5-0.7: Balanced security (recommended)
     • 0.1-0.5: Lower security (allows more users)

4. Save and Publish

   • Click Create to save configuration
   • Click Publish to make it available

Validation Checkpoint:

• Configuration saved successfully
• All required fields completed
• Configuration published and visible
• No error messages

Go to your form in AEM Sites and click Edit to open it in Universal Editor. Wait for the editor to load.

• Go to your form in AEM Sites
• Click Edit to open in Universal Editor
• Wait for the editor to load

In the Content Tree (left panel), find your Adaptive Form section and expand the form structure to see insertion points.

• In the Content Tree (left panel), find your Adaptive Form section
• Expand the form structure to see insertion points

Add the Captcha (Invisible) component to your form.

• Click the Add (+) icon in your form section
• From the component list, select Captcha (Invisible)
• Alternatively, drag and drop the component from the components panel

Select the newly added captcha component and verify it uses your reCAPTCHA configuration.

• Select the newly added captcha component
• In the Properties panel, verify it uses your reCAPTCHA configuration
• No additional configuration is needed for basic setup

Publish your changes and verify there are no errors.

• Click Publish in Universal Editor
• Wait for confirmation
• Verify no errors appear