Google reCaptcha - 如何获得 g-recaptcha-response - 没有 FORM TAG

Question

已解决问题，解决方案在底部... 我恳请改进或更改，因为它不是一个好的解决方案，它只是工作但不是很好实施

问题

我需要 g-recaptcha-response 数据发送到 google 并验证它。

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();
    }
}

要执行 $recaptcha->verfiy，我需要 $gRecaptchaResponse。问题是我如何获得这些信息。我的 reCaptcha Widget 不在 form 标签中。

我有什么（必须按照解决方案中说明的发送日期进行改进）

点击注册按钮后将执行以下代码

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

我的模型看起来像这样，model.register 在这里不重要..我在那里完成所有注册步骤，我想在检查 reCaptcha

后执行此操作

模型中的 checkReCaptcha 函数如下所示

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

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

补充问题

是否可以手动启动这个 https://www.google.com/recaptcha/api.js, 听说会在提交表单时执行，但是我没有表单

第一次尝试

我的HTML。决定添加一个表单标签并将 reCaptcha 的 div 放入此表单中。

<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>

我在用户按下注册时调用表单上的提交

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

在我准备好的文档中，我执行以下操作

$(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);
        }
    });
});

正在调用 getReCaptchaResponse.php 但没有 return 值，因此 Google 不会生成密钥。

有人知道 Google 如何开始生成响应代码吗？

我在 ajax 请求中调用的 PHP 文件如下所示

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

Answer 1

解决方案

我对我的解决方案不满意，但这是迄今为止唯一有效的解决方案。

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>

事实证明，如果我将操作作为目标，当表单提交到隐藏的 iframe 时，我会得到我的 g-recaptcha-response 数据并且页面不会被重定向。正是我需要的。

FILE getReCaptchaResponse.php 在表单 action

中调用

现在我需要 return 值，我没有设法将此响应保存到隐藏的 html 标记或直接在代码中 return。

我的解决方案是将它保存到一个 cookie 中，然后从该 cookie 中获取它，在代码中需要它的位置。

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

现在您的 g-recaptcha-response 数据已保存在 cookie 中，您可以在需要时使用它。建议您在将数据发送到Google 进行验证后删除（设置为过去）cookie。

要使用 javascript 从 Cookie 中获取内容，请查看此存储库：https://github.com/js-cookie/js-cookie/tree/v2.0.3

我使用 PHP 从 cookie 服务器端获取了内容。