我正在将 google 的 reCaptcha 添加到我的表单中。问题是即使我已经按照谷歌的说明进行操作。我仍然可以在不重新验证的情况下按提交按钮。任何想法请继承相关的代码片段。
<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>
以及网页表单部分中的这个片段
<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 小部件出现的位置末尾的代码段中。
我已将验证码放在提交按钮之前。关于服务器端集成，有一部分我不明白。
[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]
任何人都可以对此有所了解吗？ 谢谢
最佳答案
所以我们设置表单并确保包含您的库，我防止在 recaptcha 尚未完成时单击提交按钮并显示工具提示以通知用户需要继续。然后在使用回调方法完成后启用它。
登录.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，或者您的表单提交的任何地方，然后我们将在那里分配您的 key ，然后通过谷歌验证请求。
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');
}
关于html - 即使 reCaptcha 已完成，提交按钮也会发送电子邮件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37708119/