Come posso convalidare google reCAPTCHA v2 utilizzando javascript / jQuery?

120

Ho un semplice modulo di contatto in aspx. Voglio convalidare il reCaptcha (lato client) prima di inviare il modulo. Per favore aiuto.

Codice di esempio:

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

Voglio convalidare il captcha al cmdSubmitclic.

Per favore aiuto.

— Mahatma Aladdin
fonte

2

Cosa hai fatto fino ad ora? servono maggiori informazioni, la domanda è troppo vaga.

— Zaki

1

Se non invii una richiesta di post a Google tramite la convalida lato server, potresti anche non includere un captcha. Le convalide lato client suggerite di seguito verranno passate dai bot.

— Virge Assault

Si fa clic su Convalida captcha lato client> fai qualcosa> convalida lato server dati recaptcha> fai qualcosa.

— JPB

2

Guarda il tutorial di esempio qui freakyjolly.com/…

— Code Spy

104

Questa verifica lato client di reCaptcha- quanto segue ha funzionato per me:

se reCaptcha non è convalidato sui grecaptcha.getResponse();ritorni lato client null, altrimenti restituisce un valore diverso da null.

Codice Javascript:

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified

— Palak Tanejaa
fonte

113

Questo non è corretto. Il Captcha NON è stato verificato da JS, devi inviare la risposta, insieme alla chiave del tuo sito e alla chiave segreta, ai server di Google dal tuo codice di back-end per determinare se il Captcha è stato risposto correttamente. Questa risposta è pericolosamente errata.

— Sean Kendle

9

Citazione: quando un reCAPTCHA viene risolto dall'utente finale, un nuovo campo (g-recaptcha-response) verrà popolato in HTML. Developers.google.com/recaptcha/docs/verify

— CoalaWeb

6

Ma non è tutto @CoalaWeb! Preventivo: dopo aver ottenuto il token di risposta, è necessario verificarlo con reCAPTCHA utilizzando la seguente API per assicurarsi che il token sia valido. https://developers.google.com/recaptcha/docs/verify

— Dylan Smith

14

A coloro che dicono che la risposta non è corretta, hai letto la domanda? Sia la domanda che la risposta specificano chiaramente il lato client - l'ovvia intenzione è di controllare che il captcha sia stato effettivamente compilato lato client prima di inviare una richiesta di post al server per un'ulteriore convalida ..

— rococò

4

Puoi solo sapere se l'utente lo ha effettivamente compilato sul lato client. Il valore di "g-recaptcha-response" verrà compilato, ma deve essere inviato a Google affinché possa verificare se la risposta è valida o meno. Ad esempio, con la corrispondenza dell'immagine, puoi fare clic su qualsiasi cosa o niente e fare clic su Invia. Non è corretto, ma il valore di "g-recaptcha-response" è compilato. Puoi usare AJAX per verificarlo, ma assicurati di mantenere la tua chiave segreta nel codice lato server. La risposta breve è che il server deve verificare se è valido, se lo fai con AJAX o con un post completo.

— Sean Kendle

60

Usa questo per convalidare il captcha di Google con un semplice javascript.

Questo codice nel corpo 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" />

Questo codice viene inserito nella sezione principale della chiamata get_action (questo) pulsante del modulo del metodo:

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
fonte

<div class = "g-recaptcha" id = "rcaptcha" style = "margin-left: 90px;" data-sitekey = "my_key"> </div> questo codice appena sopra il tag span nella sezione body

— Pravin Sharma

2

Penso che questa sia la soluzione migliore. In questo modo puoi gestire la convalida della risposta nel gestore di invio del modulo. Questo sembra più logico che cercare di gestirlo con il callback captcha. Immagino che dipenda se convalidi al volo o al momento dell'invio.

— Lampadina 1

4

Dovresti usare ===e !==; nessun motivo per non farlo.

— slikts

28

Questa soluzione è sbagliata. Penso che quando ricevi una risposta, devi inviare il parametro (risposta + secretkey + ClientIp) a Google per la convalida. Dopo la convalida. Google ci restituisce successo o fallimento. nel tuo esempio, non utilizzi il secondo passaggio. puoi spiegarmi: dov'è la tua chiave privata. Quando lo userai?

— Mahmut EFE

3

Mahmut ha ragione, questa risposta è pericolosamente sbagliata e incompleta.

— Sean Kendle

27

Risposta semplificata di Paolo:

Fonte:

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

13

Come molte altre soluzioni sbagliate, qui stai solo ottenendo il token. Non l'hai convalidato finché non lo invii a Google con la tua chiave segreta.

— evolross il

Questo in qualche modo causa problemi nel mio elemento. Webpack non può compilarsi da solo se usiamo il callback dei dati all'interno dell'elemento

— Faris Rayhan

2

Questa dovrebbe essere la risposta accettata in quanto non richiede la sovrascrittura della funzione di rendering. Per quanto riguarda la convalida puramente in JS, dubito che sia possibile in quanto richiederebbe l'inserimento della chiave segreta nel JS e quindi consentire a tutti di metterci le mani sopra.

— Askerman

25

Se esegui il rendering di Recaptcha su una richiamata

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

utilizzando un DIV vuoto come segnaposto

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

quindi è possibile specificare una chiamata di funzione opzionale su una risposta CAPTCHA riuscita

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

La risposta di recaptcha verrà quindi inviata alla funzione "correctCaptcha".

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

Tutto questo proveniva dalle note dell'API di Google:

Note API di Google Recaptcha v2

Non sono sicuro del motivo per cui vorresti farlo. Normalmente invieresti il campo g-recaptcha-response insieme alla tua chiave privata per convalidare in sicurezza il lato server. A meno che tu non voglia disabilitare il pulsante di invio fino a quando il recaptcha non ha avuto successo o qualcosa del genere, nel qual caso dovrebbe funzionare.

Spero che questo ti aiuti.

Paolo

— pphillips001
fonte

1

cancellalo, l'ho capito - parte del tuo codice non è corretto, quindi proporrò una modifica. Saluti!

— Prefisso

@ Prefisso Hai già proposto la modifica? In attesa della tua versione.

— thanks_in_advance

1

La dichiarazione della funzione di callback corretta diCaptcha (all'interno di grecaptcha.render) dovrebbe essere senza virgolette e dovrebbe essere posta prima di onloadCallback.

— Pratul Sanwal

9

Ho usato la soluzione di HarveyEV ma l'ho interpretata male e l'ho fatto con jQuery validate invece del validatore 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
fonte

6

Pensavo che fossero tutti fantastici, ma ho avuto problemi a farli funzionare con javascript e c #. Ecco cosa ho fatto. Spero che aiuti qualcun altro.

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

4

puoi rendere il tuo recaptcha usando il seguente codice

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

Quindi puoi convalidare il tuo recaptcha utilizzando il metodo "IsRecapchaValid ()" come segue.

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

Quindi, in questo modo: return res && res.length non dimenticare la convalida del server.

— Alex Gurskiy

1

Ho usato la soluzione di Palek all'interno di un validatore Bootstrap e funziona. Avrei aggiunto un commento al suo ma non ho il rappresentante;). Versione semplificata:

        $('#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
fonte

1

Link sorgente

Puoi semplicemente controllare sul lato client usando il metodo grecaptcha.getResponse ()

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

— Code Spy
fonte

0

Sfortunatamente, non c'è modo di convalidare il captcha solo sul lato client (browser web), perché la natura stessa del captcha richiede almeno due attori (lati) per completare il processo. Il lato client: chiede a un essere umano di risolvere alcuni enigmi, equitazione matematica, riconoscimento del testo e la risposta viene codificata da un algoritmo insieme ad alcuni metadati come il timestamp di risoluzione captcha, il codice di sfida pseudo-casuale. Una volta che il lato client ha inviato il modulo con un codice di risposta captcha, il lato server deve convalidare questo codice di risposta captcha con un insieme predefinito di regole, ad es. se captcha risolto entro 5 minuti, se gli indirizzi IP del cliente sono gli stessi e così via. Questa è una descrizione molto generale, come funzionano i captcha, ogni singola implementazione (come ReCaptcha di Google, alcune equazioni matematiche di base che risolvono captcha autoprodotti),

NB. Il client (browser web) ha un'opzione per disabilitare l'esecuzione del codice JavaScript, il che significa che le soluzioni proposte sono completamente inutili.

— vchyzhevskyi
fonte

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

Espandi lo snippet

È richiesta la convalida del captcha.

— Karangiri goswami
fonte

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

Funzionerà come previsto.

— Papun Sahoo
fonte

-2

La versione 2 di Google reCAPTCHA ASP.Net consente di convalidare la risposta Captcha sul lato client utilizzando le sue funzioni di callback. In questo esempio , il nuovo reCAPTCHA di Google verrà convalidato utilizzando 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" />

— Julia
fonte