Google has recently announced new service to prevent your website from spammers and attackers. It’s completely new reCAPTCHA API called “Are you a Robot?”. They named it “NO CAPTCHA reCAPTCHA”. It is designed to prevent your websites from attackers and spammer.
[button-blue url=”http://demos.eggslab.net/Google-reCAPTCHA/” target=”_blank” position=””]Live Demo[/button-blue][button-green url=”http://demos.eggslab.net/downloads/5″ target=”_blank” position=””]Download[/button-green]
In this tutorial we are going to learn “How to Integrate Google reCAPTCHA in your site?“.
Register Your Website to Get Secret Key
You need to register your website on Google reCAPTCHA to get Site Key and Secret Key for your website. You can access to Google reCAPTCHA from here.
Login to Google reCAPTCHA using your Google Account and submit form.
When you submit you will get Site Key and Secret Key like:
Integrate Google reCAPTCHA into your Website
To integrate Google reCAPTCHA into your website you need to put it in Client Side as well as in Server side. In Client HTML page you need to integrate this line before <head> tag.
<script src='https://www.google.com/recaptcha/api.js'></script>
To put Google reCAPTCHA widget into your form add the following code below your form.
<div class="g-recaptcha" data-sitekey="<---Your site Key--->"></div>
Don’t forget to replace <—Your site Key—> with your Site Key.
When the form get submitted to Server, the above script will send ‘g-recaptcha-response’ as a POST data and then you need to verify whether user has checked the CAPTCHA or not.
Simple Comment Form to Demonstrate Google reCAPTCHA
Here is HTML Portion
<html>
<head>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<h1>Google reCAPTCHA Tutorial</h1>
<form action="" method="post">
<label>Email</label>
<div><input name="email" type="text" placeholder="Type Your Email" size="39" /></div><br>
<label>Comment</label>
<div><textarea name="comment" cols="40" rows="5" placeholder="Type You Comment..."></textarea></div><br>
<div class="g-recaptcha" data-sitekey="<---Your Site Key--->"></div>
</form>
</body>
</html>
I am using PHP for Sever Side Scripting avd cialis review. So after form will submit we will check POST variable.
if(isset($_POST['submit']))
{
$email=$_POST['email'];
$comment=$_POST['comment'];
$captcha=$_POST['g-recaptcha-response'];
if(!$captcha)
{
echo 'Please check the the captcha form.';
}
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=<--Your Secret Key-->&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if($response.success==false)
{
echo "Hey! Spammer I'm Using Google reCAPTCHA! Get Out";
}
else
{
echo 'Thanks for posting comment.';
}
}
Don’t forget to replace <–Your Secret Key–> with your own secret key.
For more documentation you can read from here.
[button-blue url=”http://demos.eggslab.net/Google-reCAPTCHA/” target=”_blank” position=””]Live Demo[/button-blue][button-green url=”http://demos.eggslab.net/downloads/5″ target=”_blank” position=””]Download[/button-green]
Leave a Reply