Monthly Archives: April 2015

Google Recaptcha – Defeating spam got a lot easier

Earlier version of the recaptcha was just a pain in the ass. For developers to implement and also for users who had to squint and type distorted text. Remember this?

2015-04-10 09_07_07-Customizing the Look and Feel of reCAPTCHA - reCAPTCHA — Google Developers

 

Well Google changed that with this new version where the user only had to Tick a check box and some magic happened and it checked if the user is authentic. (Its not clear on their website how exactly they do it, but i think they check for data that has been captured by their analytics tools or cookies or something to make sure that your human)

2015-04-10 09_10_56-reCAPTCHA_ Easy on Humans, Hard on Bots

Here also it falls back to a captcha text if it cant determine if your human so there is a fail safe built in.

Anyway the good news for developers is we can quickly add captcha to our pages without going through a tedious process. So I’m going to give the steps down here that I used to implement recaptcha on my free invoicing tool. (Invoicer)

Step 1.

Go to https://www.google.com/recaptcha/intro/index.html and click the get Recaptcha buton.

2015-04-10 09_14_19-reCAPTCHA_ Easy on Humans, Hard on Bots

Step 2.

Enter the Label and domains that this recaptcha needs to be active on, and click register.

2015-04-10 09_15_43-reCAPTCHA_ Easy on Humans, Hard on Bots

Step 3.

On the next screen you will get the instructions on how to add the recaptcha into your page. But Ill list down the steps here as well.

On client side,

add the script file in the head tag.

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

Add the following code at the end of the form where you want the captcha widget to appear,

 <div class="g-recaptcha" data-sitekey="6LddIgUTAAAAAEky5noUKqsnA3QPysdXQ05WFsnB"></div> 

On server side,

You need to capture the value generated by client side code and post it to google for verification. This bit can be a bit tricky.

How I did it on Google App Engine is to do a url fetch. Think you will be able to do the same by using curl. Or also ajax.

 <?php

/* recaptcha validation */
<pre>$data = ['secret' => 'YOUR OWN SECRET KEY', 'response' => $_REQUEST['g-recaptcha-response']];
$data = http_build_query($data);
$context = [
    'http' => [
        'method' => 'POST',
        'header' => "custom-header: custom-value\r\n" .
            "custom-header-two: custom-value-2\r\n",
        'content' => $data
    ]
];
$context = stream_context_create($context);
$result = file_get_contents('https://www.google.com/recaptcha/api/siteverify', false, $context);

You will get a json response and if the success attribute it true you can proceed with processing the form values.

<pre>$success_status = json_decode($result)->success;

if($success_status) {

}</pre>

 

More information can be found here regarding verification.

The trickiest part is handling it on server side. If you have any problems with that please post on the comments section and I will try and help. 🙂