Як я можу перевірити 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>

Я хочу перевірити Captcha при cmdSubmitнатисканні.

Будь ласка, допоможіть.

— Махатма Аладдін
джерело

2

що ви робили поки що? потрібна додаткова інформація, питання занадто розпливчасте.

— Закі

1

Якщо ви не відправляєте запит на пошту в Google через перевірку на стороні сервера, ви також можете навіть не включати капчу. Запропоновані нижче валідації клієнтської сторони передаються ботами.

— Virge Assault

Підтверджується команда Captcha, натискається clientide> роби щось> перевіряє сторону сервера даних recaptcha> роби щось.

— JPB

2

Перевірте зразок навчального прикладу тут freakyjolly.com/…

— Code Spy

104

Ця клієнтська перевірка 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-відповідь) буде заповнене в 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-відповідь" заповнюється. Ви можете використовувати 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" />

Цей код розміщений у головному розділі на кнопці форми форми вилучення (цього) методу:

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. Я думаю, це залежить від вашої перевірки на льоту або під час подання.

— Лампочка1

4

Ви повинні використовувати ===і !==; ніяких причин не робити.

— slikts

28

Це рішення неправильне. Я думаю, що коли ви отримаєте відповідь, вам доведеться надіслати параметр (відповідь + секретна клавіша + ClientIp) в google для перевірки. Після перевірки. Google повертає нам успіх чи невдачу. у вашому прикладі ви не використовуєте другий крок. Ви можете мені пояснити: Де ваш приватний ключ. Коли ви будете використовувати?

— Махмут 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 не може скомпілювати його самостійно, якщо ми будемо використовувати зворотний виклик даних всередині елемента

— Faris Rayhan

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 буде надісланий функції "правильнаCaptcha".

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

Все це було з приміток API Google:

Примітки API Google Recaptcha v2

Я трохи не впевнений, чому ви хочете це зробити. Зазвичай ви надсилаєте поле g-recaptcha-відповідь разом зі своїм приватним ключем для безпечної перевірки на стороні сервера. Якщо ви не хотіли відключити кнопку для надсилання, поки recaptcha не був успішним чи таким - у цьому випадку вищезазначене має працювати.

Сподіваюся, це допомагає.

Пол

— pphillips001
джерело

1

подряпини це, я зрозумів це - частина вашого коду неправильна, тому я запропоную редагувати. Ура!

— Префікс

@Prefix Ви запропонували редагувати ще? Чекаємо вашої версії.

— спасибо_in_advance

1

Оголошення функції зворотного виклику правильної Captcha (всередині grecaptcha.render) повинно бути без лапок і повинно бути розміщене перед onloadCallback.

— Pratul Sanwal

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>

— імжош
джерело

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

ви можете надати свій 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>

— Табіш Усман
джерело

Отже, як ось це: return res && res.length не забувайте про перевірку сервера.

— Олексій Гурський

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

— Харвієв
джерело

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 заздалегідь визначеним набором правил, тобто. якщо captcha вирішено протягом 5 хвилин, якщо IP-адреси клієнта однакові тощо. Це дуже загальний опис того, як працюють капчі, кожна реалізація (наприклад, ReCaptcha Google, деякі основні математичні рівняння, що вирішують власноруч виготовлені капчу),

NB. У клієнта (веб-браузера) є можливість відключити виконання JavaScript-коду, а це означає, що запропоновані рішення є абсолютно марними.

— вчижевський
джерело

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

— Karangiri goswami
джерело

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

— Юлія
джерело