reCAPTCHA Implementation Tutorial

Older version of reCAPTCHA :

Older version of captcha

New version of reCAPTCHA :

New version reCAPTCHA

You must have seen the above captcha on StackOverflow (Confirm that you are Human :O) or Google's Webmaster Tools website. They look much elegant and are much secure than the older ones.

What is it? reCAPTCHA is a free service from Google to protect websites from spam and abuse while letting real people pass through with ease. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site.

Advantage:

Its free.
Provides Advance Security.
Easy to use and Implement. Effortless integration.
Keeps Bots Away.

Steps to Implement reCAPTCHA

Register your website at reCAPTCHA: https://www.google.com/recaptcha/admin#list (Login with your Gmail Account)
You will get a form where you need to provide details like: Label, Domains, and Owners Email Ids.
Click Submit.
You will get Site Key: Use this in the HTML code your site serves to users and Secret Key: Used for communication between your site and Google. Be sure to keep it a secret.
Add the following code in your HTML pages :
Add this in the HTML tag (just before the closing head) :

<script src='https://www.google.com/recaptcha/api.js'></script>

Add below code at the end of <form> where you want the reCAPTCHA widget to appear:

<div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY"></div></script>

Example: reCAPTCHA.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>reCaptcha : Hello World Tutorial</title>
    </head>
    <body>
     <form id="form1" action="submit-data.php" method="post">
      Enter Some Text : <input type="someText" size="40"><br><br>
      <input type="submit" name="submit" value="Submit"><br><br>
      <div class="g-recaptcha" data-sitekey="PUT-YOUR-SITE-KEY-HERE"></div>
    </form>
    </body>
</html>

When users submit the above form, you'll get as part of the payload a string with the name "g-recaptcha-response". To check whether Google has verified that user, send a POST request with parameters to address https://www.google.com/recaptcha/api/siteverify :

1. secret (Your SECRET KEY)

2. response (i.e. value of g-recaptcha-response)

3. remoteip (end user IP)

Example: server-implementation.php

<?php
        $someText = $_POST['someText'];
        $reCaptcha=$_POST['g-recaptcha-response'];

        if(!$reCaptcha){
          echo "'"<h2>You must check reCaptcha.</h2>";
          exit;
        }

        $SECRET_KEY = "PASTE-YOUR-RECAPTCHA-SECRET-KEY-HERE";
        $reCaptchaResponse=file_get_contents("https://www.google.com/recaptcha/api/siteverify?
        secret=".$SECRET_KEY."&response=".$reCaptcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
   
        if($reCaptchaResponse.success == false)
        {
          //SEEMS LIKE A BOT!!
        }else
        {
          //ITS A GENUINE GUY!
        }
?>

Above example is in PHP: You can integrate reCaptcha at server end using other languages like ASP.NET, Java JSP, javaScript e.t.c

Have Questions? Post them here!

More Posts related to CSS,

More Posts: