javascript 使用 Google reCAPTCHA 验证表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34133270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Validating submit of form with Google reCAPTCHA
提问by smith_05_bird
I've had a look at this question
我看过这个问题
How to Validate Google reCaptcha on Form Submit
And tried to implement the answer of that question into my code to validate my form so that it won't submit if the captcha hasn't been completed.
并尝试将该问题的答案实施到我的代码中以验证我的表单，这样如果验证码尚未完成，它就不会提交。
However nothing happens - it just submits the form.
然而什么也没有发生——它只是提交表单。
this is my code:
这是我的代码：
<head>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'my_site_key'
});
};
</script>
</head>
<div id="html_element"></div>
<br>
<input type="submit" value="Submit" onclick="myFunction">
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
function myFunction() {
if(grecaptcha.getResponse() == "")
alert("You can't proceed!");
else
alert("Thank you");}
</script>
Can anyone help?
任何人都可以帮忙吗？
EDIT
编辑
<html>
<head>
<script type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'site-key'
});
};
onloadCallback();
$('form').on('submit', function(e) {
if(grecaptcha.getResponse() == "") {
e.preventDefault();
alert("You can't proceed!");
} else {
alert("Thank you");
}
});
</script>
</head>
<body>
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>
</script>
</body>
回答by Chuck Le Butt
You need to trigger your ifstatement in an event. If you're using jQuery you can do this very easily:
您需要if在event 中触发您的语句。如果您使用 jQuery，您可以很容易地做到这一点：
$('form').on('submit', function(e) {
if(grecaptcha.getResponse() == "") {
e.preventDefault();
alert("You can't proceed!");
} else {
alert("Thank you");
}
});
See working example here: JSFiddle
请参阅此处的工作示例：JSFiddle
The problem with doing this in JavaScript at all is that the user can easily fake the result if they want to. If you really want to be checking if the user is a robot or not, you should still be comparing the result submitted by the user (via POST) on the server side using your reCAPTCHA secret key.
在 JavaScript 中执行此操作的问题在于，如果用户愿意，可以轻松伪造结果。如果您真的想检查用户是否是机器人，您仍然应该使用您的 reCAPTCHA 密钥在服务器端比较用户（通过 POST）提交的结果。
回答by Julia
Here is the server-side solution that requires no jQuery/javascript other than the embed code provided by google.
这是服务器端解决方案，除了谷歌提供的嵌入代码外，不需要 jQuery/javascript。
When the user submits the form on your site containing reCaptcha, look for the "g-recaptcha-response" POST parameter on the server-side.
当用户在您的站点上提交包含 reCaptcha 的表单时，请在服务器端查找“g-recaptcha-response”POST 参数。
Then send your own http post request to this url: https://www.google.com/recaptcha/api/siteverify
然后将您自己的 http post 请求发送到此网址：https: //www.google.com/recaptcha/api/siteverify
The POST parameters that you send as part of this request are:
作为此请求的一部分发送的 POST 参数是：
secret - Required. The shared key between your site and reCAPTCHA.
秘密 - 必需。您的站点和 reCAPTCHA 之间的共享密钥。
response - Required. The user response token provided by reCAPTCHA, verifying the user on your site.
响应 - 必需。reCAPTCHA 提供的用户响应令牌，用于验证您网站上的用户。
remoteip - Optional. The user's IP address.
remoteip - 可选。用户的 IP 地址。
Then you should get back something like this from Google which you can check for success.
然后你应该从谷歌得到这样的东西，你可以检查是否成功。
{ "success": true|false, "challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ) "hostname": string, // the hostname of the site where the reCAPTCHA was solved "error-codes": [...] // optional }
{ "success": true|false, "challenge_ts": timestamp, // 挑战加载的时间戳（ISO 格式 yyyy-MM-dd'T'HH:mm:ssZZ） "hostname": string, // 主机名解决 reCAPTCHA 的站点“错误代码”：[...] // 可选 }
if success = true, display a success message, or redirect to a success page .
如果成功 = true，则显示成功消息，或重定向到成功页面。
if success = false, display the form again with a message that says there is a slight chance they are a robot and to please try again.
如果成功 = false，则再次显示该表单并显示一条消息，说明它们有可能是机器人，请再试一次。
See here for more info:
请参阅此处了解更多信息：
https://developers.google.com/recaptcha/docs/verify, http://dotnettec.com/google-recaptcha-example-javascript/
https://developers.google.com/recaptcha/docs/verify, http://dotnettec.com/google-recaptcha-example-javascript/
