Use reCAPTCHA in Adaptive Forms using-reCAPTCHA-in-adaptive-forms

Adobe recommends using the modern and extensible data capture Core Componentsfor creating new Adaptive Formsor adding Adaptive Forms to AEM Sites pages. These components represent a significant advancement in Adaptive Forms creation, ensuring impressive user experiences. This article describes older approach to author Adaptive Forms using foundation components.

Version
Article link
AEM 6.5
Click here
AEM as a Cloud Service
This article
Applies to
Adaptive Form based on Foundation Components.
For Adaptive Form based on Core Components, Click 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 support reCAPTCHA in Adaptive Forms. You can use reCAPTCHA service by Google to implement CAPTCHA.

NOTE
  • AEM Forms support reCaptcha v2 and reCaptcha Enterprise. Any other version is not supported.
  • reCAPTCHA 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 reCAPTCHA in Adaptive Forms. It offers advance CAPTCHA capabilities to protect your site. For more information on how reCAPTCHA works, see Google reCAPTCHA. reCAPTCHA service includes reCAPTCHA v2 and reCAPTCHA Enterprise which you can integrate into AEM Forms. Based on your requirement you can configure reCAPTCHA service to enable:

reCAPTCHA

Configure reCAPTCHA Enterprise steps-to-implement-reCAPTCHA-enterprise-in-forms

  1. Create or select a Google Cloud project and enable reCAPTCHA Enterprise API.

  2. Obtain the Project ID and create an API key and a site key for websites.

  3. 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.
  4. Configure the cloud service for reCAPTCHA Enterprise.

    1. On your Experience Manager author instance, go to tools-1 > 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.

Once the reCAPTCHA Enterprise service is enabled, it is available for use in adaptive forms. See using CAPTCHA in adaptive forms.

Configure Google reCAPTCHA v2 steps-to-implement-reCAPTCHA-v2-in-forms

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

  2. 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.
  3. Configure the cloud service for reCAPTCHA v2.

    1. On your AEM author instance, go to tools-1 > Cloud Services.
    2. Select reCAPTCHA. The Configurations page opens. Select the configuration container that you created and select Create.
    3. Select version as reCAPTCHA v2 , specify Name, Site key, and Secret Key for reCAPTCHA service (Obtained in Step 1) and select Create to create the cloud service configuration.
    4. In the Edit Component dialog, specify the site and secret keys obtained in step 1. Select Save Settings and then select 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 reCAPTCHA in adaptive forms using-reCAPTCHA

To use reCAPTCHA 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.
    • reCaptcha is time-sensitive and expires in about a couple of minutes. Therefore, it is recommended to place the Captcha component just before the Submit button in the adaptive form.
  3. Select the Captcha component that you added and select 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.

  6. Select a configuration from the Settings drop-down for reCAPTCHA Enterprise or reCAPTCHA v2

    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.
    2. You can select a Bind Reference, In Bind Reference the data submitted is a bound data, otherwise it is unbound data. Below are XML examples of unbound data and bound data (with bind reference as SSN) respectively, when a form is submitted.
    code language-xml
    
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <afData>
            <afUnboundData>
                <data>
                    <captcha16820607953761>
                        <captchaType>reCaptchaEnterprise</captchaType>
                        <captchaScore>0.9</captchaScore>
                    </captcha16820607953761>
                </data>
            </afUnboundData>
            <afBoundData>
                <Root
                    xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
                    <PersonalDetails>
                        <SSN>371237912</SSN>
                        <FirstName>Sarah </FirstName>
                        <LastName>Smith</LastName>
                    </PersonalDetails>
                    <OtherInfo>
                        <City>California</City>
                        <Address>54 Residency</Address>
                        <State>USA</State>
                        <Zip>123112</Zip>
                    </OtherInfo>
                </Root>
            </afBoundData>
            <afSubmissionInfo>
                <stateOverrides/>
                <signers/>
                <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
                <afSubmissionTime>20230608034928</afSubmissionTime>
            </afSubmissionInfo>
            </afData>
    
    code language-xml
    
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <afData>
            <afUnboundData>
                <data/>
            </afUnboundData>
            <afBoundData>
                <Root
                    xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"
                    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
                    <PersonalDetails>
                        <SSN>
                            <captchaType>reCaptchaEnterprise</captchaType>
                            <captchaScore>0.9</captchaScore>
                        </SSN>
                        <FirstName>Sarah</FirstName>
                        <LastName>Smith</LastName>
                    </PersonalDetails>
                    <OtherInfo>
                        <City>California</City>
                        <Address>54 Residency</Address>
                        <State>USA</State>
                        <Zip>123112</Zip>
                    </OtherInfo>
                </Root>
            </afBoundData>
            <afSubmissionInfo>
                <stateOverrides/>
                <signers/>
                <afPath>/content/dam/formsanddocuments/captcha-form</afPath>
                <afSubmissionTime>20230608035111</afSubmissionTime>
            </afSubmissionInfo>
            </afData>
    

    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.
    Google protected by reCAPTCHA badge

  7. Save the properties.

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

Show or hide CAPTCHA component based on rules show-hide-captcha

You can select to show or hide the CAPTCHA component based on rules that you apply on a component in an Adaptive Form. Select the component, select edit rules , and select Create to create a rule. For more information on creating rules, see Rule Editor.

For example, the CAPTCHA component must display in an Adaptive Form only if the Currency Value field in the form has a value of more than 25000.

Select the Currency Value field in the form and create the following rules:

Show or hide rules

NOTE
When you select a reCAPTCHA v2 configuration and the size is set to Invisible, the show/hide option remains disabled.

Validate CAPTCHA validate-captcha

You can validate CAPTCHA in an Adaptive Form either when you submit the form or base the CAPTCHA validation on user actions and conditions.

Validate CAPTCHA on form submission validation-form-submission

To validate a CAPTCHA automatically when you submit an Adaptive Form:

  1. Select the CAPTCHA component and select cmppr to view the component properties.
  2. In the Validate CAPTCHA section, select Validate CAPTCHA at form submission.
  3. Select Done to save the component properties.

Validate CAPTCHA on user actions and conditions validate-captcha-user-action

To validate a CAPTCHA based on conditions and user actions:

  1. Select the CAPTCHA component and select cmppr to view the component properties.
  2. In the Validate CAPTCHA section, select Validate CAPTCHA on a user action.
  3. Select Done to save the component properties.

Experience Manager Forms provides ValidateCAPTCHA API to validate CAPTCHA using pre-defined conditions. You can invoke the API using a custom Submit Action or by defining rules on components in an Adaptive Form.

The following is an example of a ValidateCAPTCHA API to validate CAPTCHA using pre-defined conditions:

if (slingRequest.getParameter("numericbox1614079614831").length() >= 5) {
     GuideCaptchaValidatorProvider apiProvider = sling.getService(GuideCaptchaValidatorProvider.class);
        String formPath = slingRequest.getResource().getPath();
        String captchaData = slingRequest.getParameter(GuideConstants.GUIDE_CAPTCHA_DATA);
        if (!apiProvider.validateCAPTCHA(formPath, captchaData).isCaptchaValid()){
            response.setStatus(400);
            return;
        }
    }

The example signifies that the ValidateCAPTCHA API validates the CAPTCHA in the form only if number of digits in the numeric box specified by the user while filling the form is greater than 5.

Option 1: Use Experience Manager Forms ValidateCAPTCHA API to validate CAPTCHA using a custom Submit Action

Perform the following steps to use the ValidateCAPTCHA API to validate CAPTCHA using a custom Submit Action:

  1. Add the script that includes the ValidateCAPTCHA API to custom Submit Action. For more on custom Submit Actions, see Create a custom Submit Action for Adaptive Forms.
  2. Select the name of the custom Submit Action from the Submit Action drop-down list in Submission properties of an Adaptive Form.
  3. Select Submit. The CAPTCHA gets validated based on the conditions defined in ValidateCAPTCHA API of the custom Submit Action.

Option 2: Use Experience Manager Forms ValidateCAPTCHA API to validate CAPTCHA on a user action before submitting the form

You can also invoke ValidateCAPTCHA API by applying rules on a component in an Adaptive Form.

For example, you add a Validate CAPTCHA button in an Adaptive Form and create a rule to invoke a service on the click of a button.

The following figure illustrates how you can invoke a service on the click of a Validate CAPTCHA button:

Validate CAPTCHA

You can invoke the custom servlet that includes ValidateCAPTCHA API using the rule editor and enable or disable the submit button of the Adaptive Form based on the validation result.

Similarly, you can use rule editor to include a custom method to validate CAPTCHA in an Adaptive Form.

Edit reCAPTCHA service domain reCAPTCHA-service-domain

reCAPTCHA service uses https://www.recaptcha.net/ as the default domain. You can modify the settings to set https://www.google.com/ or any custom domain name for loading, rendering, and validating the reCAPTCHA service.

Set the af.cloudservices.recaptcha.domain property of the Adaptive Form and Interactive Communication Web Channel Configuration configuration to specify https://www.google.com/ or any other custom domain name. The following JSON file displays a sample:

{
  "af.cloudservices.recaptcha.domain": "https://www.google.com/"
}

To set values of a configuration, Generate OSGi Configurations using the AEM SDK, and deploy the configuration to your Cloud Service instance.

See Also see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab