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

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>';
    }
}