Google ReCaptcha: Easy on Humans, Hard on Bots
Table of Contents
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.
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]
How to get reCAPTCHA Site Key & Secret Key?
Site Key:
It is to render the below new reCAPTCHA widget in HTML.
Steps to get reCAPTCHA Site Key:
1. Go to the below link,
https://www.google.com/recaptcha/admin#list
2. Fill the Label [javadomain]
Domains [ngdeveloper.com]
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:
[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.