Introduction

Invisible reCAPTCHA Form Element Plugin is used to protect forms developed in Joget DX from spams or abuse from malicious automated bots that are programmed to enter false or irrelevant information into a form, while being as transparent as possible to legitimate users of the platform.

About reCAPTCHA

reCAPTCHA is a free Google service with the acronym of "Completely Automated Public Turing test to tell Computers and Humans Apart".
It can identify whether a form is submitted by a real human or a bot.
For more information about reCAPTCHA, see: https://www.google.com/recaptcha/about/.

Installing the plugin in Joget DX

You can follow the steps below, or refer to Manage Plugins to read more about managing plugins:

Download invisible-recaptcha-field-7.0.0.jar into your computer
In the Joget DX platform, go to System Settings > Manage Plugins > Upload Plugin
Click on Choose File, select the .jar file you just downloaded, and click Upload

Using the plugin in a Form

In the Form Builder, open up any Form that you wish to implement this feature for.

Search the Form Element Palette for the Invisible reCAPTCHA element under the Marketplace section.

Drag and drop this element into your Form.

Click on the element in your form and the Edit Invisible reCAPTCHA panel appears (on the right hand side).

In the Edit Invisible reCAPTCHA configuration, you are required to insert the information for the following fields:

ID
reCAPTCHA site key
reCAPTCHA secret key

Your ID can be any meaningful name you want (e.g.: invisible_recaptcha).

Generating important keys for the plugin will explain how to generate the required reCAPTCHA site key and reCAPTCHA secret key for this plugin.

Generating important keys for the plugin

You can follow the steps below, or refer to this related guide online:

Go to https://www.google.com/recaptcha/about/
Click on v3 Admin Console at the navigation bar
Give your Label a meaningful name (e.g.: recaptcha_test)
For the reCAPTCHA Type, select reCAPTCHA v2 > Invisible reCAPTCHA badge
Under Domains, put the domain name that your Joget DX instance is hosted on.
Setting a domain name
If you are using Joget DX on a local computer for development purposes, you can put "localhost" as your domain name.
Tick Accept the reCAPTCHA Terms of Service
Click Submit

Copy the generated reCAPTCHA site keys and reCAPTCHA secret keys, and paste them into their respective fields in the Edit Invisible reCAPTCHA configuration.

Remember to click Apply Change and save the form.

Important reCAPTCHA keys

Site keys can actually be shown publicly, but it is censored in this example.
Secret keys must never be shown or shared with anyone, because the server uses it to verify reCAPTCHA responses upon form submission.

Testing out the plugin

Try submitting the form where you added the Invisible reCAPTCHA plugin.

If the bottom right corner of your form shows the protected by reCAPTCHA, it means that the Invisible reCAPTCHA plugin is working as intended.

You can seek help from Errors of the plugin if the Invisible reCAPTCHA plugin is not working as intended.

Errors of the plugin

There are two types of error that may occur when using the Invisible reCAPTCHA plugin:

reCAPTCHA widget error
Plugin validation error

What is a reCAPTCHA widget error?

reCAPTCHA widget error occurs when you may have chosen the v2 tickbox option instead of the v2 invisible option.

Remember to choose the v2 invisible option, so that the reCAPTCHA site key is enabled for the Invisible reCAPTCHA.

This is how a reCAPTCHA widget error looks like.

Because of this error, the "Form Submitted" message is not shown on the top left corner of the Form.

What is a Plugin validation error?

We will explain how Plugin validation error can occur by demonstrating how an error as such can be replicated.

To replicate Plugin validation error is very simple, you only have to provide an invalid reCAPTCHA secret key.

You can change a letter to a different letter or simply make up a reCAPTCHA secret key that does not exist.

For now, let's see what will happen if we do not add a Custom error text and we disable the Debug mode.

Following the configurations demonstrated, the Plugin validation error has been replicated:

"Validation Error" is printed out to show app designers that the validation has failed
"reCAPTCHA error" is a Default error text printed out if no Custom error text is added
protected by reCAPTCHA widget does not show an red error message like what happened in What is a reCAPTCHA widget error?

Edit Invisible reCAPTCHA: Other configuration properties

Important note: The default error text does not explain much to app designers on what "reCAPTCHA error" actually means.

This is why we have two other configuration properties for solving this issue:

Custom error text
Debug mode

You can refer to Custom error text & Debug mode sections for more information.

Tip: Hover on the tooltips (? icon) in Edit Invisible reCAPTCHA configuration to read what each configuration properties mean.

Custom error text & Debug mode

What is Custom error text for? incomplete

image to be inserted here later..

Custom error text is designed to be printed out to end-users when there is a Plugin validation error.

Without using the Custom error text configuration property, the top left corner of your Form will only display the "Validation Error" and a default error text of "reCAPTCHA error" like what happened in What is a Plugin validation error?

What is Debug mode for? incomplete

Debug mode helps app designers indicate the problem or error in different formats (depending if enabled or disabled).