Advertisement
  1. Web Design
  2. Form Design
Webdesign

How to Integrate “No CAPTCHA reCAPTCHA” in Your Website

by
Difficulty:BeginnerLength:ShortLanguages:

CAPTCHA inputs are perhaps the commonest of all frustrating experiences on the web. They’re painful enough for the majority of users, let alone the visually impaired or anyone who relies on assistive technologies such as screen-readers to access the web. However, sadly, CAPTCHAs are absolutely vital in the fight against spam.

A necessary evil thanks spammers
A necessary evil (thanks spammers)

Ironically, even though traditional “distorted text” CAPTCHAs are awkward for human users to read, modern artificial intelligence technology has less trouble solving them. Google even uses similar technology to read house numbers and roadsigns to confirm Google Street View locations!

Google robots can accurately read these

It’s only logical therefore that Google’s own developers came up with the best CAPTCHA solution so far, towards the end of 2014. The No CAPTCHA reCAPTCHA requires nothing more than a finger tap, a mouse click, or focusing on the input with your keyboard and hitting the spacebar.

In most cases it’s that simple, but if Google’s risk analysis still can’t be sure you’re human, a second prompt will appear.

You can see it in action all over the web already, like on the submission page of @materialup for example.

Get No CAPTCHA reCAPTCHA

Let’s cut to the chase and get ourselves setup with No CAPTCHA.

Step 1

First, we need an API key, so head on over to https://www.google.com/recaptcha/admin. To gain access to this page you’ll need to be logged into a Google account. You’ll be asked to register your website, so give it a suitable name, then list domains (for example tutsplus.com) where this particular reCAPTCHA will be used. Subdomains (such as webdesign.tutsplus.com and code.tutsplus.com) are automatically taken into account.

Step 2

With that done you’ll be given a site key and its partner secret key:

Step 3

Underneath the keys you’ll see some snippets for including reCAPTCHA on your website. First up there’s the JavaScript:

You can also define which of the 40 supported languages you’re using by adding a parameter to the string. Here we’re adding es which will give us a Spanish language reCAPTCHA:

Place this script tag at the foot of your page (or just underneath the form where the reCAPTCHA will appear, depending on how you prioritize your asset loading).

Step 4

Next up is the placeholder which you’ll need to add to your form markup wherever you want the reCAPTCHA to appear:

Note: the data-sitekey attribute will hold the value of your key, not this dummy example.

There are other attributes which you can add to customize the look and functionality of your reCAPTCHA at this point. For example, adding data-theme="dark" to this div will give you a dark version, which might better suit your UI:

For more details on configuring your reCAPTCHA take a look at developers.google.com.

Putting it Together

Now we have the initial ingredients it’s time to put them in a working environment.

Step 1

Let’s put our script tag and placeholder into a simple form:

Here we’ve used a barebones page structure with a form containing a name input, an email input and a submit button. There’s no styling whatsoever here because it’s not really necessary for this tutorial.

our captcha form
You should have something which looks like this

To demonstrate that the reCAPTCHA test has been passed we’ll need to run some server-side checks. In this case we’ll do so with PHP, so save this file in a new project as index.php.

Step 2

You’ll notice the form’s method is post, so when we submit the form data it will be returned to this page within an array of variables. We can output those variables by looping over them, so add the following to your page somewhere:

This takes each key/value pair present in our $_POST array and outputs them with a bit of formatting. Now when you submit the form you should see something like the following:

You’ll see the value returned for name and email, but also a value for g-recaptcha-response. If you failed to complete the CAPTCHA test this value will be blank, but if you did check the “I’m not a robot” box you’ll see a huge string of characters.

It’s this value we need to send to Google so it can be verified, so let’s do that next.

Step 3

Happily, the Google developer team have done the hard work for us here, so head on over to the ReCAPTCHA project on Github and grab a copy of the recaptchalib.php library. Place it in the root of your project and then reference it at the top of your index.php file:

Step 4

This library contains a collection of functions which send the g-recaptcha-response (along with our secret key) to Google via an HTTP request. They then collect the response, checking whether or not the CAPTCHA was successful. To use this we need to first set up a couple of variables, before the closing PHP tag:

ReCaptcha() checks to see if our secret key is present. If not it kills the process and advises us to go and get one. We then run our details through the following:

Step 5

Assuming all is well with our submitted form, the $response variable will report back with “success” and we can continue to process the form data. Here’s how that might look: remove the bit where we looped over the form data, then add the following check above the form:

Finally, add a closing PHP tag after the form:

This displays the form, unless it has been successfully submitted, in which case it displays a small thank you notice. Here’s the final demo.

Conclusion

This was a very rough and ready PHP implementation of the No CAPTCHA reCAPTCHA. It‘s wide open for improvements, but will hopefully give you a grasp of the basics. Credit for the library goes to the Google developer team and I should also give a quick thanks to Matt Aussaguel for pointing it out to me.

Useful Resources

Advertisement
Advertisement
Looking for something to help kick start your next project?

Envato Market has a range of items for sale to help get you started.