Skip to main content

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.

Comments

Post a Comment

Popular posts from this blog

6 guaranteed steps how to create CRON JOB FUNTION in wordpress

Create Cron Job function in Wordpress plugin Step 1: Register function on plugin activate  register_activation_hook(__FILE__, 'activate_one'); Step 2: add_filter function for interval //Filter for Adding multiple intervals add_filter( 'cron_schedules', 'intervals_schedule' ); // define interval function   function intervals_schedule($schedules) {   $schedules['everyminute'] = array(    'interval' => 60, // Every 1 minutes    'display'  => __( 'Every 1 minutes' )   );   return $schedules;  } Step 3: Activate hook function   //Schedule a first action if it's not already scheduled   function activate_one() {   if (!wp_next_scheduled('wpyog_cron_action')) {    wp_schedule_event( time(), 'everyminute', 'wpyog_cron_action');   }  } Step 4: Cron hook function   //Hook into that action that'll fire after 1 minutes   add_action('wpyog_cron_action', 'execute_

How to Create a jQuery Autocomplete in Wordpress

How to Create a jquery-ui Autocomplete in wordpress. Autocomplete provides suggestions while you type into the text field. In Wordpress we fetch dynamically matched pattern. Include javascript and css files in header. Create action inside functions.php or inside plugin code. add_action('wp_head', 'custom_register_scripts'); function custom_register_scripts(){ wp_register_style( 'techsudhir_jquery_ui_css', plugin_dir_url(__FILE__) . 'css/jquery-ui.css', false,'1.0.0' ); wp_enqueue_style( 'techsudhir_jquery_ui_css' ); wp_register_script('techsudhir_jquery_ui_js',plugin_dir_url(__FILE__) . 'js/jquery-ui.js',array('jquery'),'1.1', false); wp_enqueue_script('techsudhir_jquery_ui_js'); wp_localize_script( 'techsudhir_autocomplete', 'jqueryAutocomplete', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); wp_enqueue_script( 'techsudhir_

Facebook Login

Step 1: Go on Apps & create new Apps Step 2: Enter the app name & choose category Step 3: Enter the site domain Script code <div id="fb-root"></div> <script   src="http://connect.facebook.net/en_US/all.js#appId=<?php echo '603609636351597';?>"> </script> <script>    FB.init({              appId:'<?php echo '603609636351597';?>', cookie:true,              status:true, xfbml:true           });   FB.getLoginStatus(function(response) {   }); Login function call on click function faceLogin(){  FB.login(function(response) {    if (response.authResponse) {  FB.api('/me', function(response) { $('input[id=facebook_login_fb]').val(response['id']); $('#fb_login_form').submit();  });    } else {  console.log('User cancelled login or did