I've been implementing a new log-in page for our website, and one of the requirements is to have recaptcha on two elements in the form (one is for signing up, the other is for getting username/password reminders).

I've managed to get both recaptchas working, and they both function correctly. However when I try to use recaptcha.getResponse() or use the recaptcha.render('callback') method it does not return JSON, despite saying so in the specification. Here's the bit

The response is a JSON object

{
    "success": true|false,
    "error-codes": [...]   // optional
}

I don't get anything remotely like this in the returned data. Instead, it looks Base64 encoded, but fails any decoder that I've tried. It looks like this

03AHJ_VuvWh4kgzEcKC_TBcc_BQjLucuL6g5tKXwYJT...(lots more after this)

Here's my code for doing the recaptchas. It may look messy, but this is just prototyping. Can anyone see if I'm doing something wrong? I think I've followed the spec exactly.

HTML (snipped for brevity)

<script type="text/javascript" src=".js?onload=onloadCallback&render=explicit" async defer></script>

<div id="div_signup_recaptcha"></div>
<div id="div_forgotdetail_recaptcha"></div>

JS/jQuery

var grecaptchaSignup, grecaptchaForgotDetail;
var verifyForgotDetailCallback = function (response) {
    console.log(response);
}

var verifySignupCallback = function (response) {
    console.log(response);
}

var onloadCallback = function () {
    grecaptchaSignup = grecaptcha.render('div_signup_recaptcha', {
        'sitekey': 'mykey',
        'callback': verifySignupCallback
    });
    grecaptchaForgotDetail = grecaptcha.render('div_forgotdetail_recaptcha', {
        'sitekey': 'mykey',
        'callback': verifyForgotDetailCallback
    });
};

I've been implementing a new log-in page for our website, and one of the requirements is to have recaptcha on two elements in the form (one is for signing up, the other is for getting username/password reminders).

I've managed to get both recaptchas working, and they both function correctly. However when I try to use recaptcha.getResponse() or use the recaptcha.render('callback') method it does not return JSON, despite saying so in the specification. Here's the bit

The response is a JSON object

{
    "success": true|false,
    "error-codes": [...]   // optional
}

I don't get anything remotely like this in the returned data. Instead, it looks Base64 encoded, but fails any decoder that I've tried. It looks like this

03AHJ_VuvWh4kgzEcKC_TBcc_BQjLucuL6g5tKXwYJT...(lots more after this)

Here's my code for doing the recaptchas. It may look messy, but this is just prototyping. Can anyone see if I'm doing something wrong? I think I've followed the spec exactly.

HTML (snipped for brevity)

<script type="text/javascript" src="https://www.google./recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

<div id="div_signup_recaptcha"></div>
<div id="div_forgotdetail_recaptcha"></div>

JS/jQuery

var grecaptchaSignup, grecaptchaForgotDetail;
var verifyForgotDetailCallback = function (response) {
    console.log(response);
}

var verifySignupCallback = function (response) {
    console.log(response);
}

var onloadCallback = function () {
    grecaptchaSignup = grecaptcha.render('div_signup_recaptcha', {
        'sitekey': 'mykey',
        'callback': verifySignupCallback
    });
    grecaptchaForgotDetail = grecaptcha.render('div_forgotdetail_recaptcha', {
        'sitekey': 'mykey',
        'callback': verifyForgotDetailCallback
    });
};

• javascript
• jquery
• html
• json
• recaptcha

1 Answer 1

Okay, I'm an idiot.

I thought I had read the specification correctly, turns out I missed the essential call to this URL

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

After I plugged in my private key and the encoded response, I got my JSON object.

Hope this clears up any confusion for other people in my position :(