Utilizar Google reCAPTCHA

En este artículo vamos a aprender cómo utilizar Google reCAPTCHA en nuestro sitio web. Estaremos implementando este tipo de seguridad en un formulario común y corriente en pocos pasos y de manera muy sencilla.

Para poder utilizar Google reCAPTCHA debemos tener una cuenta gmail. Esto es debido a que en el proceso nos pedirá iniciar sesión para poder registrar el dominio sobre el cual implementaremos este tipo de seguridad.

Lo primero que haremos será ingresar al siguiente enlace: Google reCAPTCHA. Una vez ingresemos, encontraremos lo siguiente:

Luego, debemos hacer clic en el botón Get reCAPTCHA que se encuentra en la esquina superior izquierda y es de color azul con letras blancas. Una vez ingresemos a aquél lugar, debemos especificar el dominio sobre el cual estaremos implementando Google reCAPTCHA. Es necesario tener un dominio registrado y no podemos utilizar uno local para este proceso. Cabe destacar que no debemos poner la URL exacta del formulario, basta con poner únicamente el dominio o nombre del sitio donde se encuentra nuestro formulario.

Debemos hacer clic en el botón de “Registro” para guardar el dominio. Cabe notar que debemos escribir en dominio en el cuadro de texto más grande (el segundo).

Luego de que registremos el sitio, la página nos redireccionará a otra sección en donde se encuentran nuestras claves (clave del sitio y clave secreta), las cuales nos servirán para configurar nuestro formulario y realizar la verificación.

Por motivos de seguridad he ocultado ambas claves. No se asusten si las claves son códigos que no pueden ser leídos o son muy largos.

Ahora debemos acceder a nuestro formulario creado. Este formulario debe estar dentro del dominio el cual ya hemos registrado en el primer paso. El formulario que estoy utilizando se ve de la siguiente manera:

1 2 3 4

<form action="" method="POST"> <input type="text" name="prueba"> <input type="submit" value="Enviar" name="submit"> </form>

Como podemos ver, es un formulario muy simple y no tiene mayor complejidad.

En la sección de la cabecera de nuestro formulario debemos agregar el siguiente script javascript, tal como si agregásemos cualquier otro archivo javascript. Esto lo realizaremos incluyendo la siguiente línea:

1	<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Con esto estamos indicando que se utilizará el API de Google reCAPTCHA y tendremos las funciones disponibles en nuestro formulario. Adicionalmente, dentro de nuestro formulario debemos agregar la siguiente etiqueta DIV, la cual se encargará de incluir el reCAPTCHA en nuestra página:

1	<div class="g-recaptcha" data-sitekey="clave-del-sitio"></div>

Debemos reemplazar el texto “clave-del-sitio” que he añadido por la clave de su sitio (es decir, la primera clave mostrada del segundo paso que realizamos. Además, en la misma página del segundo paso podrán encontrar el código de aquél DIV para copiar y pegar si es que desean.

Con estos pasos, ya tenemos agregado el reCAPTCHA. Sin embargo; aún hace falta la verificación del mismo; es decir, que el formulario regrese alguna clase de error si es que no ha pasado aquella validación del captcha. Para lograr este objetivo vamos a trabajar con código PHP en el momento en que procesamos el formulario, es decir, al momento de que el usuario haga clic en el botón “Enviar”. Como hemos podido ver, este formulario se procesará en la misma página (debido a que el “action” está vacío). Por lo cual, el código PHP siguiente debe ser agregado al inicio de nuestra página:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<?php if(isset($_POST["submit"])) {   if(isset($_POST['g-recaptcha-response'])){           $captcha=$_POST['g-recaptcha-response'];         }          $captcha=$_POST['g-recaptcha-response']; if(!$captcha){           echo '<h2>Please check the the captcha form.</h2>';           exit;         }         $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=clave-secreta&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);         if($response.success==false)         {           echo '<h2>You are spammer ! Get out</h2>';         }else         {           echo '<h2>Thanks for posting comment.</h2>';         }    } ?>

Debemos tener en cuenta que en la línea donde se encuentra la variable $response, vamos a observar el texto “secret=clave-secreta”. Este texto “clave-secreta” debe ser reemplazado por nuestra segunda clave que encontramos en el paso número 2.

Con todos estos pasos, ya habremos podido implementar nuestro captcha con la verificación correspondiente. Puede probarlo y en caso obtengan el mensaje “Thanks for posting comment.” significa que habrá funcionado de manera correcta.

El código completo se encuentra a continuación (deben reemplazar las claves del sitio y secreta con las de ustedes para que funcione de manera correcta):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<?php if(isset($_POST["submit"])) { print_r($_REQUEST); echo "<-"; if(isset($_POST['g-recaptcha-response'])){           $captcha=$_POST['g-recaptcha-response'];         }          $captcha=$_POST['g-recaptcha-response']; if(!$captcha){           echo '<h2>Please check the the captcha form.</h2>';           exit;         }         $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=clave-secreta&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);         if($response.success==false)         {           echo '<h2>You are spammer ! Get the @$%K out</h2>';         }else         {           echo '<h2>Thanks for posting comment.</h2>';         }    } ?> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <form action="" method="POST"> <div class="g-recaptcha" data-sitekey="clave-del-sitio"></div> <input type="text" name="prueba"> <input type="submit" value="Enviar" name="submit"> </form>