logo

{ TECH BLOG }

NO CAPTCHA reCAPTCHA - understanding and integrating Google's new recaptcha API

15-Jan-2015By Suman Kumar


Contents:

1. Description

SAY hello to new recaptcha API that Google has announced as new service to prevent spams and attacks to your website. They name it “NO CAPTCHA reCAPTCHA” . It is designed to protect your website from spams and abuse. God Bless Spammers :)

The new reCAPTCHA which is TOUGH ON BOTS, EASY ON HUMANS. Users can now verify themselves as humans without having to solve a CAPTCHA, all they need to do is just a single click and they'll confirm that they are not a robot.

googles-old-captcha
googles-new-captcha

2. How reCAPTCHA works

reCAPTCHA is a free service which uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease.reCAPTCHA offers more than just spam protection. Every time our CAPTCHAs are solved, that human effort helps digitize text, annotate images, and build machine learning datasets

captcha-long-cat

Depending on users move if Google’s risk analysis tool needs more verification then it will present the below screen, which is very rare if user is a human.

captcha-second-option

Ok that's all the description ends here, lets gear up for some real actions now.

3. Configuring reCAPTCHA for your site

you need two things before integrating reCAPTCHA in our site.

  • site key
  • secret key

3a. Registration for reCAPTCHA [if you don't have already]

If you don't have this for your site, heads up to Google's reCaptcha Admin and login through your google account.

post successful login you will be presented the below screen where you need to fill the form to mark your site as registered for using reCAPTCHA.

p.s: No need to put sub Domain names in to the list as it will be taken by default.

recaptcha-registration

Once you are done with the registration process below screen shows up which have your site and secret key along with other information.

3b. Getting the KEYs

Once you are done with the registration process below screen shows up which have your site and secret key along with other information.

recaptcha-site-keys

p.s: Never share your secret key with anyone

We are done with the registration and got our keys, now time to implement the same.

4. Implementing on your site

Open your page in which you want to enable reCAPTCHA [below is my site's contact us form where we will enable reCAPTCHA]

mysite-before-integrating-captcha

Now we need to add the placeholder where your reCAPTCHA will appear in the form. For our contact us form we need reCAPTCHA to appear just before the SUBMIT button.

So just simply copy and paste the below <div> tag where you need the reCAPTCHA to appear. do not forget to enter your site key which we got at the time of registration.


<div class="g-recaptcha" data-sitekey="[PASTE_YOUR_SITE_KEY_HERE]"></div>
                                

And now our page will look like this.

mysite-after-integrating-captcha

Yippee !! Our reCaptcha has been added and is also working. But now when the user submits the form we need to validate that he resolved the CAPTCHA successfully.

5. Validating reCaptcha on server side

We need to write some server side codes to verify, in our case we will write PHP code. You can use any server side programming to validate the same depending on your project setup.


<?php
  if (validate()) { //Validate form inputs
  $name =$_POST["name"];
  $from =$_POST["email"];
  $mobile =$_POST["phone"];
  $subject =$_POST["sub"];
  $msg =$_POST["message"];
  $gcaptcha = $_POST["g-recaptcha-response"];  
  $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=[INSERT_YOUR_SECRET_KEY_HERE]&response=".$gcaptcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
  if( response != null && $response.success==false)
        {
        return false; //CAPTCHA VALIDATION FAILED
        
        }  
         // This line means  the captcha has been verified successfully
        //insert your own login here to process user inputs.
       //like mail() or save inputs in Database
      // Display a thank you notice.
        return true;
?>
                                

$_POST["g-recaptcha-response"] is the captcha response came automatically fills, when the user validates captcha from the UI. you need to post this response to google along with your secret key to google for validation.

We are capturing the reponse from google in variable $response and by accessing the Boolean field ($response.success) we can verify the validation process.


If you have any questions or suggestion for this blog, please leave a comment below. I will get back to you ASAP. For contacting me please use the site's Contact form or you can directly mail me contact@devodee.com .

If you have any freelancing project|task on your mind, please be in touch with me here.
For my recent works please visit the portfolio section.

advertisement