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.

Installing the plugin in Joget DX

...

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

1. Download plugin's jar file from https://github.com/jogetoss/invisible-recaptcha-field-7.0.0.jar/releases into your computer
2. In the Joget DX platform, go to System Settings > Manage Plugins > Upload Plugin
3. Click on Choose File and upload the File, select the .jar file you just downloadedClick , and click Upload

...

Using the plugin

...

in a Form

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

Image Added

Search the Form Element Palette for Scroll your Palette until you find the Invisible reCAPTCHA element under the Marketplace section.

Image Removed

Drag and drop this element this element into your Form.

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

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

...

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

The next section Generating important keys for the plugin will explain how to generate the required reCAPTCHA site key and reCAPTCHA secret key for the Invisible reCAPTCHAthis plugin.

Generating important keys for the plugin

You can follow the steps below, or refer to https://help.salesforce.com/s/articleView?id=sf.workdotcom_quemgmt_set_up_captcha_googlekeys.htm&type=5: this related guide online:

1. Go to https://www.google.com/recaptcha/about/
2. Click on v3 Admin Console at the navigation bar

3. Give your Label a meaningful name (e.g.

   recaptcha

    recaptcha_test)

4. For the reCAPTCHA Type,

   tick

   select reCAPTCHA v2 > Invisible reCAPTCHA badge

5. Under Domains, put the domain name that your Joget DX instance is hosted on.

   Info
   title 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.

6. Tick Accept the reCAPTCHA Terms of Service
7. Click Submit

Image Added

Copy the generated reCAPTCHA site keys and reCAPTCHA secret keys.

Image Removed

Paste , and paste them into their respective fields in the Edit Invisible reCAPTCHA board configuration.

Image RemovedImage Added

Remember to click Apply Change and Save in the Form Buildersave the form.

Testing out the plugin

Image Added

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

If the top bottom right corner of your page form shows the image below protected by reCAPTCHA, it means that the Invisible reCAPTCHA plugin is working .Image Removedas intended.

You can seek help from Plugin Error Troubleshooting if the Invisible reCAPTCHA plugin is not working as intended.

Plugin Error Troubleshooting

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 the widget on the frontend is unable to function properly.

Image Added

For example, 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.

Image Added

This is how a reCAPTCHA widget error looks like.

Because of this error, the form will not be submitted.

What is a Plugin validation error?

This error occurs when the reCAPTCHA plugin is unable to perform backend validation to verify the user that has submitted the form.

Image Added

For example, to simply replicate a Plugin validation error, 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.

Image Added

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?

In this case, Debug mode is disabled, so you will see the default error text.

But note that if Debug mode is enabled, you will see neither default error text or Custom error text (even if you have added it).

Read more on Custom error text and Debug mode in Custom error text & Debug mode.

Custom error text & Debug mode

• Custom error text is printed out to app designers only when there is a Plugin validation error
• Debug mode helps app designers indicate the error text or message

What is Custom error text for?

Image Added

To demonstrate what the Custom error text and Debug mode are used for, once again the reCAPTCHA secret key is made invalid to replicate the Plugin validation error.

In this example, the Custom error text is set as "Invalid reCAPTCHA secret key: Please ensure you secret key is valid!".

The Debug mode needs to be disabled for now in order to show the Custom error text on the top left corner of the Form.

Remember to click Apply Change and save the form.

Image Added

Now you are able to see how Custom error text works.

Instead of printing out the default error text, the Custom error text is printed out.

You see "Invalid reCAPTCHA secret key: Please ensure you secret key is valid!" instead of "reCAPTCHA error".

Now that we have seen how Custom error text works, the next section explains Debug mode.

What is Debug mode for?

Image Added

With the same invalid reCAPTCHA secret key and Custom error text, but this time Debug mode is enabled.

Remember to click Apply Change and save the form.

Image Added

Notice that enabling Debug mode results in the Custom error text not being printed out, even though the Custom error text is being added.

Instead, the top left corner of the Form shows two error messages:

• "[reCAPTCHA DEBUG MODE ENABLED!]" states that Debug mode is enabled, to warn app designers that additional error info are available in the server log
• "reCAPTCHA error: invalid-input-secret" states that the reCAPTCHA secret key is invalid

Availability of the plugin

The Invisible reCAPTCHA plugin will only work in some situations.
See table below: