CODEWITHSUNDEEP
javascriptphprecaptcha
Ilario Engler
Ilario Engler

Reputation: 2469

Google reCaptcha - How to get g-recaptcha-response - without FORM TAG

SOLVED the problem, solution is on the bottom... I kindly ask for improvements or changes because it's not a nice solution, it just works but not nice implemented

PROBLEM

I need the g-recaptcha-response data to send it to google and verify it.

public function check_reCaptcha()
{
    $this->data; //this variable holds the response data 

    $recaptcha = new ReCaptcha($this->secret);
    $resp = $recaptcha->verify($gRecaptchaResponse, $remoteIp); // $remoteIp is optional
    if ($resp->isSuccess()) {
        // return true
    } else {
        $error = $resp->getErrorCodes();
    }
}

To execute $recaptcha->verfiy I need $gRecaptchaResponse. The question is how do I get these informations. My reCaptcha Widget isn't in a form tag.

WHAT I HAD (must be improved with the date sent as explained in the solution)

After clicking on the register button following code will be executed

this.register = function () {

    var mModel = new Model();

    mModel.checkReCaptcha().done(function(data) {

        mModel.register().done(function () {
            // if register success
        }).fail(function (textStatus) {
            // if register fails
        });

    }).fail(function(textStatus) {
        // if checkReCaptcha() fails
    });
};

my model looks like this, the model.register isn't important here .. there I do all the registration steps, and I want to execute this after checking the reCaptcha

The checkReCaptcha function in the model looks like this

this.checkReCaptcha = function()
{
    var url = 'php/main.php?controller=Auth&action=check_reCaptcha';
    var data = // get cookie data

    return this.getServer().post(url, data);
};

Additional Question

Would it be possible to start this manually https://www.google.com/recaptcha/api.js, I read that it will be executed when form is submited, but I don't have a form.

FIRST TRY

My HTML. Decided to add a form tag and put the div for reCaptcha into this form.

<form id="form_recaptcha" action="php/getReCaptchaResponse.php" method="post">
    <div class="g-recaptcha captcha" data-sitekey="own-data-key"></div>
    <input id="form_recaptcha_submit" type="submit" hidden/>
</form>

I invoke a submit on the form when the user presses register 

$('#myform').submit();

In my document ready I do the following

$(document).on('submit', '#form_recaptcha', function(event) {
    event.preventDefault();

    // if I wouldn't do the preventDefault it works, but then I'm
    // redirected, which is absolutely right... my problem is that calling   
    // preventDefault, results into not loading my g-recaptcha-response 

    $.ajax({
        url: 'php/getReCaptchaResponse.php',
        type: 'POST',
        success: function(data) {
            console.log(data);
        }
    });
});

The getReCaptchaResponse.php is beeing called but there is no return value, so Google doesn't generate a key.

Do somebody knows how do Google starts generating a response code ?

My PHP file called in the ajax request looks like this

if (isset($_POST['g-recaptcha-response'])) {
    echo 'if'; // just for debug
    return $_POST['g-recaptcha-response'];
} else {
    echo 'else'; // just for debug
    return false;
}

Upvotes: 3

Views: 6119

Answers (1)

Ilario Engler
Ilario Engler

Reputation: 2469

SOLUTION

I'm not happy with my solution, but it's the only one which worked till now.

HTML

<iframe name="recaptchaIFrame" style="display:none !important;"></iframe>
<form id="form_recaptcha" action="php/getReCaptchaResponse.php" method="post" target="recaptchaIFrame">
    <div class="g-recaptcha captcha" data-sitekey="own-data-key"></div>
    <input id="form_recaptcha_submit" type="submit" hidden/>
</form>

It showed up that if I target the action, when the form is submited, to an hidden iframe, I get my g-recaptcha-response data and the page won't be redirected. Exactly what I need.

FILE getReCaptchaResponse.php which is called in the form action

Now I need to return the value, I didn't manage to save this response to a hidden html tag or return it directly in the code.

My solution is to save it into a cookie and the grab it from that cookie, at the position in the code where it is needed.

if (isset($_POST['g-recaptcha-response'])) {

    $name = 'reCaptchaResponse';
    $value = $_POST['g-recaptcha-response'];
    $expire = 0;
    $path = '';
    $domain = '';
    $secure = false;
    $httponly = true;

    setcookie($name, $value, $expire, $path, $domain, $secure, $httponly);
}

Now you have your g-recaptcha-response data in a cookie and you can use it then when you need it. It's recommended to delete (set to past) the cookie after you sent the data to Google for verification.

To get the content from the Cookie with javascript, take a look at this repo: https://github.com/js-cookie/js-cookie/tree/v2.0.3

I got the content from the cookie serverside with PHP.

Upvotes: 1

Related Questions