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

【问题标题】：How can I validate google reCAPTCHA v2 using javascript/jQuery?如何使用 javascript/jQuery 验证 google reCAPTCHA v2？
【发布时间】：2015-03-10 06:02:37
【问题描述】：

我有一个简单的 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 时验证验证码。

请帮忙。

【问题讨论】：

到目前为止你做了什么？需要更多信息，这个问题太模糊了。
如果您不通过服务器端验证向 google 发送发布请求，您甚至可以不包含验证码。下面建议的客户端验证将由机器人通过。
验证验证码被点击客户端>做某事>验证recaptcha数据服务器端>做某事。
不要。验证验证码客户端正在违背其目的。所以你打算把你的密钥扔出窗外吗？

标签： javascript jquery asp.net google-api recaptcha

【解决方案1】：

如果您在回调中呈现 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 字段以及您的私钥以安全地验证服务器端。除非您想在重新验证成功之前禁用提交按钮或类似情况 - 在这种情况下，上述方法应该有效。

希望这会有所帮助。

保罗

【讨论】：

从头开始，我想通了-您的部分代码不正确，因此我将建议进行编辑。干杯！
@Prefix 你提出修改了吗？期待你的版本。
正确的Captcha回调函数声明（在grecaptcha.render内）应该不带引号，并且应该放在onloadCallback之前。

【解决方案2】：

使用它通过简单的 javascript 验证谷歌验证码。

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

【讨论】：

这段代码就在正文部分的 span 标签上方
我认为这是更好的解决方案。这样，您可以在表单提交处理程序中处理响应的验证。这似乎比尝试在验证码回调上处理它更合乎逻辑。我想这取决于您是即时验证还是提交时验证。
你应该使用===和!==;没有理由不这样做。
这个解决方案是错误的。我认为当您收到响应时，您必须将参数（响应 + 密钥 + ClientIp）发送到谷歌进行验证。验证后。谷歌返回我们成功或失败。在您的示例中，您不使用第二步。你能解释一下：你的私钥在哪里。你什么时候用？
Mahmut 是正确的，这个答案是危险的错误和不完整的。

【解决方案3】：

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

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

Javascript 代码：

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified

【讨论】：

这是不正确的。 Captcha 尚未通过 JS 验证，您需要将响应以及您的站点密钥和密钥从您的后端代码提交到 Google 的服务器，以确定 Captcha 是否已成功回答。这个答案非常不正确。
引用：当最终用户解决了 reCAPTCHA 时，将在 HTML 中填充一个新字段 (g-recaptcha-response)。 developers.google.com/recaptcha/docs/verify
但这还不是全部@CoalaWeb！ Quote: 获得响应令牌后，您需要使用以下 API 使用 reCAPTCHA 验证它，以确保令牌有效。 https://developers.google.com/recaptcha/docs/verify
对于那些说答案不正确的人，您是否阅读过问题？问题和答案都清楚地指定了客户端 - 明显的目的是检查验证码实际上是否已在客户端之前向服务器发送发布请求以进行进一步验证..
只能知道用户是否真的在客户端填写过。 'g-recaptcha-response' 的值将被填写，但需要发送给 Google 以检查响应是否有效。例如，通过图像匹配，您可以单击任何内容或不单击任何内容，然后单击提交。这不正确，但“g-recaptcha-response”的值已填写。您可以使用 AJAX 来验证它，但请务必将您的密钥保存在服务器端代码中。简短的回答是服务器必须检查它是否有效，无论您是使用 AJAX 还是使用完整形式的帖子。

【解决方案4】：

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

【讨论】：

【解决方案5】：

我使用了 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>

【讨论】：

【解决方案6】：

简化保罗的回答：

来源：

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

【讨论】：

像许多其他错误的解决方案一样，您只是在这里获得了令牌。在您将其与您的密钥一起发送给 Google 之前，您尚未验证它。
这以某种方式导致我的元素出现问题。如果我们在元素内部使用 data-callback，Webpack 无法自行编译
这应该是公认的答案，因为它不需要覆盖渲染函数。至于纯粹在 JS 中的验证，我怀疑这是可能的，因为它需要将密钥放入 JS 中，从而让每个人都可以得到它。

【解决方案7】：

您可以使用以下代码呈现您的验证码

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

【讨论】：

所以，像这样：return res && res.length 不要忘记服务器验证。

【解决方案8】：

我认为它们都很棒，但实际上让它们与 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"/>

【讨论】：

【解决方案9】：

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>

需要验证码。

【讨论】：

【解决方案10】：

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

它将按预期工作。

【讨论】：

【解决方案11】：

Source Link

您可以使用简单地在客户端检查 grecaptcha.getResponse() 方法

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

【讨论】：

【解决方案12】：

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

注意。客户端（网络浏览器）可以选择禁用 JavaScript 代码的执行，这意味着建议的解决方案完全没有用。

【讨论】：

【解决方案13】：

您不能仅使用 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 变量。

【讨论】：

【解决方案14】：

以下是我们使用 .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);
    }

在控制器的 POST 操作中调用上述方法。

【讨论】：

【解决方案15】：

如果您只是想避免在用户甚至没有尝试 reCAPTCHA 时访问服务器，请在 onsubmit 操作中放置一个验证函数：

<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-recaptcha-response。这只是让用户在忘记选中复选框时不必再浏览一两个页面。

【讨论】：