Aunque todos lo conocemos, seguro que hay algún despistado al que lo de Google reCAPTCHA le suena a chino. En pocas palabras, se trata de un sistema para diferenciar a «humanos» de «robots» a la hora de enviar algún tipo de información mediante un formulario (formularios de contacto, login, etc.)
¿Y cómo lo hace? Pues tiene una parte de sistema automático, utilizando uno de los secretísimos algoritmos de Google, y por otra un sistema en el que las personas tienen que reconocer ciertos textos o marcar aspectos de una imagen que se muestra al usuario.
Al tener esa parte de misterio de la compañía, es imposible saber porqué en ciertas ocasiones le vale el simple «click» y de manera automática te reconoce como «humano» y en otras tienes que hacer las pruebas con fotos y palabras.
En cualquier caso, lo que nos interesa aquí es cómo podemos incluirlo en nuestra web y, de esta manera, proteger nuestros formularios del SPAM y darles un toque extra de seguridad. En esta ocasión vamos a ver cómo hacerlo en PHP, pero es fácilmente replicable a otros lenguajes de programación.
Primer paso: hablemos con Google
Esta es la parte más sencilla: solamente tenemos que ir al siguiente enlace y registrar nuestro sitio web.
En primer lugar nos pedirá una Etiqueta, para ayudarnos a identificar la página donde vamos a integrar el reCAPTCHA.
Después tocará elegir el tipo de reCAPTCHA que vamos a querer utilizar. En mi caso, siempre utilizo el clásico del checkbox y el mensaje «Yo no soy un robot».
A continuación indicaremos el dominio sobre el que aplicaremos este captcha. ¡Atención! No vale trabajar en local, hay que introducir un dominio real.
Después de esto solo nos quedará aceptar las condiciones de uso y darle al botón para continuar.
Añadiendo Google ReCaptcha a tu sitio
Con toda la información rellenada, lo siguiente que tendremos serán una serie de claves y datos que son las que necesitaremos en el código de nuestra página web. Los datos más importantes de esta pantalla son la Clave del sitio y la Clave secreta, así que apúntalo y guárdate esa información que la vamos a necesitar.
Obviamente, todos estos datos son privados y no debes facilitarlos a nadie y/o dejarlos públicos en tu sitio web.
Una vez con estas dos claves, vamos al código de nuestra página.
Lo primero es cargar dentro de la etiqueta (también puede ser al final de la página, pero es recomendable colocarlo aquí) el script que nos da Google para el correcto funcionamiento del reCAPTCHA:
1 |
<script src="https://www.google.com/recaptcha/api.js" async></script> |
Después, tenemos que indicar dónde queremos que aparezca nuestro captcha. Para ello, ponemos el código correspondiente en el lugar que hayamos elegido:
1 |
<div class="g-recaptcha" data-sitekey="AQUÍ-TU-CLAVE-DEL-SITIO"></div> |
Con estos dos pasos, ya deberíamos visualizar el reCAPTCHA en nuestro sitio, pero todavía no estaría funcionando, falta la parte PHP que le haga cumplir con su función.
Integrando Google ReCaptcha en PHP
Llegados al momento del backend, contamos con dos opciones.
Para la primera, empezaremos descargando esta librería e incluyéndola en la página PHP que se encarga de procesar y enviar los datos del formulario:
1 |
require_once("inc/recaptchalib.php"); |
Después solo tendremos que copiar este código en el momento que queramos verificar que el código es correcto y trabajar con la información que recibimos
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$secret = "AQUÍ-LA-CLAVE-SECRETA"; $resp = null; //Validamos la clave secreta $reCaptcha = new ReCaptcha($secret); $resp = $reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); if ($response->success && $resp != NULL) { //Captcha correcto } else { //Captcha incorrecto } |
Básicamente lo que hace este código es validar en primer lugar la clave secreta y después, con la IP del usuario y el valor que llega del Captcha, valida que sea «humano» y no un «robot».
Tenemos también una segunda opción basada en cURL y para la que no hace falta ninguna librería externa. En este caso, el código que utilizaríamos sería:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$google_url = "https://www.google.com/recaptcha/api/siteverify"; $str = $_POST['g-recaptcha-response']; $secret = 'AQUÍ-TU-CLAVE-SECRETA'; $ip = $_SERVER['REMOTE_ADDR']; $url = $google_url."?secret=".$secret."&response=".$str."&remoteip=".$ip; //INICIAMOS cURL $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl, CURLOPT_TIMEOUT, 10); curl_setopt($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16"); $res = curl_exec($curl); curl_close($curl); $resp = json_decode($res, true); //CHEQUEAMOS EL RESULTADO if($resp['success']) { //Captcha correcto } else { //Captcha incorrecto } |
De esta manera, en vez de cargar una librería externa, lo que hacemos es mediante cURL enviar a Google la misma información (IP, clave secreta y valor del captcha) y obtener una respuesta positiva o negativa.
Con esto, ya estaría todo listo. Pasos muy sencillos que ayudarán muchísimo a la seguridad de tu sitio.
Si de todas formas encuentras algún problema durante su integración, siempre te quedará la guía de Google o los comentarios de esta entrada.
Hay un error en la guia, al decodificar las variables de la respuesta del curl. Así es como está en la guía.
$res = curl_exec($curl);
curl_close($curl);
$resp = json_decode($resp, true);
Pero así esta intentand sacar las variables json de $resp, que todavía no está definida. La inclusion correcta sería, así: Sacando las variables de $res donde se han guardado.
$res = curl_exec($curl);
curl_close($curl);
$resp = json_decode($res, true);
El maldito capcha es una cosa que odio, me da la lata, pero al final he acabado ponienodlo por recomendación ejeje
Gracias por explicarme como.
Un saludo
Nosotros tambien hemos puesto el capcha, espero no pisarnos con vosotros.
Un saludo
Muy buen post, me ha ayudado mucho para miweb.
Muchas Gracias