Jak mogę zweryfikować Google reCAPTCHA v2 przy użyciu javascript / jQuery?

120

Mam prosty formularz kontaktowy w aspx. Chcę zweryfikować reCaptcha (po stronie klienta) przed wysłaniem formularza. Proszę pomóż.

Przykładowy kod:

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

Chcę sprawdzić captcha po cmdSubmitkliknięciu.

Proszę pomóż.

— Mahatma Aladdin
źródło

2

co zrobiłeś do tej pory? potrzebuję więcej informacji, pytanie jest zbyt niejasne.

— Zaki

1

Jeśli nie wysyłasz żądania wpisu do Google za pośrednictwem weryfikacji po stronie serwera, równie dobrze możesz nawet nie dołączać captcha. Sugerowane poniżej walidacje po stronie klienta będą przekazywane przez boty.

— Virge Assault,

Weryfikacja captcha jest kliknięta po stronie klienta> zrób coś> sprawdź poprawność po stronie serwera danych recaptcha> zrób coś.

— JPB,

2

Sprawdź przykładowy samouczek tutaj freakyjolly.com/…

— Code Spy

104

Ta weryfikacja po stronie klienta reCaptcha- działała dla mnie:

jeśli reCaptcha nie jest sprawdzana po stronie klienta grecaptcha.getResponse();zwrotów null, w przeciwnym wypadku zwraca wartość jest inne niż null.

Kod JavaScript:

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified

— Palak Tanejaa
źródło

113

To jest niepoprawne. Captcha NIE została zweryfikowana przez JS, musisz przesłać odpowiedź wraz z kluczem witryny i tajnym kluczem na serwery Google z kodu zaplecza, aby ustalić, czy odpowiedź na Captcha została pomyślnie odebrana. Ta odpowiedź jest niebezpiecznie błędna.

— Sean Kendle

9

Cytat: Kiedy reCAPTCHA zostanie rozwiązany przez użytkownika końcowego, nowe pole (g-recaptcha-response) zostanie wypełnione w HTML. developers.google.com/recaptcha/docs/verify

— CoalaWeb

6

Ale to nie wszystko @CoalaWeb! Cytat: Po otrzymaniu tokenu odpowiedzi musisz zweryfikować go za pomocą reCAPTCHA przy użyciu następującego interfejsu API, aby upewnić się, że token jest ważny. https://developers.google.com/recaptcha/docs/verify

— Dylan Smith

14

Czy przeczytaliście nawet pytanie tym, którzy twierdzą, że odpowiedź jest nieprawidłowa? Pytanie i odpowiedź jasno określają stronę klienta - oczywistym zamiarem jest sprawdzenie, czy captcha została faktycznie wypełniona po stronie klienta przed wysłaniem żądania pocztowego na serwer w celu dalszej weryfikacji ..

— rokoko

4

Możesz tylko wiedzieć, czy użytkownik faktycznie wypełnił go po stronie klienta. Wartość „g-recaptcha-response” zostanie wypełniona, ale należy ją wysłać do Google, aby mogli sprawdzić, czy odpowiedź jest prawidłowa, czy nie. Na przykład przy dopasowywaniu obrazu możesz kliknąć cokolwiek lub nic, a następnie kliknąć Prześlij. To nieprawda, ale wartość „g-recaptcha-response” jest wypełniona. Możesz użyć AJAX, aby to zweryfikować, ale pamiętaj, aby zachować swój tajny klucz w kodzie po stronie serwera. Krótka odpowiedź jest taka, że serwer musi sprawdzić, czy jest ważny, czy robisz to za pomocą AJAX, czy z pełnym postem.

— Sean Kendle

60

Użyj tego, aby sprawdzić poprawność google captcha za pomocą prostego kodu JavaScript.

Ten kod w treści 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" />

Ten kod znajduje się w sekcji nagłówka przycisku formularza metody 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; 
    }
}

— Pravin Sharma
źródło

<div class = "g-recaptcha" id = "rcaptcha" style = "margin-left: 90px;" data-sitekey = "my_key"> </div> ten kod tuż nad tagiem span w sekcji body

— Pravin Sharma

2

Myślę, że to lepsze rozwiązanie. W ten sposób możesz obsłużyć walidację odpowiedzi w module obsługi przesyłania formularza. Wydaje się to bardziej logiczne niż próba obsłużenia tego w wywołaniu zwrotnym captcha. Wydaje mi się, że zależy to od tego, czy walidujesz w locie, czy po przesłaniu.

— Żarówka 1

4

Powinieneś użyć ===i !==; nie ma powodu, żeby tego nie robić.

— slikts

28

To rozwiązanie jest złe. Myślę, że kiedy otrzymasz odpowiedź, musisz wysłać parametr (odpowiedź + klucz tajny + ClientIp) do Google w celu weryfikacji. Po walidacji. Google zwraca nam sukces lub porażkę. w twoim przykładzie nie używasz drugiego kroku. Czy możesz mi wyjaśnić: gdzie jest twój klucz prywatny. Kiedy będziesz używać?

— Mahmut EFE

3

Mahmut ma rację, ta odpowiedź jest niebezpiecznie błędna i niepełna.

— Sean Kendle

27

Uproszczona odpowiedź Pawła:

Źródło:

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

— Manuel Azar
źródło

13

Podobnie jak wiele innych złych rozwiązań, po prostu otrzymujesz token tutaj. Nie potwierdziłeś go, dopóki nie wyślesz go do Google ze swoim tajnym kluczem.

— evolross

To w jakiś sposób powoduje problem w moim żywiole. Webpack nie może sam się skompilować, jeśli użyjemy wywołania zwrotnego danych wewnątrz elementu

— Faris Rayhan

2

Powinna to być akceptowana odpowiedź, ponieważ nie wymaga nadpisywania funkcji renderującej. Jeśli chodzi o walidację wyłącznie w JS, wątpię, czy jest to możliwe, ponieważ wymagałoby umieszczenia tajnego klucza w JS, a tym samym umożliwienia wszystkim przejęcia go w swoje ręce.

— Askerman

25

Jeśli renderujesz Recaptcha podczas wywołania zwrotnego

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

używając pustego DIV jako symbolu zastępczego

<div id='html_element'></div>

następnie możesz określić opcjonalne wywołanie funkcji w pomyślnej odpowiedzi CAPTCHA

var onloadCallback = function() {
    grecaptcha.render('html_element', {
      'sitekey' : 'your_site_key',
      'callback' : correctCaptcha
    });
  };

Odpowiedź recaptcha zostanie następnie wysłana do funkcji „correctCaptcha”.

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

Wszystko to pochodzi z notatek Google API:

Notatki API Google Recaptcha v2

Nie jestem pewien, dlaczego chcesz to zrobić. Zwykle wysyłasz pole odpowiedzi g-recaptcha wraz z kluczem prywatnym, aby bezpiecznie sprawdzić poprawność po stronie serwera. Chyba że chciałeś wyłączyć przycisk wysyłania, dopóki recaptcha nie zakończy się sukcesem lub tak - w takim przypadku powyższe powinno działać.

Mam nadzieję że to pomoże.

Paweł

— pphillips001
źródło

1

daj sobie spokój, odkryłem to - część twojego kodu jest niepoprawna, więc zaproponuję edycję. Twoje zdrowie!

— Prefiks

@Prefix Czy zaproponowałeś już edycję? Czekamy na twoją wersję.

— thanks_in_advance

1

Deklaracja poprawnej funkcji wywołania zwrotnegoCaptcha (wewnątrz grecaptcha.render) nie powinna zawierać cudzysłowów i powinna być umieszczona przed onloadCallback.

— Pratul Sanwal

9

Użyłem rozwiązania HarveyEV, ale źle je odczytałem i zrobiłem to z walidacją jQuery zamiast walidatorem 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
źródło

6

Myślałem, że wszystkie z nich są świetne, ale miałem problemy ze zmontowaniem ich do pracy z javascript i c #. Oto co zrobiłem. Mam nadzieję, że pomoże to komuś innemu.

//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
źródło

4

możesz renderować swoją recaptcha za pomocą następującego kodu

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

Następnie możesz zweryfikować swoją recaptcha za pomocą metody „IsRecapchaValid ()” w następujący sposób.

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

— Tabish Usman
źródło

Tak więc: return res && res.length nie zapomnij o walidacji serwera.

— Alex Gurskiy,

1

Użyłem rozwiązania Palek w walidatorze Bootstrap i działa. Dodałbym komentarz do jego, ale nie mam przedstawiciela;). Wersja uproszczona:

        $('#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
źródło

1

Link do źródła

Możesz po prostu sprawdzić po stronie klienta za pomocą metody grecaptcha.getResponse ()

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

— Code Spy
źródło

0

Niestety, nie ma sposobu, aby zweryfikować captcha tylko po stronie klienta (przeglądarka internetowa), ponieważ sama natura captcha wymaga co najmniej dwóch aktorów (stron) do ukończenia procesu. Po stronie klienta - prosi człowieka o rozwiązanie jakiejś zagadki, równania matematycznego, rozpoznawania tekstu, a odpowiedź jest kodowana przez algorytm wraz z niektórymi metadanymi, takimi jak captcha rozwiązywanie znaczników czasu, pseudolosowy kod wyzwania. Gdy strona klienta prześle formularz z kodem odpowiedzi captcha, strona serwera musi zweryfikować ten kod odpowiedzi captcha za pomocą predefiniowanego zestawu reguł, tj. jeśli captcha zostanie rozwiązana w ciągu 5 minut, jeśli adresy IP klienta są takie same i tak dalej. To bardzo ogólny opis działania captcha, każdej implementacji (jak Google ReCaptcha, kilka podstawowych funkcji matematycznych rozwiązywania samodzielnie utworzonych captcha),

NB. Klient (przeglądarka internetowa) ma możliwość wyłączenia wykonywania kodu JavaScript, co oznacza, że proponowane rozwiązania są całkowicie bezużyteczne.

— vchyzhevskyi
źródło

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

Rozwiń fragment

Wymagana jest weryfikacja Captcha.

— Karangiri goswami
źródło

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

Będzie działać zgodnie z oczekiwaniami.

— Papun Sahoo
źródło

-2

Google reCAPTCHA w wersji 2 ASP.Net umożliwia walidację odpowiedzi Captcha po stronie klienta za pomocą funkcji wywołania zwrotnego. W tym przykładzie nowa reCAPTCHA Google zostanie zweryfikowana za pomocą walidatora ASP.Net RequiredField.

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

— Julia
źródło