No CAPTCHA reCAPTCHA solvingWe’ve already introduced you to the theory behind the new NO CAPTCHA reCAPTCHA, but now we come to the practical integration part. Here we’ll share how to insert and configure “NO CAPTCHA reCAPTCHA” into a web page.

There might be several approaches of how to do it, mine being the one with least resistance. I’ve used JavaScript and a jquery ajax call for working out of reCAPTCHA site verification and provided the CAPTCHA code in php that gets a final user verification result.

1. Register at Google

You go to google reCaptcha page to register your site (domain) for this new CAPTCHA . You’ll be provided the following:

  • Site key. It is for open use in the HTML code of your web page.
  • Secret key. Use this only for communication between your server (not html web page) and Google. Later we show how to utilize it in the final POST request.

2. Insert a form with the CAPTCHA on your site.

The simplest form with reCaptcha code:

In this piece you replace the [site_key] with the actual Site key value you’ve just got from google. The google’s js code recaptcha/api.js will do the dirty work of watching user behaviour and communicating it to google.

Upon ticking the box this js code will send a request and return a certain response (encoded) and deposit its value into a new hidden field in your form. You can fetch the response value several ways. Notice we’ve defined a callback (onReturnCallback) that we’ll define and use later for getting a final verification result.

3. JavaScript code to decode the response

Insert the following code at the same page where the form with the reCaptcha is. The code will ask Google’s server (via proxy) whether the user is human (true) or bot (false) based of the response value. Commented alert in the code shows the alternative way to fetch the response value.
The response value is something like this: response: eyJyZXNwb25zZSI6IiJ9

For user verification result we need to make a request to Google. And because of security reasons (not to expose Secret key) and XSS attack prevention policy we do it thru the proxy:

4. Proxy on your server that returns true or false.

The proxy turns is a small php file on your server. Place it in the same folder where the file of the page with the form is.

proxy.php

In this piece you replace the [secret_key]  with the actual Secret key value you’ve got from Google.
Its response is simple {“success”: true} that you might play with at onReturnCallback callback.

That’s how simple it is. Later we’ll conduct the CAPTCHA Test Drive to proof the CAPTCHA breaking services of an ability to solve it.