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