如何使用javascript / jQuery验证Google reCAPTCHA v2？

120

我在aspx中有一个简单的联系表。我想在提交表单之前验证reCaptcha（客户端）。请帮忙。

样例代码：

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Test Form</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        <script>
            $("#cmdSubmit").click(function () {
                //need to validate the captcha
            });
        </script> 
    </head>
    <body>
        <form id="form1" runat="server">
            <label class="clsLabe">First Name<sup>*</sup></label><br />
            <input type="text" id="txtFName" name="txtFName" class="clsInput" /><br />
            <div class="g-recaptcha" data-sitekey="my_key"></div>
            <img id="cmdSubmit" src="SubmitBtn.png" alt="Submit Form" style="cursor:pointer;" />
        </form>
    </body>
    </html>

我想cmdSubmit点击验证验证码。

请帮忙。

javascript  jquery  asp.net  google-api  recaptcha 
— 圣雄阿拉丁
source
2
到目前为止你做了什么？需要更多信息，问题太含糊。
— 扎基
1
如果您没有通过服务器端验证向Google发送发帖请求，则您甚至都可能不包含验证码。机器人将通过以下建议的客户端验证。
— Virge Assault '18
在客户端单击验证验证码>做某事>验证Recaptcha数据服务器端>做某事。
— JPB
2
这里检查样品实例教程freakyjolly.com/...
— 代码间谍

Answers:

103

此客户端验证reCaptcha-以下对我有用：

如果reCaptcha不在客户端grecaptcha.getResponse();返回上进行验证null，否则返回的值不是null。

JavaScript代码： 

var response = grecaptcha.getResponse();

if(response.length == 0)
    //reCaptcha not verified

else
    //reCaptch verified
— 帕拉·塔尼加（Palak Tanejaa）
source
112
这是不正确的。验证码尚未通过JS验证，您需要从后端代码向Google的服务器提交响应以及站点密钥和秘密密钥，以确定验证码是否已成功回答。这个答案很危险，不正确。
— 肖恩·肯德尔
9
Quote：当最终用户解决reCAPTCHA时，将在HTML中填充一个新字段（g-recaptcha-response）。developers.google.com/recaptcha/docs/verify
— CoalaWeb
6
但这还不是全部@CoalaWeb！Quote：获得响应令牌后，您需要使用以下API通过reCAPTCHA 对其进行验证，以确保该令牌有效。 https://developers.google.com/recaptcha/docs/verify
— 迪伦·史密斯
14
对于那些说答案不正确的人，你甚至读过这个问题吗？问题和答案都清楚地指定了客户端-明显的目的是在向服务器发送后期请求以进行进一步验证之前，检查验证码是否确实在客户端中填写了
— 。– rococo
4
您只能知道用户是否实际上已经在客户端填写了该信息。“ g-recaptcha-response”的值将被填写，但需要将其发送给Google，以供他们检查响应是否有效。例如，使用图像匹配，您可以单击任何内容或不单击任何内容，然后单击“提交”。这是不正确的，但已填写“ g-recaptcha-response”的值。您可以使用AJAX进行验证，但是请确保将密钥保存在服务器端代码中。简短的答案是服务器必须检查它是否有效，是否使用AJAX或带有完整表单的帖子进行验证。
— 肖恩·肯德尔
60

使用此工具可使用简单的javascript验证Google验证码。

html主体中的这段代码：

<div class="g-recaptcha" id="rcaptcha" style="margin-left: 90px;" data-sitekey="my_key"></div>
<span id="captcha" style="margin-left:100px;color:red" />

这段代码放在调用get_action（this）方法表单按钮的开头：

function get_action(form) 
{
    var v = grecaptcha.getResponse();
    if(v.length == 0)
    {
        document.getElementById('captcha').innerHTML="You can't leave Captcha Code empty";
        return false;
    }
    else
    {
        document.getElementById('captcha').innerHTML="Captcha completed";
        return true; 
    }
}
— 普拉文·夏尔马
source
<div class =“ g-recaptcha” id =“ rcaptcha” style =“ margin-left：90px;” data-sitekey =“ my_key”> </ div>此代码位于正文部分的span标签上方
— Pravin Sharma 2015年
2
我认为这是更好的解决方案。这样，您可以在表单提交处理程序中处理响应的验证。这似乎比尝试在验证码回调中处理它更具逻辑性。我想这取决于您是即时验证还是提交验证。
— Lightbulb1 2015年
4
您应该使用===和!==; 没有理由不这样做。
— slikts
28
该解决方案是错误的。我认为当您获得响应时，您必须将参数（响应+秘钥+ ClientIp）发送给Google以进行验证。验证后。Google向我们返回成功或失败。在您的示例中，您不使用第二步。您能向我解释一下：您的私钥在哪里？什么时候使用？
— Mahmut EFE
3
Mahmut是正确的，此答案是危险的错误和不完整。
— 肖恩·肯德尔
27

保罗的答案：

资源：

<script src="https://www.google.com/recaptcha/api.js"></script>

HTML：

<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="correctCaptcha"></div>

JS：

var correctCaptcha = function(response) {
        alert(response);
    };
— 曼努埃尔·阿扎尔（Manuel Azar）
source
13
像许多其他错误的解决方案一样，您只是在这里获得令牌。您必须先使用私钥将其发送给Google，然后才能对其进行验证。
— evolross，2017年
这在某种程度上引起了我的问题。的WebPack不能编译它自己，如果我们使用的数据的回调里面的元素
— 法里斯Rayhan的
2
这应该是可以接受的答案，因为它不需要覆盖render函数。至于纯粹在JS中进行验证，我怀疑这是否可行，因为这需要将密钥放入JS，从而使每个人都能亲身体验。
— 阿斯克曼
25

如果在回调上呈现Recaptcha

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

使用空的DIV作为占位符

<div id='html_element'></div>

那么您可以在成功的CAPTCHA响应上指定一个可选的函数调用

var onloadCallback = function() {
    grecaptcha.render('html_element', {
      'sitekey' : 'your_site_key',
      'callback' : correctCaptcha
    });
  };

然后，recaptcha响应将发送到'correctCaptcha'函数。

var correctCaptcha = function(response) {
    alert(response);
};

所有这些都来自Google API注释：

Google Recaptcha v2 API注释

我有点不确定为什么要这么做。通常，您将发送g-recaptcha-response字段以及您的私钥以安全地验证服务器端。除非您想在重新验证成功之前禁用提交按钮，否则在上述情况下应该可以使用。

希望这可以帮助。

保罗

— pphillips001
source
1
我发现了这一点-您的部分代码不正确，因此我建议进行修改。干杯!
— 2015年
@Prefix您是否建议编辑？期待您的版本。
— Thanks_in_advance
1
correctCaptcha回调函数声明（在grecaptcha.render内部）应不带引号，并应放在onloadCallback之前。
— Pratul Sanwal，2015年
9

我使用了HarveyEV的解决方案，但误读了它，并使用jQuery validate（而不是Bootstrap验证器）进行了验证。

  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
  <script>
    $("#contactForm").validate({
      submitHandler: function (form) {
        var response = grecaptcha.getResponse();
        //recaptcha failed validation
        if (response.length == 0) {
          $('#recaptcha-error').show();
          return false;
        }
          //recaptcha passed validation
        else {
          $('#recaptcha-error').hide();
          return true;
        }
      }
    });
  </script>
— jo
source
6

我以为所有的功能都很棒，但实际上很难让它们与javascript和c＃一起使用。这是我所做的。希望它可以帮助其他人。

//put this at the top of the page
<script src="https://www.google.com/recaptcha/api.js"></script>

//put this under the script tag
<script>
var isCaptchaValid = false;
function doCaptchaValidate(source, args) {
    args.IsValid = isCaptchaValid;
}
var verifyCallback = function (response) {
    isCaptchaValid = true;
};
</script>

//retrieved from google and added callback
<div class="g-recaptcha" data-sitekey="sitekey" data-callback="verifyCallback">

//created a custom validator and added error message and ClientValidationFucntion
<asp:CustomValidator runat="server" ID="CustomValidator1" ValidationGroup="Initial" ErrorMessage="Captcha Required" ClientValidationFunction="doCaptchaValidate"/>
— BV2005
source
4

您可以使用以下代码来呈现您的Recaptcha

<div id="recapchaWidget" class="g-recaptcha"></div>

<script type="text/javascript">
   var widId = "";
   var onloadCallback = function ()
   {
    widId = grecaptcha.render('recapchaWidget', {
    'sitekey':'Your Site Key'
            });
   };
 </script>

 <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

然后，您可以使用“ IsRecapchaValid（）”方法来验证您的Recaptcha，如下所示。

 <script type="text/javascript">
     function IsRecapchaValid()
      {
      var res = grecaptcha.getResponse(widId);
      if (res == "" || res == undefined || res.length == 0)
         {
          return false;
         }
       return true;
      }
 </script>
— 塔比斯·乌斯曼（Tabish Usman）
source
因此，就像这样：return res && res.length不要忘记服务器验证。
— 亚历克斯·古斯基
1

我在Bootstrap验证程序中使用了Palek的解决方案，它可以正常工作。我会向他添加评论，但我没有代表;）。简化版：

        $('#form').validator().on('submit', function (e) {
           var response = grecaptcha.getResponse();
           //recaptcha failed validation
           if(response.length == 0) {
               e.preventDefault();
               $('#recaptcha-error').show();
           }
           //recaptcha passed validation
           else {
               $('#recaptcha-error').hide();
           }
           if (e.isDefaultPrevented()) {
              return false;
           } else {
              return true;
           }
       });
— 哈维EV
source
1

源链接

在此处输入图片说明

您可以简单地使用grecaptcha.getResponse（）方法在客户端进行检查 

          var rcres = grecaptcha.getResponse();
          if(rcres.length){
            grecaptcha.reset();
            showHideMsg("Form Submitted!","success");
          }else{
            showHideMsg("Please verify reCAPTCHA","error");
          }
— 代码间谍
source
0

不幸的是，没有办法仅在客户端（Web浏览器）上验证验证码，因为验证码本身的性质至少需要两个参与者（双方）才能完成该过程。客户端-要求人员解决一些难题，数学等式，文本识别，并且响应由一种算法进行编码，并带有一些元数据，如验证时间戳，伪随机质询代码等验证码。一旦客户端提交带有验证码响应代码的表单，服务器端就需要使用一组预定义的规则（即）验证此验证码响应代码。如果验证码在5分钟内解决，如果客户端的IP地址相同，依此类推。这是一个非常笼统的描述，验证码是如何工作的，每个单独的实现（例如Google的ReCaptcha，一些解决自制验证码的基本数学方程式），

注意 客户端（Web浏览器）具有禁用JavaScript代码执行的选项，这意味着所提出的解决方案是完全无用的。

— Vchyzhevskyi
source
-1 

if (typeof grecaptcha !== 'undefined' && $("#dvCaptcha").length > 0 && $("#dvCaptcha").html() == "") {
                dvcontainer = grecaptcha.render('dvCaptcha', {
                    'sitekey': ReCaptchSiteKey,
                    'expired-callback' :function (response){
                        recaptch.reset();
                        c_responce = null;
                    },
                    'callback': function (response) {
                        $("[id*=txtCaptcha]").val(c_responce);
                        $("[id*=rfvCaptcha]").hide();
                        c_responce = response;

                    }
                });
            }
            
            function callonanybuttonClick(){
             
                if (c_responce == null) {
                    $("[id*=txtCaptcha]").val("");
                    $("[id*=rfvCaptcha]").show();

                    return false;
                }
                else {
                    $("[id*=txtCaptcha]").val(c_responce);
                    $("[id*=rfvCaptcha]").hide();
                    return true;
                }
            
}
<div id="dvCaptcha" class="captchdiv"></div>
    <asp:TextBox ID="txtCaptcha" runat="server" Style="display: none" />
    <label id="rfvCaptcha" style="color:red;display:none;font-weight:normal;">Captcha validation is required.</label>
展开摘要

验证码验证是必需的。

— 卡兰吉里·高斯瓦米（Karangiri goswami）
source
-1 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script type="text/javascript">
        function get_action() {
            var v = grecaptcha.getResponse();
            console.log("Resp" + v);
            if (v == '') {
                document.getElementById('captcha').innerHTML = "You can't leave Captcha Code empty";
                return false;
            }
            else {
                document.getElementById('captcha').innerHTML = "Captcha completed";
                return true;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" onsubmit="return get_action();">
    <div>
    <div class="g-recaptcha" data-sitekey="6LeKyT8UAAAAAKXlohEII1NafSXGYPnpC_F0-RBS"></div>
    </div>
   <%-- <input type="submit" value="Button" />--%>
   <asp:Button ID="Button1" runat="server"
       Text="Button" />
    <div id="captcha"></div>
    </form>
</body>
</html>

它将按预期工作。

— Papun Sahoo
source
-1

Google reCAPTCHA版本2 ASP.Net允许使用其回调函数在客户端验证验证码响应。在此示例中，将使用ASP.Net RequiredField Validator验证Google新的reCAPTCHA。

<script type="text/javascript">
    var onloadCallback = function () {
        grecaptcha.render('dvCaptcha', {
            'sitekey': '<%=ReCaptcha_Key %>',
            'callback': function (response) {
                $.ajax({
                    type: "POST",
                    url: "Demo.aspx/VerifyCaptcha",
                    data: "{response: '" + response + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        var captchaResponse = jQuery.parseJSON(r.d);
                        if (captchaResponse.success) {
                            $("[id*=txtCaptcha]").val(captchaResponse.success);
                            $("[id*=rfvCaptcha]").hide();
                        } else {
                            $("[id*=txtCaptcha]").val("");
                            $("[id*=rfvCaptcha]").show();
                            var error = captchaResponse["error-codes"][0];
                            $("[id*=rfvCaptcha]").html("RECaptcha error. " + error);
                        }
                    }
                });
            }
        });
    };
</script>


    <asp:TextBox ID="txtCaptcha" runat="server" Style="display: none" />
    <asp:RequiredFieldValidator ID="rfvCaptcha" ErrorMessage="The CAPTCHA field is required." ControlToValidate="txtCaptcha"
        runat="server" ForeColor="Red" Display="Dynamic" />

    <br />
    <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
— 朱莉亚
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.