Google ReCaptcha: Easy on Humans, Hard on Bots

Google ReCaptcha: Easy on Humans, Hard on Bots

Recently google introduced a new recaptcha to verify whether your website user is human or robot. It is the most easiest way with neat user interface to verify the humans or correct users and block the spam users.

google new recaptcha

 

demo
download

 

Requirements:

1. Google reCAPTCHA API [Based on the way you would like to render reCAPTCHA widget (HTML/script) you can import the below scripts. ]

[html]

<!– google recaptcha js import – rendering widget through scripts –>
<script src=’https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit’></script>

<!– google recaptcha js import – rendering widget in HTML –>
<script src=’https://www.google.com/recaptcha/api.js’></script>

[/html]

 

2. Google reCAPTCHA Site Keygoogle recaptcha site key

 

How to get reCAPTCHA Site Key & Secret Key?

Site Key:
It is to render the below new reCAPTCHA widget in HTML.

google recaptcha light

Steps to get reCAPTCHA Site Key:

1. Go to the below link,
https://www.google.com/recaptcha/admin#list

google recaptcha site key register
2. Fill the Label [javadomain]
Domains [ngdeveloper.com]

javadomain google recaptcha site key

 

Rendering new reCAPTCHA widget:

1. HTML: [Verification can be done through POST Parameter]

Paste this in your register/sign in/contact forms,

[html]
<div class="g-recaptcha" data-sitekey="GOOGLE_RECAPTCHA_SITE_KEY"></div>

[/html]

2. Javascript: [Verification can be done through Scripts itself]

[html highlight=”4″]

var onloadCallback = function() {
// Renders the HTML element with id ‘google_recaptcha’ as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to ‘widgetId1’.
widgetId1 = grecaptcha.render(‘google_recaptcha’, {
‘sitekey’ : ‘GOOGLE_RECAPTCHA_SITE_KEY’,
‘theme’ : ‘light’
});

}

[/html]

Note:
1. google_recaptcha is the id of the div where we would like to render the google new recaptcha widget.

[html]
<div id="google_recaptcha"></div>

[/html]

2. theme can be light/dark, light is the default theme.

 

HTML Source code:

sign up form with google recaptcha

 

[html highlight=”13″]

<div class="col-md-4 col-md-offset-4">
<h2>Sign Up</h2>

<form class="form-horizontal" method="post" >
<fieldset>
<label>Name</label>
<input type="text" name="name" class="form-control" placeholder="Naveenkumar Gunasekaran" required="true">
<label>Email Address</label>
<input type="email" name="email" placeholder="Naveen@ngdeveloper.com" class="form-control" required="true">
<label>Password</label>
<input type="password" name="password" class="form-control" required="true">
<br/>
<div id="google_recaptcha"></div>
<br/>
<label><input type="checkbox" name="terms"> I agree with the <a href="#">Terms and Conditions</a>.</label>
<br/>
<br/>
<input type="submit" value="Sign up" class="btn btn-primary" onclick="registerUser();"/>
<div class="clearfix"></div>
<fieldset>
</form>
</div>

[/html]

 

 

Script to read the Google reCAPTCHA response:

 

[html highlight=”6,15″]

<script type="text/javascript">
// to render the google reCAPTCHA widget
var onloadCallback = function() {
// Renders the HTML element with id ‘example1’ as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to ‘widgetId1’.
widgetId1 = grecaptcha.render(‘google_recaptcha’, {
‘sitekey’ : ‘GOOGLE_RECAPTCHA_SITE_KEY’,
‘theme’ : ‘light’
});

}

// to read the google recaptcha response to verify human or robot.
function registerUser(){
if(isEmpty(<strong>grecaptcha.getResponse(widgetId1)</strong>)){
alert("You are robot");
}else{
// your login/register ajax or other logics
alert("You are Human!");
}
}

function isEmpty(inp) {
return (!inp || 0 === inp.length);
}

</script>

[/html]

 

We have verified here based on the grecaptcha.getResponse(widgetId1) response. If the response is having any value which means that the checkbox is checked. Checkbox will be checked only for humans. So we are verifying the humans here without the secret key and sending the responses to the google.

 

If you want to verify based on the POST response, then we need to read the response and append the secret key and send it to google. And google will be sending you the JSON response, based on JSON success true/false, you can verify the humans and proceed further.

 

We will be sharing you the PHP POST response way google new recaptcha verifying humans sample code in the next post.

 

 

Leave a Reply