Recaptcha documentation unclear - and cross-site error testing it

Question

Can anybody please clear up for me what the final page of the recaptcha documentation is saying, I find it exceptionally obtuse.

Here's the documentation I fail to understand:

Verifying the user's response

This page explains how to verify a user's response to a reCAPTCHA challenge from your application's backend. When a reCAPTCHA is solved by end user, a new field (g-recaptcha-response) will be populated in HTML. You can verify the user’s response in one of three ways:

g-recaptcha-response POST parameter when the user submits the form on your site. grecaptcha.getResponse(opt_widget_id) after the user completes the CAPTCHA challenge. As a string argument to your callback function if data-callback is specified in either the g-recaptcha tag attribute or the callback parameter in the grecaptcha.render method

API Request

URL: https://www.google.com/recaptcha/api/siteverify?secret=your_secret&response=response_string&remoteip=user_ip_address

How exactly do I 'verify'?

It says there are three ways I can "verify the user's response", so let's take the first one: there is now a POST parameter in the submitted form called g-recaptcha-response with some gobbledygook content. My question is: now what? Do I just check that it's not null?

Or do I then to send it to google using the API request mentioned below and then check their response? That might make sense, but it would be nice if the docs spelled it out, instead it just says 'API Request'. It would also be nice if they spelled it out that the response_string is (presumably) the contents of the g-recaptcha-response parameter.

Obviously my expensive education wasn't expensive enough, please could someone just confirm for my peace of mind that I should be doing the API Request.

---

This brings me to the second problem: you can test that the recaptcha widget works ok from local machine, but you can't test the 'API Request' - I get a cross-site error

XMLHttpRequest cannot load https://www.google.com/recaptcha/api/siteverify. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Anybody know a way of getting around this so that you can do tests?

Answer 1

From what you're saying it looks like your main problem is that you're verifying the user's response in the user's browser rather than on the server. Is that true?

Just to clarify, what happens is...

• You show the recaptcha widget in your client form.
• The user fills it in.
• The widget does some clever stuff and your client now has a response_string, available in your form as field g-recaptcha-response (you can also get it using the other two javascript methods they mention).
• When the user submits the form, make sure the server receives the response_string along with all your other form data.
• On the server you have to make a request to https://www.google.com/recaptcha/api/siteverify . How you do this will depend on the language you're using on the server. Should be easy. You'll get a response saying if the user got the captcha right or not.

Answer 2

Maybe this post will be helpful , as it shows exact code snippets from both backend , and frontend prespectives :

http://www.codedodle.com/2014/12/google-new-recaptcha-using-javascript.html

Php Code :

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Construct the Google verification API request link.
    $params = array();
    $params['secret'] = 'Your secret key here.'; // Secret key
    if (!empty($_POST) && isset($_POST['g-recaptcha-response'])) {
        $params['response'] = urlencode($_POST['g-recaptcha-response']);
    }
    $params['remoteip'] = $_SERVER['REMOTE_ADDR'];

    $params_string = http_build_query($params);
    $requestURL = 'https://www.google.com/recaptcha/api/siteverify?' . $params_string;

    // Get cURL resource
    $curl = curl_init();

    // Set some options
    curl_setopt_array($curl, array(
        CURLOPT_RETURNTRANSFER => 1,
        CURLOPT_URL => $requestURL,
    ));

    // Send the request
    $response = curl_exec($curl);
    // Close request to clear up some resources
    curl_close($curl);

    $response = @json_decode($response, true);

    if ($response["success"] == true) {
        echo '<h3 class="alert alert-success">Login Successful</h3>';
    } else {
        echo '<h3 class="alert alert-danger">Login failed</h3>';
    }
}