reCAPTCHA Implementation Tutorial


Posted on : Wed, 14th Oct 15 01:34 pm (Updated on : Wed, 14th Oct 15 01:34 pm) UTC
Author : Code2care
2314 votes

Older version of reCAPTCHA :


New version of reCAPTCHA :

Google reCAPTCHA


Google 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 then 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 advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site.

Advantages :



Advertisements





Steps to Implement reCAPTCHA

  1. Register your website at reCAPTCHA : https://www.google.com/recaptcha/admin#list (Login with your Gmail Account)
  2. You will get a form where you need to provide details like : Label, Domains and Owners Email Ids .
  3. Click Submit.
  4. 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.
  5. Add the following code in you HTML pages :

    Add this in the HTML <head> </head> 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>


    File : reCAPTCHA.html Language : 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 user 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)
    File : server-implementation.php Language : 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

Code2care's mission is to share varied knowledge in technical and non-technical areas gathered during day-to-day learnings and development activities so that our visitors can leverage this portal to find solutions to their queries without re-inventing the wheel. Technical posts include Learnings, Tutorials, Video Tutorials, Code Snippets, Tips-n-tricks.

Follow us : Facebook - Twitter - Google +