recaptcha How to add Google reCAPTCHA v2

[Alexray]

Hi there,

If you need to prevent some actions in your application made not by real people, this post is for you.
I am going to explain how easuly add Google reCAPTCHA v2 to any DataPage.

All you need is to have a Google account.

First, you need to create a key http://www.google.com/recaptcha/admin

This is very simple, you just need to type any label yuo wish, choose reCAPTCHA v2 and preferable validation method. I am going to use "I'm not a robot".
It is important to add domain of all the websites where you are going to use the DataPage. In case you are going to use only URL deployment option, the domain of your account, like 'AccountName.caspio.com' will be enough. Where 'AccountName' is a name of your Caspio account that you can find following  'Help->About Caspio'.

After creating a key you will see your site key that you will need to use later.

Second step is to add 2 snippets of code:

1) That part should be added to the Head tag on your own website or to the Header of the Configure Fields screen when you edit your DataPage:

<script type="text/javascript">
document.addEventListener("BeforeFormSubmit", function (event) {
if(grecaptcha.getResponse().length == 0){
   event.preventDefault();
   alert('Please pass reCaptcha to verify you are not a robot')
}
});
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Before pasting do not forget to either uncheck the checkbox 'Enable HTML editor' in the Advanced tab or enable 'Source'.

2) Then you need to add HTML block where you wish reCaptcha to apper on your DataPage and add the next code:

<div><div class="g-recaptcha" data-sitekey="YourSiteKey"></div></div>

 Where 'YourSiteKey' should be replaced with your site key.

 

The last step is to relax and stay assured that no robots will be able to mess up your data.

[GoodBoy]

Hi. Caspio has a standard CAPTCHA feature that you may also consider adding in your DataPage.

- https://howto.caspio.com/datapages/datapage-components/captcha/

[GoodBoy]

Just to add, you can easily customize the code length and difficulty of the Caspio CAPTCHA in the login form or web forms.

[ivan77]

Hi @Alexray ,

How to implement recaptcha Ver 3 ?