¿Cómo puedo validar google reCAPTCHA v2 usando javascript / jQuery?

120

Tengo un formulario de contacto simple en aspx. Quiero validar el reCaptcha (del lado del cliente) antes de enviar el formulario. Por favor ayuda.

Código de muestra:

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

Quiero validar el captcha al cmdSubmithacer clic.

Por favor ayuda.

javascript  jquery  asp.net  google-api  recaptcha 
— Mahatma Aladdin
fuente
2
¿que has hecho hasta ahora? Necesito más información, la pregunta es demasiado vaga.
— Zaki
1
Si no está enviando una solicitud de publicación a Google a través de la validación del lado del servidor, es posible que ni siquiera incluya un captcha. Los bots aprobarán las validaciones del lado del cliente sugeridas a continuación.
— Virge Assault
Validar captcha se hace clic en el lado del cliente> hacer algo> validar el lado del servidor de datos de recaptcha> hacer algo.
— JPB
2
Consulte el tutorial de ejemplo de muestra aquí freakyjolly.com/…
— Code Spy

Respuestas:

104

Esta verificación del lado del cliente de reCaptcha- lo siguiente funcionó para mí:

si reCaptcha no se valida en las grecaptcha.getResponse();devoluciones del lado del cliente null, de lo contrario, devuelve un valor distinto de null.

Código Javascript: 

var response = grecaptcha.getResponse();

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

else
    //reCaptch verified
— Palak Tanejaa
fuente
113
Esto es incorrecto. El Captcha NO ha sido verificado por JS, debe enviar la respuesta, junto con la clave de su sitio y la clave secreta, a los servidores de Google desde su código de back-end para determinar si el Captcha se respondió correctamente. Esta respuesta es peligrosamente incorrecta.
— Sean Kendle
9
Cita: Cuando el usuario final resuelve un reCAPTCHA, se completará un nuevo campo (g-recaptcha-response) en HTML. developers.google.com/recaptcha/docs/verify
— CoalaWeb
6
¡Pero eso no es todo @CoalaWeb! Cita: después de obtener el token de respuesta, debe verificarlo con reCAPTCHA utilizando la siguiente API para asegurarse de que el token sea válido. https://developers.google.com/recaptcha/docs/verify
— Dylan Smith
14
Para aquellos que dicen que la respuesta no es correcta, ¿leyeron la pregunta? La pregunta y la respuesta tanto especifique claramente del lado del cliente - la obvia intención es comprobar que el código de imagen fue en realidad llena en el lado del cliente antes de enviar una solicitud POST al servidor para su posterior validación ..
— rococó
4
Solo puede saber si el usuario realmente lo completó en el lado del cliente. El valor de 'g-recaptcha-response' se completará, pero debe enviarse a Google para que verifiquen si la respuesta es válida o no. Por ejemplo, con la imagen que coincide, puede hacer clic en cualquier cosa o nada y hacer clic en enviar. Eso no es correcto, pero el valor de 'g-recaptcha-response' está completo. Puede usar AJAX para verificarlo, pero asegúrese de mantener su clave secreta en el código del lado del servidor. La respuesta corta es que el servidor debe verificar si es válido, ya sea que lo haga con AJAX o con una publicación de formulario completo.
— Sean Kendle
60

Use esto para validar el captcha de google con javascript simple.

Este código en el cuerpo 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" />

Este código se coloca en la sección principal del botón de formulario de método de llamada 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
fuente
<div class = "g-recaptcha" id = "rcaptcha" style = "margin-left: 90px;" data-sitekey = "my_key"> </div> este código justo encima de la etiqueta span en la sección del cuerpo
— Pravin Sharma
2
Creo que esta es la mejor solución. De esta manera, puede manejar la validación de la respuesta en su controlador de envío de formularios. Esto parece más lógico que tratar de manejarlo en la devolución de llamada del captcha. Supongo que depende de si estás validando sobre la marcha o al enviar.
— Bombilla
4
Deberías usar ===y !==; no hay razón para no hacerlo.
— slikts
28
Esta solución es incorrecta. Creo que cuando obtiene una respuesta, debe enviar el parámetro (respuesta + clave secreta + ClientIp) a Google para la validación. Después de la validación. Google nos devuelve el éxito o el fracaso. en su ejemplo, no utiliza el segundo paso. ¿Puedes explicarme? ¿Dónde está tu clave privada? ¿Cuándo lo usarás?
— Mahmut EFE
3
Mahmut tiene razón, esta respuesta es peligrosamente incorrecta e incompleta.
— Sean Kendle
27

La respuesta de Pablo simplificada:

Fuente:

<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
fuente
13
Como muchas de las otras soluciones incorrectas, solo está obteniendo el token aquí. No lo ha validado hasta que lo envía a Google con su clave secreta.
— evolross
Esto de alguna manera causa problemas en mi elemento. Webpack no se puede compilar solo si usamos data-callback dentro del elemento
— Faris Rayhan
2
Esta debería ser la respuesta aceptada, ya que no requiere sobrescribir la función de renderizado. En cuanto a la validación puramente en JS, dudo que sea posible, ya que requeriría colocar la clave secreta en el JS y, por lo tanto, permitir que todos la tengan en sus manos.
— Askerman
25

Si renderiza el Recaptcha en una devolución de llamada

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

usando un DIV vacío como marcador de posición

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

luego puede especificar una llamada de función opcional en una respuesta CAPTCHA exitosa

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

La respuesta recaptcha luego se enviará a la función 'correctCaptcha'.

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

Todo esto fue de las notas de la API de Google:

Notas de la API de Google Recaptcha v2

No estoy seguro de por qué querrías hacer esto. Normalmente, enviaría el campo g-recaptcha-response junto con su clave privada para validar de forma segura el lado del servidor. A menos que desee deshabilitar el botón de envío hasta que la recaptcha haya tenido éxito o algo así, en cuyo caso lo anterior debería funcionar.

Espero que esto ayude.

Pablo

— pphillips001
fuente
1
tacha eso, lo descubrí: parte de tu código es incorrecto, así que propondré una edición. ¡Salud!
— Prefijo
@Prefix ¿Ya propusiste la edición? Esperamos tu versión.
— thanks_in_advance
1
La declaración de función de devolución de llamada correctCaptcha (dentro de grecaptcha.render) debe estar sin comillas y debe colocarse antes de onloadCallback.
— Pratul Sanwal
9

Usé la solución de HarveyEV pero la leí mal y lo hice con jQuery validate en lugar del validador 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
fuente
6

Pensé que todos eran geniales, pero tuve problemas para que funcionaran con javascript y c #. Aquí esta lo que hice. Espero que ayude a alguien más.

//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
fuente
4

puedes renderizar tu recaptcha usando el siguiente código

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

Luego puede validar su recaptcha usando el método "IsRecapchaValid ()" de la siguiente manera.

 <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
fuente
Entonces, así: return res && res.length no te olvides de la validación del servidor.
— Alex Gurskiy
1

Usé la solución de Palek dentro de un validador Bootstrap y funciona. Hubiera agregado un comentario al suyo pero no tengo el representante;). Versión simplificada:

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

Enlace de origen

ingrese la descripción de la imagen aquí

Simplemente puede verificar en el lado del cliente usando el método grecaptcha.getResponse ()

          var rcres = grecaptcha.getResponse();
          if(rcres.length){
            grecaptcha.reset();
            showHideMsg("Form Submitted!","success");
          }else{
            showHideMsg("Please verify reCAPTCHA","error");
          }
— Código espía
fuente
0

Desafortunadamente, no hay forma de validar el captcha solo en el lado del cliente (navegador web), porque la naturaleza del captcha en sí requiere al menos dos actores (lados) para completar el proceso. El lado del cliente: le pide a un humano que resuelva algunos acertijos, equitación matemática, reconocimiento de texto, y la respuesta está codificada por un algoritmo junto con algunos metadatos como captcha resolviendo marca de tiempo, código de desafío pseudoaleatorio. Una vez que el lado del cliente envía el formulario con un código de respuesta captcha, el lado del servidor necesita validar este código de respuesta captcha con un conjunto predefinido de reglas, es decir. si captcha se resuelve dentro de un período de 5 minutos, si las direcciones IP del cliente son las mismas, etc. Esta es una descripción muy general, cómo funcionan los captchas, cada implementación (como ReCaptcha de Google, alguna equitación matemática básica que resuelve captchas hechos por uno mismo),

NÓTESE BIEN. El cliente (navegador web) tiene una opción para deshabilitar la ejecución de código JavaScript, lo que significa que las soluciones propuestas son completamente inútiles.

— vchyzhevskyi
fuente
-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>
Expandir fragmento

Se requiere la validación de Captcha.

— Karangiri goswami
fuente
-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>

Funcionará como se esperaba.

— Papun Sahoo
fuente
-2

El ASP.Net de Google reCAPTCHA versión 2 permite validar la respuesta de Captcha en el lado del cliente utilizando sus funciones de devolución de llamada. En este ejemplo , el nuevo reCAPTCHA de Google se validará mediante 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
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.