En este post vamos a ver como insertar un Captcha en tu web, si ya te has decidido a incorporar un sistema de validación de usuarios de este tipo vamos a mostrarte como lo puedes instalar en tu web. Son suficientemente incómodos para la mayor parte de los usuarios, dejando aparte a las personas con poca visibilidad o bien cualquiera que dependa de tecnologías de apoyo para acceder a la página web, como lectores de pantalla.
Ahora bien, por otro lado, para combatir las toneladas de SPAM que puede llegar a tener tu página web son completamente vitales en la lucha contra los robots.
Es curisoso que muchas veces nos muestren Capchas en alguna web y nos cueste un montón descifrar el Captcha con seguridad, de hecho es bastante frecuente fallar el captcha sintiendote un poco más robot cada día. 😉
Sin embargo muchos de los bots son capaces de leer estos Captcha, es cierto que no todos los Captcha los leen bien pero muchos de los captcha que encontramos a día de hoy son totalmente vulnerables a robots, tenéis cientos de compañias que se dedican a resolver Captchas con precios irrisorios por cada 1000 captchas, como por ejemplo Killer by Captcha o Dead Captcha, esta última la he utilizado en algún software y el precio que tiene es de 1000 Captchas por 1,4 Dólares.
Vamos a la parte más técnica…
Cómo poner reCaptcha en tu web
Darte de alta en el servicio de reCaptcha de Google
En esta entrada vamos a instalar uno de los Captcha que menos gusta a los bots, que es sin duda alguna uno de los mejores, hablamos del captcha gratuito que ofrece Google para cualquier usuario. Solo tienes que tener una cuenta de gmail y logearte en su servicio, lo puedes hacer desde aquí Google Captcha.
Una vez que estás en la página tienes que inscribir la web o las websites en las que quieres utilizar el servicio reCapcha de Google. Solo necesitas poner los nombres de los dominios.
Poner el código que se mostrará en tu web
Una vez que inscribas la web te mostrará las claves del API y la clave secreta.
A continuación te dejo una imagen en la que puedes ver las claves y el código que necesitas para incluir reCAPTCHA en tu website.
Tienes que incluir esta librería en tu web.
Y ahora, dónde quieres que se muestre el reCapchat tienes que poner lo siguiente:
Esto cargará el reCaptcha en el sitio de tu web que lo hayas puesto.
Enviar los datos al servidor
En esta parte vamos a enviar los datos del reCaptcha a tu servidor que se encargará de validar esos datos.
Obtenemos la respuesta y se la enviamos al servidor.
Esto sería para hacerlo con jQuery y Ajax, pero puedes hacerlo en un simpre form que contenga el campo del div g-recaptcha
jQuery.post("ejecutar.php", //Required URL of the page on server { // Data Sending With Request To Server captchaResponse: jQuery("#g-recaptcha-response").val() }, |
Verificando los datos en el servidor
Ya solo nos queda verificar el captcha antes de permitir ejecutar el resto del código, para ello vamos a utilizar la libreria recaptchalib que te la puedes bajar desde github
Para facilitarte el trabajo sube la librería recapchalib que encargará de la parte del servidor.
Y este sería el código Php que se encargará de validar los datos y dar por bueno que no eres un robot.
//la libreria que has subido desde github include_once('recaptchalib.php'); // La clave secreta $secret = "6LeUCwcrttetyfhjg8768oijlkjuy576"; // Inicializamos $response = null; // Comprobamos $reCaptcha = new ReCaptcha($secret); // Obtenemos los datos que hemos envíado en el post. if ($_POST["captchaResponse"]) { $response = $reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["captchaResponse"] ); } // Validamos que la respuesta es correcta y ejecutamos el resto del código if ($response != null && $response->success) { // si es correcto-> tu codigo } else { // No es correcto } |
Y listo, con esto tendrás tu flamante reCaptcha en tu web.