Saltar al contenido
Codif铆ca.me | Desarrollo web | Programaci贸n

C贸mo poner un Captcha

18 febrero, 2019
captcha

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…

captcha

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.

<script src=’https://www.google.com/recaptcha/api.js’></script>

Y ahora, d贸nde quieres que se muestre el reCapchat tienes que poner lo siguiente:

<div class=”g-recaptcha” data-sitekey=”6LeUhjhkjhkjhkjhkjhkjhuiiyyuyrytrytrty”></div>

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-&gt;verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["captchaResponse"]
    );
}
 
// Validamos que la respuesta es correcta y ejecutamos el resto del c贸digo
if ($response != null &amp;&amp; $response-&gt;success) {
  // si es correcto-&gt; tu codigo
} else {
  // No es correcto
 
}

Y listo, con esto tendr谩s tu flamante reCaptcha en tu web.