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

120

У меня есть простая контактная форма в 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нажатии.

Пожалуйста помоги.

javascript jquery asp.net google-api recaptcha Махатма Аладдин
источник
2
что ты сделал до сих пор? нужна дополнительная информация, вопрос слишком расплывчатый.
Zaki
1
Если вы не отправляете почтовый запрос в Google через проверку на стороне сервера, вы также можете даже не включать капчу. Предлагаемые ниже проверки на стороне клиента будут переданы ботами.
Virge Assault
Подтвердить, что капча нажата на стороне клиента> сделать что-то> проверить серверную часть данных рекапчи> сделать что-нибудь.
JPB
2
Посмотрите пример учебника здесь freakyjolly.com/…
Code Spy

Ответы:

105

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

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

Код Javascript: 

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified
Палак Танежаа
источник
113
Это неверно. Captcha НЕ была проверена JS, вам необходимо отправить ответ вместе с ключом вашего сайта и секретным ключом на серверы Google из вашего внутреннего кода, чтобы определить, был ли успешно дан ответ на Captcha. Этот ответ опасно неверен.
Шон Кендл
9
Цитата: Когда reCAPTCHA решается конечным пользователем, новое поле (g-recaptcha-response) будет заполнено в HTML. developers.google.com/recaptcha/docs/verify
CoalaWeb,
6
Но это еще не все @CoalaWeb! Цитата: после получения токена ответа вам необходимо проверить его с помощью reCAPTCHA, используя следующий API, чтобы убедиться, что токен действителен. https://developers.google.com/recaptcha/docs/verify
Дилан Смит,
14
Тем, кто говорит, что ответ неверен, вы вообще читали вопрос? И в вопросе, и в ответе четко указывается на стороне клиента - очевидное намерение состоит в том, чтобы проверить, действительно ли капча была заполнена на стороне клиента, прежде чем отправлять почтовый запрос на сервер для дальнейшей проверки ..
rococo
4
Вы можете узнать только, заполнил ли пользователь его на стороне клиента. Значение 'g-recaptcha-response' будет заполнено, но его необходимо отправить в Google, чтобы они проверили, действителен ли ответ или нет. Например, с сопоставлением изображений вы можете щелкнуть что угодно или ничего и нажать «Отправить». Это неверно, но значение g-recaptcha-response заполнено. Вы можете использовать AJAX для проверки, но не забудьте сохранить секретный ключ в коде на стороне сервера. Короткий ответ: сервер должен проверить, действительно ли он действителен, независимо от того, делаете ли вы это с помощью AJAX или с помощью полной формы сообщения.
Шон Кендл
60

Используйте это для проверки 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; 
    }
}
Правин Шарма
источник
<div class = "g-recaptcha" id = "rcaptcha" style = "margin-left: 90px;" data-sitekey = "my_key"> </div> этот код чуть выше тега span в разделе body
Pravin Sharma
2
Думаю, это лучшее решение. Таким образом, вы можете обработать проверку ответа в обработчике отправки формы. Это кажется более логичным, чем пытаться обработать это с помощью обратного вызова captcha. Я думаю, это зависит от того, проверяете ли вы на лету или при отправке.
Lightbulb1,
4
Вы должны использовать ===и !==; нет причин не делать этого.
slikts
28
Это неправильное решение. Я думаю, что когда вы получите ответ, вам нужно отправить параметр (response + secretkey + ClientIp) в Google для проверки. После проверки. Google возвращает нам успех или неудачу. в вашем примере вы не используете второй шаг. можешь мне объяснить: где твой закрытый ключ. Когда ты будешь использовать?
Mahmut EFE
3
Махмут прав, этот ответ опасно неправильный и неполный.
Шон Кендл
27

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

Источник:

<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);
    };
Мануэль Азар
источник
13
Как и многие другие неправильные решения, здесь вы просто получаете токен. Вы не подтвердили его, пока не отправите его в Google со своим секретным ключом.
evolross
Это как-то вызывает проблемы в моей стихии. Webpack не может скомпилировать себя, если мы будем использовать обратный вызов данных внутри элемента
Фарис Райхан
2
Это должен быть принятый ответ, поскольку он не требует перезаписи функции рендеринга. Что касается проверки исключительно в JS, я сомневаюсь, что это возможно, поскольку для этого потребуется поместить секретный ключ в JS и, таким образом, позволить каждому получить доступ к нему.
Аскерман
25

Если вы визуализируете 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 будет отправлен в функцию «correcaptcha».

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

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

Примечания к API Google Recaptcha v2

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

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

Павел

pphillips001
источник
1
Поцарапайте это, я понял - часть вашего кода неверна, поэтому я предлагаю отредактировать. Ура!
Префикс
@Prefix Вы уже предлагали редактирование? С нетерпением жду вашей версии.
thanks_in_advance
1
Объявление функции обратного вызова correCaptcha (внутри grecaptcha.render) должно быть без кавычек и должно быть помещено перед onloadCallback.
Pratul Sanwal 08
9

Я использовал решение 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>
imjosh
источник
6

Я думал, что все они великолепны, но у меня были проблемы с тем, чтобы заставить их работать с 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"/>
BV2005
источник
4

вы можете отобразить свою рекапчу, используя следующий код

<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>
Табиш Усман
источник
Итак, вот так: return res && res.length не забывайте о проверке сервера.
Alex
1

Я использовал решение Палека внутри валидатора 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;
           }
       });
HarveyEV
источник
1

Ссылка на источник

введите описание изображения здесь

Вы можете просто проверить на стороне клиента с помощью grecaptcha.getResponse () метод

          var rcres = grecaptcha.getResponse();
          if(rcres.length){
            grecaptcha.reset();
            showHideMsg("Form Submitted!","success");
          }else{
            showHideMsg("Please verify reCAPTCHA","error");
          }
Кодовый шпион
источник
0

К сожалению, нет возможности проверить капчу только на стороне клиента (в веб-браузере), потому что сама природа капчи требует как минимум двух участников (сторон) для завершения процесса. Клиентская сторона - просит человека решить какую-то головоломку, математическое моделирование, распознавание текста, и ответ кодируется алгоритмом вместе с некоторыми метаданными, такими как временная метка решения капчи, псевдослучайный код вызова. После того, как клиентская сторона отправит форму с кодом ответа captcha, серверная сторона должна проверить этот код ответа captcha с заранее определенным набором правил, т.е. если капча решена в течение 5 минут, если IP-адреса клиентов совпадают и так далее. Это очень общее описание того, как работают капчи, каждая реализация (например, Google ReCaptcha, некоторые базовые математические уравнения, решающие самодельные капчи),

NB. В клиенте (браузере) есть возможность отключить выполнение кода JavaScript, а это означает, что предлагаемые решения совершенно бесполезны.

vchyzhevskyi
источник
-1 

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>
Развернуть фрагмент

Требуется проверка Captcha.

Карангири госвами
источник
-2 
<%@ 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>

Это будет работать как положено.

Папун Саху
источник
-2

Google reCAPTCHA версии 2 ASP.Net позволяет проверять ответ Captcha на стороне клиента с помощью функций обратного вызова. В этом примере новая reCAPTCHA Google будет проверяться с помощью 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" />
Юля
источник