即使 reCaptcha 已经完成，提交按钮也会发送电子邮件答案

【问题标题】：Submit Button Sends Email even If reCaptcha has been done即使 reCaptcha 已经完成，提交按钮也会发送电子邮件
【发布时间】：2016-10-09 01:16:55
【问题描述】：

我正在将来自 google 的 reCaptcha 添加到我的表单中。问题是即使我遵循了谷歌的指示。我仍然可以在不进行重新验证的情况下按下提交按钮。任何想法请继承相关代码sn-ps。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>webpage title</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>

以及网页表单部分中的这个sn-p

<div class="g-recaptcha" data-sitekey="xxxxxxmyapikeyxxxxxxx_xxxxxxmyapikeyxxxxxxx"></div>  
                    <li class="buttons">
                <input type="hidden" name="form_id" value="1136056" />

                <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
        </li>
            </ul>

        </form>

据我所知，我已将代码放置在网页的指定区域。在您的 HTML 模板上的结束标记和我希望 reCAPTCHA 小部件出现的位置末尾的 sn-p 之前的一个。

我已将recaptcha 放在提交按钮之前。关于服务器端集成有一部分我不明白。

[QUOTE]
When your users submit the form where you integrated reCAPTCHA, you'll     
get as part of the payload a string with the name "g-recaptcha-response". 
In order to check whether Google has verified that user, 
send a POST request with these parameters:

URL: https://www.google.com/recaptcha/api/siteverify
secret (required)   xxxxxmysecretkeyxxxxxxx
response (required) The value of 'g-recaptcha-response'.
remoteip    The end user's ip address.
[/QUOTE]

任何人都可以请对此有所了解。谢谢你

【问题讨论】：

标签： html forms submit recaptcha

【解决方案1】：

所以我们设置了表单并确保包含您的库，我防止在重新验证尚未完成时单击提交按钮，并显示一个工具提示以通知用户需要继续。然后在完成后使用回调方法启用它。

login.php

<div class="formContainer">
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <form action="loginHandler.php" method="post" name="login_form" id="loginForm" class="loginForm">  
        <h2>Login</h2>
        <p><input type="text" required placeholder="Email" name="email"></p>
        <p><input type="password" required placeholder="Password" name="password" id="password"></p>
        <div class="g-recaptcha" data-callback="captcha_filled"
                 data-expired-callback="captcha_expired" 
                 data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX">
        </div>
        <div>
            <p class="show-tt" data-toggle="tooltip" title="Complete the reCAPTCHA to login." data-placement="bottom">
                <input id="submitLogin" type="submit" value="Login">
            </p>
        </div>
    </form>
</div>

<script>
    //prevent submit and show tooltip until captch is complete.
    var submit = false;
    $("#submitLogin").prop('disabled', true);

    function captcha_filled() {
        submit = true;
        $("#submitLogin").prop('disabled', false);
        $(".show-tt").tooltip('destroy');
    }
    function captcha_expired() {
        submit = false;
        $("#submitLogin").prop('disabled', true);
        showTooltip();
    }
    function showTooltip () {
        $(".show-tt").tooltip('show');
    }
</script>

现在我们发布到 loginHandler.php，或者您的表单也提交的任何地方，然后我们将在那里分配您的密钥，然后使用 google 验证请求。

loginHandler.php

$secret = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

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

    $url = 'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secret) .
            '&response=' . urlencode($_POST['g-recaptcha-response']) . '&remoteip=' . urlencode($_SERVER['REMOTE_ADDR']);
    //ip address is optional
    $result = json_decode(file_get_contents($url), true);

    if ($result != null && $result['success'] === true) {

        //success, handle login/submit data or whatever

    } else {
        //response is bad, handle the error
        header('Location: login.php?error=4');
    }
} else {
    //captcha response is not set, handle error
    header('Location: login.php?error=5');
}

【讨论】：