CAPTCHA, Qué es y como implementarlo

Seguramente has visto en páginas ventanas que te solicitan escribir lo que dice en una imagen borrosa, seleccionar partes de una imagen, o “descifrar” que es lo que está escrito, esto con el fin de continuar con procesos de inscripción a alguna plataforma o de obtener acceso a un contenido especifico.

Captcha

Dichas imágenes se denominan Captcha (reCAPTCHA es la evolución hecha por Google, pero el fin es el mismo, actualmente van en la versión 3) y tienen como finalidad diferenciar un ser humano de una computadora, con el fin de evitar usos inapropiados de recursos informáticos (por ejemplo, creación masiva de cuentas de correo electrónico).

Implementación de Códigos CAPTCHA

Como en el mundo de la programación, puedes tomar varios caminos para llegar a una solución; una opción es programando directamente en el lenguaje de tú preferencia, para esto debes tener una pequeña base de datos con imágenes (también generarlas aleatoriamente) y sus interpretaciones en texto, o algo tan simple como implementar una operación matemática como una suma o una resta para que el usuario la resuelva; ten en mente que el objetivo es diferenciar un ser humano de una máquina.

Un segundo método es utilizar los servicios del gigante Google (reCAPTCHA) que actualmente va en la versión 3, para hacer uso de este sistema debes tener cuenta en su plataforma, implementarlo será mucho más sencillo.

Ejemplo Implementación de reCAPTCHA [Google]

Para utilizar esta funcionalidad debes tener una cuenta de Google y entrar a la consola de administración para desarrollos.

Google reCAPTCHA
https://www.google.com/recaptcha/intro/v3.html

Si no te encuentras autenticado te pedirá tus datos de acceso, luego de esto entraremos a la pagina que tendremos que configurar para poder utilizar el reCAPTCHA.
Deberemos suministrar nuestro dominio, la versión de reCAPTCHA a utilizar y aceptar los términos y condiciones.

Configuración Google ReCAPTCHA

Después de aceptar ya tenemos acceso a las llaves que serán necesarias para acceder al API en nuestra página.

Keys ReCAPTCHA

Como ves hay dos llaves, una del lado del usuario y otra para establecer la comunicación entre nuestro servidor y el servicio de reCAPTCHA; dentro del cuerpo de tú pagina debes agregar el llamado al JavaScript de Google y a la clase que contiene la llave suministrada; el código es:

<!--JavaScript-->
<script src='https://www.google.com/recaptcha/api.js'></script>
<!—Llamado a la clase g-recaptcha con nuestra llave--> 
<div class="g-recaptcha" data-sitekey="AQUI VA TU LLAVE"></div>

El código lo debes insertar debajo de los formularios para captura de información, por ejemplo:

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Integración reCAPTCHA Ejemplo</title>
    <!--JavaScript-->
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
 
  <body>    
      <form>
            <label>Nombre:</label>
            <input nombre="nombre" required><br /><br />
            <label>Identificación:</label>
            <input identificacion="identificación" required><br /><br />
      </form>
    <div class="g-recaptcha" data-sitekey="MI LLAVE AQUI"></div>
    <input type ="submit" value="Enviar Formulario"><br /><br /> 
  </body>
</html>

El cual nos resultaría en algo como esto:

Challenge

Validación del reCAPTCHA

Se tiene que validar que la prueba fue exitosa por parte del usuario, el JavaScript de Google genera una cadena de texto codificada, la cual debemos enviar a sus servidores para que nos informe si todo esta correcto o si el usuario fallo en descifrar la imagen.

Para ello vamos a hacer utilizar una librería libre de PHP desarrollada por Google y disponible en GitHub

https://github.com/google/recaptcha/blob/1.0.0/php/recaptchalib.php

Creamos un archivo en nuestro proyecto con el nombre que queramos y la extensión “.php”.

A este archivo agregamos el llamado a la librería que deberemos descargar a nuestro proyecto, el proceso de análisis del resultado puede ser algo como:

<!-- CODIGO PHP-->
    <?php  
        include_once "recaptchalib.php";  
        $llave_secreta = "6LfWHv0UAAAAADa0Acxbe_5BgWwULIACxlwR02pO";
        $respuesta = null;
        $reCaptcha = new reCaptcha($llave_secreta);

        // if submitted check response
        if ($_POST["g-recaptcha-response"]) {
            $respuesta = $reCaptcha->verifyResponse(
                $_SERVER["REMOTE_ADDR"],
                $_POST["g-recaptcha-response"]
            );
        }

        if ($respuesta != null && $respuesta->success) {
            echo "Hola " . $_POST["nombre"] . " (" . $_POST["identificacion"] . "), ¡Creo que eres un humano!";
          } 
          else {
          }
     ?>

Sin embargo, depende el lenguaje que manejes puedes utilizar otra solución, la documentación la encuentras en el siguiente link, donde se exponen otros ejemplos.

https://developers.google.com/recaptcha/docs/v3

CONCLUSION

La implementación de códigos CAPTCHA se vuelve esencial en muchos procesos con el fin de evitar usos indeseados de recursos en nuestra página Web (por ejemplo, control de spam en nuestros foros); hoy en día encontramos hasta páginas dedicadas a descifrar imágenes de este tipo para realizar Spam.

Se pueden implementar soluciones ya existentes como la de Google o realizar un desarrollo propio; la ventaja de este ultimo es que nosotros tendremos control de todo el proceso sin necesidad de terceras partes, su inconveniente es el tiempo de implementación. Al momento de realizar este análisis (May20) también observamos algunos códigos libres en GitHub para realizar esta labor.

Por ejemplo:

https://github.com/mewebstudio/captcha
https://github.com/Gregwar/Captcha

Como ventaja del sistema de Google esta el alto desarrollo en I+D de esta compañía, es un sistema bastante robusto y efectivo.

Share

Deja un comentario

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