Google reCAPTCHA using PHP and jQuery

Google reCAPTCHA using PHP and jQuery.

A CAPTCHA is a program that protects websites against bots by generating and grading tests that humans can pass but current computer programs cannot.
It is usually a graphic image with a series of distorted letters on an equally distorted or multicolored background.
Google has released the new reCAPTCHA. Using reCAPTCHA users can prove they are human without solving a CAPTCHA.

Steps for google reCAPTCHA implementation.

1. Create a secure key and site key
Register your site at Google from here – https://www.google.com/recaptcha/admin
    
2. Html Code

Now first of all include Google reCAPTCHA javascript library.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Now in form body section add reCAPTCHA DIV element

<form action="" method="POST">
    <input type="text" name="name" value="" />
    <input type="text" name="email" value="" />
    <textarea type="text" name="message"></textarea>
    <div class="g-recaptcha" data-sitekey="9LDDpf0eVtMZY6kdJnGhsYYY-5ksd-W"></div>
    <input type="submit" name="submit" value="SUBMIT">
</form

Now replace data-sitekey attribute value to your sitekey.

Now for server side validation. I have used PHP script.

<?php
if(isset($_POST['submit']) && !empty($_POST['submit'])){
    if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
        //your site secret key
        $secret = '6LfOtiDDDDDDDOv5_4vb4tocXZXASDFDW';
        //get verify response data
        $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
        $responseData = json_decode($verifyResponse);
        if($responseData->success){
            // After success statement
            $succMsg = 'Your contact request have submitted successfully.';
        }else{
            $errMsg = 'Robot verification failed, please try again.';
        }
    }else{
        $errMsg = 'Please click on the reCAPTCHA box.';
    }    
}
    
Now How to Validate using jQuery Validatation method

1. Replace Form reCAPTCHA element with 

<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}"></div>

2. Now add validation Rule

$("#regisForm").validate({
   ignore: ".ignore",
   rules: {
       "hiddenRecaptcha": {
           required: function() {
               if(grecaptcha.getResponse() == '') {
                   return true;
               } else {
                   return false;
               }
           }
       }
   }
});

Advantages of CAPTCHA

• Preventing Comment Spam in Blogs.
• Protecting Website Registration.
• Protecting Email Addresses From Scrapers.
• Online Polls.
• Preventing Dictionary Attacks.
• Search Engine Bots.
• Worms and Spam.