Question

我在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点击验证验证码。

请帮忙。

Answer 1

客户端对reCaptcha的验证 - 以下内容对我有用：

“grecaptcha.getResponse（）;”如果在客户端未验证reCaptcha，则返回null，否则返回null以外的值。

Javascript代码：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Answer 2

使用此功能通过简单的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" />

此代码放在head部分调用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; 
    }
}

Answer 3

简化保罗的回答：

来源：

<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);
    };

Answer 4

如果您在回调中呈现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 Notes

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

希望这有帮助。

保

Answer 5

我使用了HarveyEV的解决方案，但误读了它并使用jQuery验证而不是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>

Answer 6

您可以使用以下代码

渲染您的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>

Answer 7

我认为所有这些都很棒，但实际上让他们使用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"/>

Answer 8

我在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;
           }
       });

Answer 9

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

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

Answer 10

＆＃13;

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

＆＃13;

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

＆＃13;

验证码是必需的。

Answer 11

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

它将按预期工作。

Answer 12

Google reCAPTCHA第2版ASP.Net允许使用其回调函数验证客户端上的Captcha响应。在this example中，Google新reCAPTCHA将使用ASP.Net RequiredField Validator进行验证。

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

Answer 13

Source Link

您可以使用 grecaptcha.getResponse（）方法

          var rcres = grecaptcha.getResponse();
          if(rcres.length){
            grecaptcha.reset();
            showHideMsg("Form Submitted!","success");
          }else{
            showHideMsg("Please verify reCAPTCHA","error");
          }

Answer 14

您不能仅使用JS单独进行验证。但是，如果您要检查是否已验证reCAPTCHA的提交按钮，即用户单击了reCAPTCHA，则可以使用以下代码进行操作。

 let recaptchVerified = false;
firebase.initializeApp(firebaseConfig);
firebase.auth().languageCode = 'en';
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container',{
    'callback': function(response) {
        recaptchVerified = true;
        // reCAPTCHA solved, allow signInWithPhoneNumber.
        // ...
    },
    'expired-callback': function() {
        // Response expired. Ask user to solve reCAPTCHA again.
        // ...
    }
});

在这里，我使用了变量recaptchVerified，使它最初为false，然后在验证Recaptcha时将其设为true。

因此，当用户单击“提交”按钮并检查他是否验证了验证码时，我可以使用recaptchVerified变量。

Answer 15

这是我们使用.NET验证RECAPTCHA的方式：

前端

<div id="rcaptcha" class="g-recaptcha" data-sitekey="[YOUR-KEY-GOES-HERE]" data-callback="onFepCaptchaSubmit"></div>

后退：

    public static bool IsCaptchaValid(HttpRequestBase requestBase)
    {
        var recaptchaResponse = requestBase.Form["g-recaptcha-response"];
        if (string.IsNullOrEmpty(recaptchaResponse))
        {
            return false;
        }

        string postData = string.Format("secret={0}&response={1}&remoteip={2}", "[YOUR-KEY-GOES-HERE]", recaptchaResponse, requestBase.UserHostAddress);
        byte[] data = System.Text.Encoding.ASCII.GetBytes(postData);

        HttpWebRequest request = (HttpWebRequest)WebRequest.Create("https://www.google.com/recaptcha/api/siteverify");

        request.Method = "POST";
        request.ContentType = "application/x-www-form-urlencoded";
        request.ContentLength = data.Length;

        using (var stream = request.GetRequestStream())
        {
            stream.Write(data, 0, data.Length);
        }

        var response = (HttpWebResponse)request.GetResponse();

        var responseString = "";

        using (var sr = new System.IO.StreamReader(response.GetResponseStream()))
        {
            responseString = sr.ReadToEnd();
        }

        return System.Text.RegularExpressions.Regex.IsMatch(responseString, "\"success\"(\\s*?):(\\s*?)true", System.Text.RegularExpressions.RegexOptions.Compiled);
    }

在Controller的 POST 操作中调用上述方法。

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

15 个答案: