Comprobar Recaptcha con Ajax usando jQuery

Seguramente muchos uséis en vuestras aplicaciones/páginas web el sistema de captcha de Google, también conocido como «Recaptcha«. Bien, pues hoy vamos a aprender como comprobar si el visitante ha introducido correctamente el captcha sin tener que recargar la pagina, utilizando Ajax através de jQuery.

Lo primero de todo, tenemos que tener una cuenta de Google y darnos de alta en la web de Recaptcha.
Aquí tenemos que dar de alta nuestra página web, esto es para que nos proporcionen las claves necesarias que usa el script.
Ahora nos descargamos la librería PHP desde aquí.

La librería que hemos descargado incluye varios archivos con ejemplos, pero nosotros sólo vamos a utilizar el archivo que contiene la librería, llamado «recaptchalib.php«.

Vamos con el código:

Primero, vamos a crear el archivo «comprobar.php» que es el encargado de comprobar desde el lado servidor si se ha introducido bien el captcha:

require_once('recaptchalib.php');
 $privatekey = "tu clave privada";
 $resp = recaptcha_check_answer ($privatekey,$_SERVER["REMOTE_ADDR"],$_POST["recaptcha_challenge_field"],$_POST["recaptcha_response_field"]);

 if (!$resp->is_valid) {
	//ERROR EN EL CAPTCHA
	echo 0;
 }else{
	//CAPTCHA CORRECTO
	echo 1;
 }

En la variable «$privatekey» tenéis que introducir vuestra clave privada que os han proporcionado al registrar vuestro sitio en la web de Recaptcha.

Ahora vamos a crear nuestro formulario, podeis llamar el archivo como queráis:

Primero incluimos la librería jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Ahora vamos con la función en jQuery que se encarga de comprobar el resultado con Ajax:

<script>
$(function(){
		
	function captcha(){
		var v1 = $("input#recaptcha_challenge_field").val();
		var v2 = $("input#recaptcha_response_field").val();
			
		$.ajax({
			type: "POST",
			url: "comprobar.php",
			data: {
                      	    "recaptcha_challenge_field" : v1, 
                      	    "recaptcha_response_field" : v2
                 	},
			dataType: "text",
			error: function(){
				alert("error petición ajax");
			},
			success: function(data){ 
				alert(data);
			}
		});
		
	}
	
	$("#boton").click(captcha);
		
});
</script>

Expliquemos esto un poco:
Primero obtenemos los valores del Recaptcha introducidos en el formulario:

var v1 = $("input#recaptcha_challenge_field").val();
var v2 = $("input#recaptcha_response_field").val();

Hacemos la petición através de Ajax:

$.ajax({
	type: "POST", //Método a usar
	url: "comprobar.php", //Url del archivo
	data: "recaptcha_challenge_field="+v1+"&recaptcha_response_field="+v2,
        /*data: son los valores que le mandamos a 'comprobar.php' por
        el método POST*/
	dataType: "html", //el tipo de dato que se espera recibir
	error: function(){
		alert("error petición ajax");
        //muestra una alerta si no se realiza la petición
	},
	success: function(data){ 
		alert(data);
        /*devuelve el resultado de la petición en la variable  
        'data' y lo muestra en una alerta*/
	}
});

Se ejecuta la función al hacer click en el botón con ID «boton» del formulario:

$("#boton").click(captcha);

Creamos nuestro formulario:

<form action="enviar_email.php" method="post">
<?php
      //muestra el recaptcha en el formulario
      require_once('recaptchalib.php');
      $publickey = "tu clave publica";
      echo recaptcha_get_html($publickey);
?>
<input type="button" value="aceptar" id="boton"  />
</form>

En la variable «$publickey» va vuestra clave pública.

Aquí el código completo de la página con el formulario:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>https://blog.reaccionestudio.com/</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
	$(function(){
		
		function captcha(){
			var v1 = $("input#recaptcha_challenge_field").val();
			var v2 = $("input#recaptcha_response_field").val();
			
			$.ajax({
				type: "POST",
				url: "comprobar.php",
				data: "recaptcha_challenge_field="+v1+"&recaptcha_response_field="+v2,
				dataType: "html",
				error: function(){
					alert("error petición ajax");
				},
				success: function(data){ 
					alert(data);
				}
			});
			
		}
		
		$("#boton").click(captcha);
		
	});
</script>
</head>

<body>
<form action="enviar_email.php" method="post">
	<?php
      require_once('recaptchalib.php');
      $publickey = "tu clave pública";
      echo recaptcha_get_html($publickey);
    ?>
    <input type="button" value="aceptar" id="boton"  />
</form>
</body>
</html>

Para personalizarlo, yo haría que en el «success:» del método «$.ajax» de jQuery, si la variable «data» es incorrecta me mostrara un mensaje avisando al visitante, y si es correcto, que mande el formulario. Algo como esto:

success: function(data){ 
	if(data == 0){
		$("#msjform").html("El código de seguridad introducido es incorrecto.");
		Recaptcha.reload(); //recarga Recaptcha.
	}else if(data == 1){
		$("#formulario").submit();	
	}
}

Blog Reacción Estudio

Comprobar Recaptcha con Ajax usando jQuery