Using CAPTCHA in adaptive forms using-captcha-in-adaptive-forms

CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

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 supports CAPTCHA in adaptive forms. You can use reCAPTCHA service by Google to implement CAPTCHA.

NOTE
AEM Forms support only reCaptcha v2. Any other version is not supported.
CAPTCHA in adaptive forms is not supported in offline mode on AEM Forms app.

Configure ReCAPTCHA service by Google google-recaptcha

Form authors can use the reCAPTCHA service by Google to implement CAPTCHA in adaptive forms. It offers advanced CAPTCHA capabilities to protect your site. For more information on how reCAPTCHA works, see Google reCAPTCHA.

recaptcha

To implement the reCAPTCHA service in AEM Forms:

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

  2. Create configuration container for cloud services.

    1. Go to Tools > General > Configuration Browser.

    2. Do the following to enable the global folder for cloud configurations or skip this step to create and configure another folder for cloud service configurations.

      1. In the Configuration Browser, select the global folder and tap Properties.
      2. In the Configuration Properties dialog, enable Cloud Configurations.
      3. Tap Save & Close to save the configuration and exit the dialog.
    3. In the Configuration Browser, tap Create.

    4. In the Create Configuration dialog, specify a title for the folder and enable Cloud Configurations.

    5. Tap Create to create the folder enabled for cloud service configurations.

  3. Configure the cloud service for reCAPTCHA.

    1. On your AEM author instance, go to tools > Cloud Services.
    2. Tap reCAPTCHA. The Configurations page opens. Select the configuration container created in the previous step and tap Create.
    3. Specify Name, Site key, and Secret Key for reCAPTCHA service and tap Create to create the cloud service configuration.
    4. In the Edit Component dialog, specify the site and secret keys obtained in step 1. Tap Save Settings and then tap OK to complete the configuration.

    Once the reCAPTCHA service is configured, it is available for use in adaptive forms. For more information, see Using CAPTCHA in adaptive forms.

Use CAPTCHA in adaptive forms using-captcha

To use CAPTCHA in adaptive forms:

  1. Open an adaptive form in edit mode.

    note note
    NOTE
    Ensure that the configuration container selected when creating the adaptive form contains the reCAPTCHA cloud service. You can also edit adaptive form properties to change the configuration container associated with the form.
  2. From the component browser, drag-drop the Captcha component onto the adaptive form.

    note note
    NOTE
    Using more than one Captcha component in an adaptive form is not supported. Also, it is not recommended to use CAPTCHA in a panel marked for lazy loading or in a fragment.
    note note
    NOTE
    Captcha is time-sensitive and expires in about a minute. Therefore, it is recommended to place the Captcha component just before the Submit button in the adaptive form.
  3. Select the Captcha component you added and tap cmppr to edit its properties.

  4. Specify a title for the CAPTCHA widget. The default value is Captcha. Select Hide title if you do not want title to appear.

  5. From the Captcha service drop-down, select reCaptcha to enable reCAPTCHA service if you configured it as described in ReCAPTCHA service by Google. Select a configuration from the Settings drop-down. Also, select the size as Normal or Compact for the reCAPTCHA widget.

    note note
    NOTE
    Do not select Default from the Captcha service drop-down as the default AEM CAPTCHA service is deprecated.
  6. Save the properties.

The reCAPTCHA service is enabled on the adaptive form. You can preview the form and see the CAPTCHA working.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da