Как я могу проверить google reCAPTCHA v2 с помощью javascript/jQuery?

Ответ 1

Проверка на стороне клиента reCaptcha - для меня работало следующее:

"grecaptcha.getResponse();" возвращает null, если reCaptcha не проверяется на стороне клиента, else возвращает значение, отличное от нуля.

Код Javascript:

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified

Ответ 2

Используйте это, чтобы проверить google captcha с помощью простого 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; 
    }
}

Ответ 3

Если вы сделаете 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);
};

Все это было из примечаний API Google:

Заметки API Google Recaptcha v2

Я немного не уверен, почему вы захотите это сделать. Обычно вы отправляете поле g-recaptcha-response вместе со своим приватным ключом для безопасной проверки серверной части. Если вы не хотите отключить кнопку отправки до тех пор, пока recaptcha не будет успешным или нет - в этом случае вышеуказанное должно работать.

Надеюсь, что это поможет.

Пол

Ответ 4

Упрощенный Пол отвечает:

Источник:

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

Ответ 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>

Ответ 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>

Затем вы можете проверить свою recaptcha с помощью метода IsRecapchaValid() следующим образом.

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

Ответ 7

Я использовал решение Palek в валидаторе Bootstrap, и он работает. Я бы добавил комментарий к нему, но у меня нет репутации;). Упрощенная версия:

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

Ответ 8

Я думал, что все они великолепны, но у меня были проблемы с их работой с javascript и С#. Вот что я сделал. Надеюсь, это поможет кому-то другому.

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