使用 Google reCAPTCHA 验证表单提交

Question

I've had a look at this question我看过这个问题

How to Validate Google reCaptcha on Form Submit 如何在表单提交时验证 Google reCaptcha

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>

Answer 1

You need to trigger your if statement in an event .您需要在event 中触发if语句。 If you're using jQuery you can do this very easily:如果您使用 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.在 JavaScript 中执行此操作的问题在于，如果用户愿意，可以轻松伪造结果。 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.如果您真的想检查用户是否是机器人，您仍然应该使用您的 reCAPTCHA 密钥在服务器端比较用户（通过 POST）提交的结果。

Answer 2

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. remoteip - 可选。 The user's IP address.用户的 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 .如果 success = 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/

使用 Google reCAPTCHA 验证表单提交

问题描述

2 个解决方案

解决方案1
6 已采纳 2015-12-07 12:49:30

解决方案2
-1 2018-01-17 19:28:24

使用 Google reCAPTCHA 验证表单提交

问题描述

2 个解决方案

解决方案1 6 已采纳 2015-12-07 12:49:30

解决方案2 -1 2018-01-17 19:28:24

解决方案1
6 已采纳 2015-12-07 12:49:30

解决方案2
-1 2018-01-17 19:28:24