Google reCAPTCHA Field

Owned by Christo Gogler
Feb. 19, 2024
4 min read

CAPTCHAs are commonly used on websites and online forms to prevent automated bots from abusing or spamming the system.

Google reCAPTCHA is a widely used security feature and service provided by Google. It is designed to protect websites from spam, abuse, and automated attacks by verifying that the user is a human and not a bot.

This implementation uses Version 2 of reCAPTCHA.

 

 

More info about Google reCAPTCHA can be found on their official website: reCAPTCHA  |  Google for Developers

If you haven't already done it, install and setup your project. You can use the umkickstarter.

Continue with creating a new Contact Form instance.

Setting up Google reCAPTCHA

To setup your Google reCAPTCHA Account please follow those steps Developer's Guide  |  reCAPTCHA  |  Google for Developers

After you have set up the account you need to generate two keys:

  • Secret Key

  • Site Key

Setting up Contact Form Instance

Bildschirmfoto 2024-02-05 um 12.16.22.png
Bildschirmfoto 2024-02-05 um 12.15.38.png

 

  • Navigate to Apps and setup a new instance.

  • You can choose to add the Google reCAPTCHA V2 Field from the select box on the “Form Wizard” tab.

  • The Google reCAPTCHA Field gives you several ways to change the functionality and appearance of it. Those options will be explained next.

Site key & Secret key

Fill in the Site key and Secret key that you created on your Google reCaptcha account.

Both keys can be configured in a properties file as well like this:

cmsbs.recaptchav2.siteKey = "ADD_SITEKEY_HERE" cmsbs.recaptchav2.secretKey = "ADD_APIKEY_HERE"

If you wish to do so the two inputs for Site key & Secret key will be prefilled with those values.

Size

You can choose between two options that will display the field in two different ways:

 

  • normal: shows the Captcha in its default size horizontally

  • compact: shows the Captcha vertically

  •  

Theme

You can choose between a light and a dark theme for the Google reCAPTCHA Field.

 

  • Light: shows the Captcha in light mode

  • Dark: shows the Captcha in dark mode

Additional CSS classes

If you wish to add specific CSS classes to your Google reCAPTCHA Field to customize the appearance of it, then you can add those classes here. Those classes will be added to the div-Element containing the Google reCAPTCHA.

JavaScript Snippet

The JavaScript Snippet generated in the App instance has to be copied and added to the webpage where the form should be rendered.

If you add a Google reCAPTCHA Field an additional Script is needed. The JavaScript Snippet will be updated, so you need to copy the snippet again to your webpage.

<script src="https://www.google.com/recaptcha/api.js" async defer ></script>

Validation Process

When the validation process starts after the user clicks the Checkbox Google reCAPTCHA will display a Progress Spinner and a success or error message afterwards.

 

  • Once the validation has started, Google reCAPTCHA sends a request to Google solving a puzzle.

  • This happens in the background .

  • The solved puzzle will be transmitted with the form submit and validated on the server-side as well.

Proxy Settings

Since UM version 7.51.2, it is possible to use Captchas through a proxy. The configuration for this needs to be added to a file with the extension .properties in the /cmsbs-conf/conf.d directory.

You have the option to define either a global proxy:

cmsbs.proxy = http://username:password@host:port/ # cmsbs.ssl.checks = <none|relaxed|secure>

This setting would apply to various aspects such as downloads/includes in HTML newsletters.

Alternatively, you can specify a proxy specifically for Captchas: