Categories
Challenge

How to insert and configure reCAPTCHA v2 code in php

We’ve already introduced you to the theory behind the new NO CAPTCHA reCAPTCHA v2, 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 reCAPTCHA code in php that gets a final user verification result.

1. Register at Google

You go to google reCaptcha admin page to register your site (domain) for this new reCAPTCHA. 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 reCAPTCHA on your site

The simplest form with reCaptcha code:
<script src="https://www.google.com/recaptcha/api.js" >;
<form method="post">
<div class="g-recaptcha" id="g-recaptcha" data-sitekey="[site_key]" data-callback="onReturnCallback" data-theme="light"></div>
<input value="submit" type="submit" />
</form>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var onReturnCallback = function(response) { 
	//alert('g-recaptcha-response: ' + grecaptcha.getResponse()); 
	var url='proxy.php?url=' + 'https://www.google.com/recaptcha/api/siteverify';  
	$.ajax({ 'url' : url, 
			   dataType: 'json',
			   data: { response: response},
			   success: function( data  ) { 			        
				var res = data.success.toString();
                        alert( "User verified: " + res);					
				if (res ==  'true') { 
			           document.getElementById('g-recaptcha').innerHTML = 'THE CAPTCHA WAS SUCCESSFULLY SOLVED'; 
                                } 
                           } // end of success: 
         }); // end of $.ajax 
}; // end of onReturnCallback 
</script>

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:

var url='proxy.php...

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.

if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])) {
    header('HTTP/1.0 403 Forbidden');
    die('You are not allowed to access this file.');     
}
header('Content-type: application/json');
$url=$_GET['url'];
$response=$_GET['response'];
$secret = "[secret_key]"; 
$params = array('secret'=> $secret, 'response'=> $response);
$json=file_get_contents( $url  . '?secret=' . $secret . '&amp;response=' . $response);
echo $json; 

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.

9 replies on “How to insert and configure reCAPTCHA v2 code in php”

people can steal your secret key if they call `proxy.php?url=` with there own site parameter, in that case better to hard code url in to the proxy.

Peter, I do not see how someone can steal a secret key from the server-based proxy.php?
with their own site parameter” – do you mean “response“? Would you explain more…

Leave a Reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.