Google reCAPTCHA Tutorial
Google reCAPTCHA

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.

Live DemoDownload

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.

Google reCAPTCHA Form

When you submit you will get Site Key and Secret Key like:

Site Key
Site Key
Secret Key
Secret Key

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.

Live DemoDownload

 

RELATED ARTICLESMORE FROM AUTHOR

13 COMMENTS

  1. Great tutorial. Being a designer and not a programmer, where do I instruct the form or php to email to a certain email address? I also want a successful submission to open up a thank you page. Where would I code this? Tks 🙂

  5. Really great post. Especially for sample google-recaptcha.php file to download at the very beginning
    which made things much easy for me!!! 😀
    I tryed other tutorials but it was hard to make them work.
    Finally I found yours. It works perfeclty.
    Thanks a lot. Good luck.

  7. Thanks for this tutorial!

    Please, fix the code for PHP. The response from google reCAPTCHA API is actually a string in JSON format. So, I’d change the lines from 12 – 14 like this:

    $responseJSON =file_get_contents(“https://www.google.com/recaptcha/api/siteverify?secret=&response=”.$captcha.”&remoteip=”.$_SERVER[‘REMOTE_ADDR’]);

    $response = json_decode( $responseJSON );

    if ( ! $response->success )

    Enjoy your coding!

  10. Hello, i just put the code on localhost. Why i get error notification like this?

    Notice: Use of undefined constant success – assumed ‘success’
    Call Stack

    on this line: if($response.success==false)

Leave a Reply