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

我有一个简单的接触形式在 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点击验证。

请帮帮我。

388275 次浏览
小开

如果在回调中呈现 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
});
};

然后，重捕获响应将被发送到“ rectCaptcha”函数。

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

所有这些都来自 Google API 的笔记:

Google Recaptcha v2 API Notes

我不知道你为什么要这么做。通常情况下，您将发送 g-captcha-response 字段和您的 Private 密钥，以便安全地验证服务器端。除非你想禁用提交按钮，直到重演成功或类似的-在这种情况下，上述应该工作。

希望这个能帮上忙。

保罗

小开

使用这个简单的 javascript 验证 google captcha。

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

这段代码放在 call 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;
}
}
小开

这个客户端验证 reCaptcha-以下工作为我:

如果在客户端 grecaptcha.getResponse();没有验证 reCaptcha，则返回 null以外的值。

Javascript 代码: 

var response = grecaptcha.getResponse();


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


else
//reCaptch verified
小开

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

我使用了 Harvey EV 的解决方案，但是误读了它，并且使用了 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>
小开

简而言之，保罗的回答是:

来源:

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

HTML:

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

约翰逊:

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

您可以使用下面的代码呈现您的重演

<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 ()”方法验证重捕获程序，如下所示。

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

我认为它们都很棒，但是我在让它们与 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"/>
小开 

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>

验证验证是必需的。

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

它会像预期的那样工作。

小开

资料来源连结

enter image description here

您可以简单地使用 GetResponse () 方法

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

不幸的是，没有办法只在客户端(web 浏览器)验证验证过程，因为验证过程本身的性质需要至少两个参与者(方)来完成过程。 客户端要求人类解决一些难题，数学等式，文本识别，并且响应是由一个算法和一些元数据一起编码，如验证码解决时间戳，伪随机挑战代码。 一旦客户端提交带有验证码响应代码的表单，服务器端需要使用预定义的规则集验证这个验证码响应代码，即。如果验证码在5分钟内解决，如果客户端的 IP 地址是相同的等等。 这是一个非常笼统的描述，验证码如何工作，每一个单独的实现(像谷歌的 ReCaptcha，一些基本的数学等式解决自制验证码) ，但唯一的共同点是-客户端(网络浏览器)捕捉用户的响应和服务器端(网络服务器)验证这个响应，以便知道表单提交是由人类还是机器人做的。

注意。客户端(web 浏览器)有一个禁用 JavaScript 代码执行的选项，这意味着提出的解决方案是完全无用的。

小开

您不能仅使用 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.
// ...
}
});

在这里，我使用了一个变量 apptchVerfied，我将其初始化为 false，当 Recaptcha 被验证后，我将其设置为 true。

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

小开

下面是我们如何使用.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 的 职位操作中调用上述方法。

小开

如果你只是想避免在用户还没有尝试 reCAPTCHA 的时候访问服务器，那么在 oncommit 操作中添加一个验证函数:

<form id="start_game" action="start-game" method="post" onsubmit="return validate_form();">

然后让这个函数像这样:

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

现在，用户当然可以颠覆这一点，但是您的后端将使用您的秘密密钥在谷歌服务器上检查 g-captcha-response。当用户只是忘记选中复选框时，这只会阻止用户浏览另外一两个页面。


提交答案