不可见的 reCAPTCHA 缺少输入响应答案

【问题标题】：Invisible reCAPTCHA missing input response不可见的 reCAPTCHA 缺少输入响应
【发布时间】：2017-10-30 16:01:56
【问题描述】：

我正在尝试使用不可见的 reCAPTCHA 创建一个页面，但我无法让它工作。

客户页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-2.2.1.min.js" integrity="sha384-8C+3bW/ArbXinsJduAjm9O7WNnuOcO+Bok/VScRYikawtvz4ZPrpXtGfKIewM9dK" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script>
        $('#formcomplete').click(function (e) {
            grecaptcha.reset();
            document.getElementById('form').checkValidity();
            grecaptcha.execute();
            return false;
        });
        function onSubmit(token) {
            document.getElementById('form').submit();
        }
    </script>
    <script src='https://www.google.com/recaptcha/api.js' async defer></script>
    <style>
        .centerize {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
        }
    </style>
</head>
<body style="background-color: black; overflow: hidden;">
    <form method='post' action='_resources/signup.php' id="form">
        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 50%;">
            <div class="form-row">
                <div class="form-group col-md-5">
                    <input type="text" class="form-control" name="name" placeholder="Name" size="64" required>
                </div>
                <div class="form-group col-md-7">
                    <input type='email' class='form-control' name='email' placeholder='email@example.com' size="64" required>
                </div>
            </div>
            <div class="form-check" style="text-align: center;">
                <label class="form-check-label" style="color: white">
                    <input type="checkbox" class="form-check-input" name="emaillist" value="emaillisttrue">
                    Add me to the email list to learn about future releases.
                </label>
            </div>
            <div class="form-check" style="text-align: center;">
                <label class="form-check-label" style="color: white">
                    <input type="checkbox" class="form-check-input" name="tac" value="tactrue" required>
                    I accept the <a href="./legal.html" onclick="window.open(this.href, 'mywin', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); return false;" >Terms and Conditions & Privacy Policy</a>.
                </label>
            </div>
            <button class='btn btn-default centerize' id="formcomplete">Submit</button>
        </div>
        <div id='recaptcha' class="g-recaptcha"
             data-sitekey="keeeeey"
             data-callback="onSubmit"
             data-theme="dark"
             data-size="invisible">
        </div>
    </form>
</body>

和服务器端验证：

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $name = stripslashes($_POST['name']);
    $email = stripslashes($_POST['email']);
    $emaillist = stripslashes($_POST['emaillist']);
    $tac = stripslashes($_POST['tac']);
    //... verify that you have a name email and accepted the terms
    $verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify",false,stream_context_create(array(
        'http' => array(
            'method' => 'POST',
            'content' => http_build_query(array(
                'secret' => 'keeeeey',
                'response' => $_POST['g-recaptcha-response'],
                'remoteip' => $_SERVER['REMOTE_ADDR']
            ))
        )
    )));
    if (json_decode($verify)->success==true) {
        //... handle normal case
    } else {
        var_dump($verify);
        //header("Location: ...");
    }
}

当我浏览到该页面时，一切正常，输入得到验证（如果您没有，chrome 会显示“请选中此框以继续”），并且一切正常，直到我点击提交。点击提交后，我被定向到表单的 POST 端点，var_dump 在该端点抛出令人沮丧的string(75) "{ "success": false, "error-codes": [ "missing-input-response" ] }"。

现在让我感到困惑的是。如果我浏览到该页面，填写所有详细信息，然后打开 chrome 开发控制台并输入 grecaptcha.execute(); 表单被提交，一切正常， reCAPTCHA 请求正常，并且在成功验证路径服务器端期间发生的所有事情都会发生。我不知道为什么会这样。

感谢您的帮助。

【问题讨论】：

这是一个令人困惑的问题。我正在查看你的代码，看看我是否发现了任何奇怪的东西......除了你如何处理帖子输入（我使用他们的 php lib include 来做到这一点）......到目前为止，没有什么让我跳出来:(
您是否尝试过将document.getElementById('form').submit(); 移动到点击操作中，而不使用onSubmit 回调？
这样做会产生同样的错误。
好的，只是想检查它是否以不同的方式提交，但听起来没有。这让我对任何建议都束手无策:(

标签： javascript php invisible-recaptcha

【解决方案1】：

移动

<script>
        $('#formcomplete').click(function (e) {
            grecaptcha.reset();
            document.getElementById('form').checkValidity();
            grecaptcha.execute();
            return false;
        });
        function onSubmit(token) {
            document.getElementById('form').submit();
        }
    </script>
    <script src='https://www.google.com/recaptcha/api.js' async defer></script>

在关闭 body 标记之前以某种方式工作。可能需要先定义 DOM，然后再尝试在其上使用元素或其他东西。

【讨论】：