validar example javascript jquery asp.net google-api recaptcha

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



recaptcha example javascript (12)

La respuesta simplificada de Pablo:

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

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 en cmdSubmit click.

Por favor ayuda.


La versión 2 de Google reCAPTCHA ASP.Net 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á con 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" />


Pensé que todos ellos eran geniales, pero tuve problemas para que funcionen 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"/>


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

entonces 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 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 el recaptcha haya sido exitoso o similar, en cuyo caso lo anterior debería funcionar.

Espero que esto ayude.

Pablo


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


Use esto para validar 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 de cabecera en el botón de formulario de método 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; } }


Utilicé la solución de HarveyEV pero la leí mal y lo hice con jQuery validate en lugar de Bootstrap validator.

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


Verificación del cliente de reCaptcha: lo siguiente funcionó para mí:

"grecaptcha.getResponse ();" devuelve un valor nulo si reCaptcha no está validado en el lado del cliente; de ​​lo contrario, devuelve un valor distinto de nulo.

Código Javascript:

var response = grecaptcha.getResponse(); if(response.length == 0) //reCaptcha not verified else //reCaptch verified


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


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>

Se requiere validación de Captcha.


freakyjolly.com/…

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

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


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