Question

我看过这个问题

How to Validate Google reCaptcha on Form Submit

并尝试将该问题的答案实施到我的代码中以验证我的表单，以便在验证码未完成时不会提交。

然而没有任何反应 - 它只是提交表格。

这是我的代码：

 <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>

有人可以帮忙吗？

编辑

<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

您需要在事件中触发if声明。如果你正在使用jQuery，你可以很容易地做到这一点：

$('form').on('submit', function(e) {
  if(grecaptcha.getResponse() == "") {
    e.preventDefault();
    alert("You can't proceed!");
  } else {
    alert("Thank you");
  }
});

请参阅此处的工作示例：JSFiddle

在JavaScript中执行此操作的问题在于，用户可以根据需要轻松伪造结果。如果您真的想要检查用户是否是机器人，您仍应使用reCAPTCHA密钥比较服务器端用户提交的结果（通过POST）。

Answer 2

这是服务器端解决方案，除了谷歌提供的嵌入代码之外，不需要jQuery / javascript。

当用户在您的网站上提交包含reCaptcha的表单时，请查找＆＃34; g-recaptcha-response＆＃34;服务器端的POST参数。

然后将您自己的http发布请求发送到此网址：https://www.google.com/recaptcha/api/siteverify

您作为此请求的一部分发送的POST参数是：

秘密 - 必需。您网站与reCAPTCHA之间的共享密钥。

响应 - 必填。 reCAPTCHA提供的用户响应令牌，用于验证您网站上的用户。

remoteip - 可选。用户的IP地址。

然后你应该从谷歌那里得到这样的东西，你可以检查它是否成功。

{ ＆＃34;成功＆＃34;：true | false，＆＃34; challenge_ts＆＃34;：时间戳，//挑战加载的时间戳（ISO格式yyyy-MM-dd＆＃39; T＆＃39; HH：mm：ssZZ）＆＃34; hostname＆＃34;：string，//解析reCAPTCHA的站点的主机名＆＃34;错误代码＆＃34;：[...] //可选 }

如果success = true，则显示成功消息，或重定向到成功页面。

如果success = false，再次显示该表单，并显示一条消息，表明他们很可能是机器人，请再试一次。

有关详细信息，请参阅此处：

https://developers.google.com/recaptcha/docs/verify， http://dotnettec.com/google-recaptcha-example-javascript/

使用Google reCAPTCHA验证表单的提交

2 个答案: