blocks|key|4543450|text|如果在回调中呈现Recaptcha|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4543451|<script+src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"+async+defer></script>|code-block|syntax|javascript|4543452|使用空DIV作为占位符|4543453|<div+id='html_element'></div>|4543454|然后，您可以为成功的CAPTCHA响应指定一个可选的函数调用|4543455|var+onloadCallback+=+function()+{
++++grecaptcha.render('html_element',+{
++++++'sitekey'+:+'your_site_key',
++++++'callback'+:+correctCaptcha
++++});
++};|4543456|然后，recaptcha响应将被发送到'correctCaptcha‘函数。|4543457|var+correctCaptcha+=+function(response)+{
++++alert(response);
};|4543458|所有这些都来自Google+API注释：|4543459|Google+Recaptcha+v2+API+Notes|offset|length|4543460|我有点不确定你为什么要这么做。通常，您会将g-recaptcha-response字段与您的私钥一起发送，以安全地验证服务器端。除非您想禁用提交按钮，直到recaptcha成功或类似的情况-在这种情况下，上面应该可以工作。|4543461|希望这能有所帮助。|4543462|保罗|4543463|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/recaptcha/docs/display^0|0|0|0|0|0|0|0|0|0|0|T|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1E|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1G|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1K|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1L|8|@]|9|@$W|1M|X|1N|1|1O]]|A|$]]|$1|Y|3|Z|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1R|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]]]

<p>If you render the Recaptcha on a callback</p>

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

<p>using an empty DIV as a placeholder</p>

<pre><code>&lt;div id='html_element'&gt;&lt;/div&gt;
</code></pre>

<p>then you can specify an optional function call on a successful CAPTCHA response</p>

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

<p>The recaptcha response will then be sent to the 'correctCaptcha' function.</p>

<pre><code>var correctCaptcha = function(response) {
    alert(response);
};
</code></pre>

<p>All of this was from the Google API notes :</p>

<p><a href="https://developers.google.com/recaptcha/docs/display" rel="noreferrer">Google Recaptcha v2 API Notes</a></p>

<p>I'm a bit unsure why you would want to do this.  Normally you would send the g-recaptcha-response field along with your Private key to safely validate server-side.  Unless you wanted to disable the submit button until the recaptcha was sucessful or such - in which case the above should work.</p>

<p>Hope this helps.</p>

<p>Paul</p>


blocks|key|36361|text|使用这个来用简单的javascript验证google+captcha。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|36362|html主体中的以下代码：|36363|<div+class="g-recaptcha"+id="rcaptcha"+style="margin-left:+90px;"+data-sitekey="my_key"></div>
<span+id="captcha"+style="margin-left:100px;color:red"+/>|code-block|syntax|javascript|36364|此代码放在call+get_action(+This+)方法表单按钮的标题部分：|36365|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;+
++++}
}|36366|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Use this to validate google captcha with simple javascript.</p>

<p>This code at the html body:</p>

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

<p>This code put at head section on call get_action(this) method form button:</p>

<pre><code>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; 
    }
}
</code></pre>


blocks|key|36380|text|我在Bootstrap验证器中使用了Palek的解决方案，它可以工作。我本想给他加个评论，但我没有这个代表；)。简化版：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|36381|++++++++$('#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;
+++++++++++}
+++++++});|code-block|syntax|javascript|36382|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I used Palek's solution inside a Bootstrap validator and it works. I'd have added a comment to his but I don'y have the rep;). Simplified version:</p>

<pre><code>        $('#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;
           }
       });
</code></pre>


blocks|key|4543596|text|我使用了HarveyEV的解决方案，但误读了它，并使用jQuery+validator而不是Bootstrap验证器进行了验证。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4543597|++<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>|code-block|syntax|javascript|4543598|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I used HarveyEV's solution but misread it and did it with jQuery validate instead of Bootstrap validator.</p>

<pre><code>  &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    $("#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;
        }
      }
    });
  &lt;/script&gt;
</code></pre>


blocks|key|4543623|text|简化了Paul的回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4543624|来源：|4543625|<script+src="https://www.google.com/recaptcha/api.js"></script>|code-block|syntax|javascript|4543626|HTML：|4543627|<div+class="g-recaptcha"+data-sitekey="YOUR_KEY"+data-callback="correctCaptcha"></div>|4543628|JS：|4543629|var+correctCaptcha+=+function(response)+{
++++++++alert(response);
++++};|4543630|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Simplified Paul's answer:</p>

<p>Source:</p>

<pre><code>&lt;script src="https://www.google.com/recaptcha/api.js"&gt;&lt;/script&gt;
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="correctCaptcha"&gt;&lt;/div&gt;
</code></pre>

<p>JS:</p>

<pre><code>var correctCaptcha = function(response) {
        alert(response);
    };
</code></pre>


blocks|key|4543673|text|可以使用以下代码呈现您的recaptcha|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4543674|<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>|code-block|syntax|javascript|4543675|然后，您可以使用"IsRecapchaValid()“方法验证您的recaptcha，如下所示。|4543676|+<script+type="text/javascript">
+++++function+IsRecapchaValid()
++++++{
++++++var+res+=+grecaptcha.getResponse(widId);
++++++if+(res+==+""+%7C%7C+res+==+undefined+%7C%7C+res.length+==+0)
+++++++++{
++++++++++return+false;
+++++++++}
+++++++return+true;
++++++}
+</script>|4543677|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>you can render your recaptcha using following code</p>

<pre><code>&lt;div id="recapchaWidget" class="g-recaptcha"&gt;&lt;/div&gt;

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

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

<p>Then you can validate your recaptcha by using "IsRecapchaValid()" method as follows.</p>

<pre><code> &lt;script type="text/javascript"&gt;
     function IsRecapchaValid()
      {
      var res = grecaptcha.getResponse(widId);
      if (res == "" || res == undefined || res.length == 0)
         {
          return false;
         }
       return true;
      }
 &lt;/script&gt;
</code></pre>


blocks|key|36538|text|我认为它们都很棒，但实际上我很难让它们与javascript和c#一起工作。这就是我所做的。希望这对其他人有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|36539|//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"/>|code-block|syntax|javascript|36540|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I thought all of them were great but I had troubles actually getting them to work with javascript and c#. Here is what I did. Hope it helps someone else.</p>

<pre><code>//put this at the top of the page
&lt;script src="https://www.google.com/recaptcha/api.js"&gt;&lt;/script&gt;

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

//retrieved from google and added callback
&lt;div class="g-recaptcha" data-sitekey="sitekey" data-callback="verifyCallback"&gt;

//created a custom validator and added error message and ClientValidationFucntion
&lt;asp:CustomValidator runat="server" ID="CustomValidator1" ValidationGroup="Initial" ErrorMessage="Captcha Required" ClientValidationFunction="doCaptchaValidate"/&gt;
</code></pre>


blocks|key|4543739|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4543740|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;
++++++++++++++++}
++++++++++++
}|code-block|syntax|javascript|4543741|<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>|4543742|4543743|++++++Captcha+validation+is+required.|4543744|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>if (typeof grecaptcha !== 'undefined' &amp;&amp; $("#dvCaptcha").length &gt; 0 &amp;&amp; $("#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;
                }
            
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="dvCaptcha" class="captchdiv"&gt;&lt;/div&gt;
    &lt;asp:TextBox ID="txtCaptcha" runat="server" Style="display: none" /&gt;
    &lt;label id="rfvCaptcha" style="color:red;display:none;font-weight:normal;"&gt;Captcha validation is required.&lt;/label&gt;</code></pre>
</div>
</div>
</p>

<p>
    
    Captcha validation is required.</p>


blocks|key|4543763|text|<%25@+Page+Language="C#"+AutoEventWireup="true"+CodeFile="Default.aspx.cs"+Inherits="_Default"+%25>

<!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"+%2B+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>
+++<%25--+<input+type="submit"+value="Button"+/>--%25>
+++<asp:Button+ID="Button1"+runat="server"
+++++++Text="Button"+/>
++++<div+id="captcha"></div>
++++</form>
</body>
</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4543764|它会像预期的那样工作。|unstyled|4543765|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="server"&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;script src='https://www.google.com/recaptcha/api.js'&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        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;
            }
        }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form id="form1" runat="server" onsubmit="return get_action();"&gt;
    &lt;div&gt;
    &lt;div class="g-recaptcha" data-sitekey="6LeKyT8UAAAAAKXlohEII1NafSXGYPnpC_F0-RBS"&gt;&lt;/div&gt;
    &lt;/div&gt;
   &lt;%-- &lt;input type="submit" value="Button" /&gt;--%&gt;
   &lt;asp:Button ID="Button1" runat="server"
       Text="Button" /&gt;
    &lt;div id="captcha"&gt;&lt;/div&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>It will work as expected.</p>


blocks|key|36609|text|Google+version2+ASP.Net允许使用其回调函数在客户端验证reCAPTCHA响应。在this+example中，谷歌新的reCAPTCHA将使用ASP.Net+RequiredField验证器进行验证。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|36610|<script+type="text/javascript">
++++var+onloadCallback+=+function+()+{
++++++++grecaptcha.render('dvCaptcha',+{
++++++++++++'sitekey':+'<%25=ReCaptcha_Key+%25>',
++++++++++++'callback':+function+(response)+{
++++++++++++++++$.ajax({
++++++++++++++++++++type:+"POST",
++++++++++++++++++++url:+"Demo.aspx/VerifyCaptcha",
++++++++++++++++++++data:+"{response:+'"+%2B+response+%2B+"'}",
++++++++++++++++++++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.+"+%2B+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"+/>|code-block|syntax|javascript|36611|entityMap|0|LINK|mutability|MUTABLE|url|http://dotnettec.com/google-recaptcha-example-javascript/^0|1F|C|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>The Google reCAPTCHA version 2 ASP.Net allows validating the Captcha response on the client side using its Callback functions. In <a href="http://dotnettec.com/google-recaptcha-example-javascript/" rel="nofollow noreferrer">this example</a>, the Google new reCAPTCHA will be validated using ASP.Net RequiredField Validator.</p>

<pre><code>&lt;script type="text/javascript"&gt;
    var onloadCallback = function () {
        grecaptcha.render('dvCaptcha', {
            'sitekey': '&lt;%=ReCaptcha_Key %&gt;',
            '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);
                        }
                    }
                });
            }
        });
    };
&lt;/script&gt;


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

    &lt;br /&gt;
    &lt;asp:Button ID="btnSubmit" Text="Submit" runat="server" /&gt;
</code></pre>


blocks|key|36628|text|不幸的是，没有办法只在客户端(web浏览器)上验证验证码，因为验证码本身的性质需要至少两个参与者(双方)来完成这个过程。客户端-要求人类解决一些难题，数学方程，文本识别，响应由算法编码，以及一些元数据，如验证码求解时间戳，伪随机挑战代码。一旦客户端提交了带有验证码的表单，服务器端就需要用一组预定义的规则来验证这个验证码。如果验证码在5分钟内解决，如果客户端的IP地址相同，依此类推。这是一个非常一般的描述，如何验证码工作，每个单一的实现(如谷歌的ReCaptcha，一些基本的数学方程解决自制验证码)，但唯一的一件事是通用的-客户端(web浏览器)捕获用户的响应和服务器端(web服务器)验证此响应，以了解表单提交是由人还是机器人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|36629|注意：客户端(web浏览器)可以选择禁用JavaScript代码的执行，这意味着所提出的解决方案完全无用。|36630|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>Unfortunately, there's no way to validate the captcha on the client-side only (web browser), because the nature of captcha itself requires at least two actors (sides) to complete the process.
The client-side - asks a human to solve some puzzle, math equitation, text recognition, and the response is being encoded by an algorithm alongside with some metadata like captcha solving timestamp, pseudo-random challenge code.
Once the client-side submits the form with a captcha response code, the server-side needs to validate this captcha response code with a predefined set of rules, ie. if captcha solved within 5 min period, if the client's IP addresses are the same and so on.
This a very general description, how captchas works, every single implementation (like Google's ReCaptcha, some basic math equitation solving self-made captchas), but the only one thing is common - client-side (web browser) captures users' response and server-side (webserver) validates this response in order to know if the form submission was made by a human or a robot.</p>
<p>NB. The client (web browser) has an option to disable the execution of JavaScript code, which means that the proposed solutions are completely useless.</p>


blocks|key|36640|text|您不能仅使用JS进行验证。但是，如果您想在submit按钮中检查reCAPTCHA是否有效，即用户是否单击了reCAPTCHA，那么您可以使用以下代码来完成此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|36641|+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.
++++++++//+...
++++}
});|code-block|syntax|javascript|36642|在这里，我使用了一个变量recaptchVerified，在这里我将其初始设置为false，然后在验证Recaptcha时将其设置为true。|36643|因此，当用户单击submit按钮并检查他是否验证了验证码时，我可以使用recaptchVerified变量。|36644|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You cannot validate alone with JS only. But if you want to check in the submit button that reCAPTCHA is validated or not that is user has clicked on reCAPTCHA then you can do that using below code.</p>
<pre><code> 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.
        // ...
    }
});
</code></pre>
<p>Here I have used a variable recaptchVerified where I make it initially false and when Recaptcha is validated then I make it true.</p>
<p>So I can use recaptchVerified variable when the user click on the submit button and check if he had verified the captcha or not.</p>


blocks|key|36745|text|如果您只是想避免在用户甚至没有尝试reCAPTCHA的情况下访问服务器，那么在onsubmit操作中添加一个验证函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|36746|<form+id="start_game"+action="start-game"+method="post"+onsubmit="return+validate_form();">|offset|length|style|CODE|36747|然后使该函数如下所示：|36748|function+validate_form()+{

++++const+recaptcha_box_checked+=+(grecaptcha.getResponse())+?+true+:+false;

++++if+(recaptcha_box_checked)+{+
++++++++return+true;
++++}
++++else+{
++++++++alert("You+must+check+the+'I+am+not+a+robot'+box+before+you+can+start+a+game!");
++++++++return+false;
++++}
}|code-block|syntax|javascript|36749|现在，用户当然可以破坏这一点，但您的后端将使用您的密钥与google服务器检查g-recaptcha-response。这使用户在忘记选中该框时，不必再浏览另一个或两个页面。|36750|entityMap^0|0|0|2J|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|W|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|X|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>If you just want to avoid a trip to the server when the user hasn't even attempted the reCAPTCHA, put a validate function in the onsubmit action:</p>
<p><code>&lt;form id=&quot;start_game&quot; action=&quot;start-game&quot; method=&quot;post&quot; onsubmit=&quot;return validate_form();&quot;&gt;</code></p>
<p>And then make that function something like this:</p>
<pre><code>function validate_form() {

    const recaptcha_box_checked = (grecaptcha.getResponse()) ? true : false;

    if (recaptcha_box_checked) { 
        return true;
    }
    else {
        alert(&quot;You must check the 'I am not a robot' box before you can start a game!&quot;);
        return false;
    }
}
</code></pre>
<p>Now, the user could certainly subvert this, but your backend is going to check the g-recaptcha-response with a google server using your secret key.  This just stops the user from having to go through another page or two when she simply forgets to check the box.</p>


<p>I have a simple contact form in aspx.
I want to validate the reCaptcha (client-side) before submitting the form.
Please help.</p>

<p>Sample code:</p>

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

<p>I want to validate the captcha on <code>cmdSubmit</code> click.</p>

<p>Please help.</p>


How can I validate google reCAPTCHA v2 using javascript/jQuery?

验证码

服务器

jQuery

我在aspx中有一个简单的联系人表单。我想在提交表单之前验证reCaptcha (客户端)。请帮帮忙。示例代码：    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>   ...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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