¿Cómo integro “No CAPTCHA reCAPTCHA” en mi sitio?

22 Ago

Todos nosotros tuvimos alguna vez la obligación de interpretar esas retorcidas letras para indicar que no somos un robot. Los CAPTCHA son un factor elemental a la hora de filtrar a bots y spammers en tu sitio y en esta nota manual te vamos a contar paso a paso como añadir uno a tu sitio para optimizar su seguridad.

captcha-1

Aun cuando los CAPTCHAs tradicionales “de texto distorsionado” son difíciles de leer para los humanos, la inteligencia artificial moderna tiene menos problemas para resolverlos. ¡Google inclusive usa tecnología parecido para conocer localizaciones en Google® Street View leyendo direcciones!

captcha-2

Los programadores de Google® crearon la preferible solucion de CAPTCHA hasta ahora. El No CAPTCHA reCAPTCHA solicita nada mas que un toque de dedo, un click del ratón, o apuntar el input con tu teclado y presionar la barra espaciadora.

nocaptcha 3

En caso de que los analisis de riesgo de Google® no se aseguren que sos humano, aparecerá una segunda petición.

captcha-4

Podés verlo en acción en cada formulario de nuestra web.

¿Cómo sacar mi CAPTCHA re CAPTCHA?

Paso 1
Primero necesitás una clave de API la cual vas a lograr entrando a https://www.google.com/recaptcha/admin. Para poder entrar a esta pagina es imprescindible estar conectado a una cuenta de Google. También va a ser imprescindible registrar tu website, así que dale un nombre apropiado. Ahora listá los dominios (por ejemplo tudominio.com) donde el reCAPTCHA va a ser usado. Los subdominios (como prueba.tudominio.com) son agregados automáticamente.

captcha-5

Paso 2
Una vez hecho esto Google® te dará una clave de sitio y su clave secreta:

captcha-6

Paso 3
Sumado a esto Google® te da fragmentos de codigo para añadir el reCAPTCHA en tu website. El 1° de JavaScript:

1

También podés definir entre 40 languajes soportados agregando un parámetro al string.

1

Poné este script tag al pie de tu pagina (o solo bajo el formulario donde el reCAPTCHA va a aparecer, dependiendo en como priorices tu carga de archivos).

1
<div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

Paso 4
El próximo es el placeholder que necesitás añadir a la casilla del formulario donde quieras que aparezca el reCAPTCHA:

Nota: el atributo data-sitekey obtendrá el precio de tu clave, no el de este ejemplo.

Hay otros atributos que se pueden añadir para personalizar la apariencia y funcionalidad de tu reCAPTCHA en este punto. Por ejemplo, agregando data-theme=”dark” a este div te dará una version oscura, que puede adaptarse preferible a tu UI:

captcha-7

Para mas fragmentos sobre como configurar tu reCAPTCHA te aconsejamos ingresar a developers.google.com.

Implementación

Una vez que tenemos todo lo imprescindible es hora de ponerse a trabajar.

Paso 1
Vamos a poner nuestra etiqueta de script y un placeholder en un simple formulario:

<!DOCTYPE html>
<html lang="en">
  <head>
<title>How to Integrate Google® “No CAPTCHA reCAPTCHA” on Your Website</title>
  </head>
  <body>
    <form action="" method="post">
      <label for="name">Name:</label>
      <input name="name" required><br />
      <label for="email">Email:</label>
      <input name="email" type="email" required><br />
      <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>
      <input type="submit" value="Submit" />
    </form>
    <!--js-->
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </body>
</html>

En este caso vamos a usar una estructura básica de pagina con un formulario que contenga una entrada name, una entrada email y un boton submit. No hay en ningun estilo porque no es imprescindible para este tutorial.

captcha-8

Para indicar que se ha pasado la prueba reCAPTCHA vamos a tener que ejecutar algunos controles del lado del servidor. En este caso lo vamos a usar PHP, por lo que tenés que guardar este archivo en un nuevo proyecto como index.php.

Paso 2
El procedimiento de este formulario es post, por lo que cuando subamos los documentos del formulario serán devueltos a esta pagina dentro de un array de variables. Podemos exponer esas variables creando un loop por ellas, por lo que tenés que añadir lo próximo en algún lugar de tu página:

1
2
3
4
5
<?php
      foreach ($ _POST as $ key => $ value) {
        echo '<p><strong>' . $ key.':</strong> '.$ value.'</p>';
      }
    ?>

Esto recoge cada par clave/valor presente en vuestro array $ _POST y las imprime en pantalla con un poco de formato. Ahora cuando envías el formulario deberías visualizar algo como lo siguiente:

captcha-9

Se ofrecerá el precio devuelto para name e email, sin embargo además el precio para g-recaptcha-response. Si no pudiste terminar el test CAPTCHA este precio estará en blanco, sin embargo si marcaste la casilla “I’m not a robot” verás una grande cadena de caracteres.

Es este el precio que necesitamos enviar a Google® para que pueda ser verificado, así que hagamos eso ahora.

Paso 3
Felizmente, el dispositivo de programadores de Google® ya hizo el trabajo rigido por nosotros, así que buscá el proyecto ReCAPTCHA en Github y usá una reproducción de la librería recaptchalib.php. Colocala en la raíz de tu proyecto y despues referénciala en la parte superior de tu archivo index.php:

1
2
3
4
5
6
<?php
// sujeta la librería recaptcha
require_once "recaptchalib.php";
?>

Paso 4
Esta librería incluye una colección de características que envían el g-recaptcha-response (junto con tu clave secreta) a Google® a través de una solicitud HTTP. A continuidad ellos recogen la respuesta, comprobando si el CAPTCHA tuvo éxito. Para usar esto tenemos que establecer 1° un par de variables, antes de cerrar la etiqueta PHP:

1
2
3
4
5
6
7
8
// tu clave secreta
$ secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT";
// respuesta vacía
$ response = null;
// verifica la clave secreta
$ reCaptcha = new ReCaptcha($ secret);

ReCaptcha() verifica para visualizar si nuestra clave secreta esta presente. Si no, para el proceso y nos aconseja lograr una. Entonces introducimos nuestros documentos a través de lo siguiente:

1
2
3
4
5
6
7
// si se descubre la respuesta como enviada
if ($ _POST["g-recaptcha-response"]) {
$ response = $ reCaptcha->verifyResponse(
        $ _SERVER["REMOTE_ADDR"],
        $ _POST["g-recaptcha-response"]
    );
}

Paso 5
Suponiendo que todo esta bien con vuestro formulario enviado, la variable $ response informará con “success” y podremos seguir para funcionar los documentos del formulario. Así es como razones verse: elimina la parte donde hicimos loop por los documentos del formulario, añade la próximo verificación encima del formulario:

1
2
3
4
5
<?php
      if ($ response != null && $ response->success) {
        echo "Hi " . $ _POST["name"] . " (" . $ _POST["email"] . "), thanks for submitting the form!";
      } else {
    ?>

Finalmente, agregá una etiqueta de cierre de PHP después del formulario:

1
<?php } ?>

Esto muestra el formulario, a menos que haya sido destinado exitosamente, en cuyo caso muestra una pequeña nota de agradecimiento.

¡Esperamos esta nota manual te haya sido de ayuda!


El blogger de Towebs



Recuerden que todo el contenido de este articulo tanto texto y multimedia pertenece originalmente a la fuente (enlace) que aparece arriba y no a PreciosHosting.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *