¿Cómo utilizar el nuevo reCAPTCHA de Google?

¿Cómo utilizar el nuevo reCAPTCHA de Google?


Los captchas ‘Completely Automated Public Turing test to tell Computers and Humans Apart,’ se utilizan para diferenciar entre humanos y máquinas en los accesos a secciones especiales de las webs o para enviar registros de datos importantes al servidor. Consisten en una serie de pruebas automáticas para diferenciar entre humanos y máquinas. Estos elementos generalmente son imágenes compuestas por textos y/o números distorsionados que tenemos que repetir en un cuadro de texto asicado al captcha.

Google en este sentido nos ofrece el nuevo reCAPTCHA (captcha 2.0) un widget para nuestros sitios web, que consiste en seleccionar imágenes (generalmente 3) que contengan el objeto descrito en el texto o en la imagen situada en la parte superior del captcha.

Formulario reCAPTCHA

Imágenes con reCAPTCHA

La idea es sencilla para ser comprendida por los humanos y muy complicada para ser interpretada por los robots que intenten descifrar el puzzle de imágenes.

Manos a la obra

El reCAPTCHA de Google, tienen que ir asociado a un dominio (o grupo de dominios) desde el que se va a utilizar, por lo que nos obligan a registrar estos dominios en la web oficial de Google. Debido a este requerimiento, si realizamos las pruebas en modo local ‘localhost’ con un servidor de pruebas instalado en nuestro ordenador, las pruebas de validación darán siempre como resultado un error de validación.

reCAPTCHA en modo local



También será necesaria una cuenta de Gmail con la que validarnos a la hora de obtener las claves y enlaces necesarios para integrarlo en nuestra web.

El captcha de Google trabaja con un par de claves para realizar el proceso de validación. La clave pública utilizada en el formulario cliente donde se mostrará el captcha y la clave privada utilizada para la comunicación con los servidores de validación de Google, que trabaja desde el lado del servidor.

Obtener las claves de validación

Para obtener estas claves, nos dirigiremos a la página oficial recaptcha de Google, y pulsaremos sobre el enlace ‘Get reCAPTCHA’.





Web oficial reCAPTCHA
Iniciaremos sesión con nuestra cuenta de Gmail. Si nos reenvía a la página principal, volveremos a pulsar sobre el botón ‘Get reCAPTCHA’.

Nos mostrará un formulario donde tenemos que indicar el sitio web desde el que vamos a utilizar el widget recaptcha.

Los datos que tendremos que indicar serán:

  • Etiqueta: breve descripción del captcha.
  • Dominios: el nombre del dominio o dominios que deseamos registrar.
"Formulario registro dominio"
Cuando finalicemos el registro, nos mostrará una página con los datos necesarios para realizar la integración con nuestra web:
  • Claves: las claves pública y privada necesarias para realizar las validaciones
  • Cliente: el enlace a la API de Google y las propiedades de la etiqueta necesaria para mostrar el widget.
  • Servidor: url de Google para solicitar la verificación y los parámetros que tenemos que enviarle.
Datos del registro del dominio

PROCESOS

Aunque el diseño de los procesos necesarios para realizar la validación y posterior procesamiento de datos del formulario puede ser implementado de varias formas, yo os voy a mostrar un diseño en el que intervienen tres bloques o archivos para su ejecución.

  • Formulario (frmcaptcha.html): es el formulario que mostrará los campos y el reCAPTCHA.
  • Validación (vrfcaptcha.php): script en PHP que recibirá los datos del formulario y comprobará si la validación con el reCAPTCHA ha sido correcta, respondiendo al formulario con un valor true o false dependiendo del resultado de la validación.
  • Proceso de Datos (datos.php): script en PHP que recibirá los datos del formulario si el script de validación nos ha respondido con el valor true.
Procesos para realizar la verificación

Preparar el formulario que contendrá al widget reCAPTCHA

Tenemos que incluir un enlace a la API de Google en nuestra sección ‘HEAD’ como se nos ha mostrado en la página de información del y un enlace a la librería JQUERY que utilizaremos para enviar los datos al script de validación por medio de una llamada en AJAX.

El formulario contiene los campos típicos de cualquier formulario: cuadros de texto, listas, casillas de verificación, etc. y además una etiqueta ‘DIV’ que mostrará el widget reCAPTCHA, cuyas características también nos han mostrado en la página de información del reCAPTCHA.

Vemos como se realizaría la implementación inicial del formulario:

Creamos un formulario con los campos: cliente, teléfono, dirección y población. Los datos serán enviados a un script en PHP de nombre ‘datos.php’, utilizando el método POST.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Pruebas reCAPTCHA</title>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src='https://www.google.com/recaptcha/api.js'></script>
</head>  
<body>
    <form method="post" action="datos.php" id="frmcaptcha">
        <label for="cliente">Cliente</label>
        <input type="text" name="cliente" id="cliente"/>
        <label for="telefono">Teléfono</label>
        <input type="text" name="telefono" id="telefono"/>
        <label for="direccion">Dirección</label>
        <input type="text" name="direccion" id="direccion"/>
        <label for="poblacion">Población</label>
        <input type="text" name="poblacion" id="poblacion"/>
        <div class="g-recaptcha" data-sitekey="*******CLAVE-PUBLICA****************"></div>
        <br/>
        <input type="submit" />
    </form>
<body>
<html>


Comunicación con el script de validación

Como ya hemos comentado, la comunicación con el script de validación la realizaremos por medio de una llamada en AJAX, enviándole los campos del formulario.

Utilizaremos JQUERY para capturar el evento ‘submit’ del formulario y enviar los datos al script de validación.

Junto a los campos del formulario se envía un nuevo campo con id=’g-recaptcha-response’ creado por el widget reCAPTCHA que contiene los parámetros que tendremos que enviar a la url de Google donde se realizará la verificación, para comprobar si la validación ha sido correcta o no.

Cuando recibamos la respuesta, comprobaremos la propiedad success y si es true dejaremos que el evento submit del formulario se ejecute de forma normal enviando los datos al script de procesamiento de datos (excepto el campo ‘g-recaptcha-response’), pero si la respuesta es false, mostraremos mensaje de aviso y cancelaremos el evento submit del formulario.

El código encargado de realizar esta tarea, que incluiremos a continuación del cierre del formulario sería el siguiente:

<div class="g-recaptcha" data-sitekey="*******CLAVE-PUBLICA****************"></div>
  <br/>
  <input type="submit" />
  </form>
  <script>
    $(document).ready(function(e) {
    // Capturamos el evento submit del formulario
    $("#frmcaptcha").submit(function(e) {
        $respuesta=false; // Suponemos por defecto que la validación será erronea
        // Realizamos llamada en AJAX
        $.ajax({
        url:"vrfcaptcha.php",  // script al que le enviamos los datos
        type:"POST",           // método de envío POST
        dataType:"json",       // la respuesta será en formato JSON
        data:$("#frmcaptcha").serialize(), // Datos que se envían (campos del formulario)
        async:false,     // Llamada síncrona para que el código no continúe hasta obtener la respuesta
        success:         // Si se ha podido realizar la comunicación
            function(msg){
               $respuesta=msg.success; // Obtenemos el valor de estado de la validación
               if($respuesta) {        // La validación ha sido correcta
                // Eliminamos del formulario el campo que contiene los parámetros de validación
                $("#g-recaptcha-response","#frmcaptcha").remove();
               } else    {
                  alert('Fallo de validación'); // Mostramos mensaje
               } 
        },
        error:  // En caso de error de comunicación mostraremos mensaje de aviso con el error
            function (xhr, ajaxOptions, thrownError){
                alert('Url: '+this.url+'\n\r’+’Error: '+thrownError);
            }  
        }); // Final de la llamada en AJAX
        // Si la respuesta es true continuará el evento submit, de lo contrario será cancelado
        return $respuesta;
        });
    });
  </script>  
<body>
<html>

Contenido del script de validación

El script de validación se encargará de crear los parámetros de la llamada a la web de validación de Google a partir del contenido del campo ‘g-recaptcha-response’, enviar la solicitud de verificación y devolver la respuesta obtenida.

La respuesta a la solicitud de verificación se obtiene en formato JSON con los siguientes atributos:

  • success: indicador del resultado de la verificación (true/false). Sera el que se consulte desde el formulario.
  • challenge_ts: fecha y hora de la petición
  • hostname: nombre del host desde el que solicito la resolución del reCAPTCHA
  • error-codes: códigos de error cuando se produce un fallo de validación. Sus posibles valores son:
    • missing-input-secret: no se ha indicado el valor de la clave secreta.
    • invalid-input-secret: el valor de la clave secreta no es válido o está mal formado.
    • missing-input-response: el parámetro de respuesta está vacío o no se ha indicado.
    • invalid-input-response: el parámetro de respuesta no es válido o está mal formado.
<?php
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Creamos el enlace para solicitar la verificación con la API de Google.
    $params = array();  // Array donde almacenar los parámetros de la petición
    $params['secret'] = '*******CLAVE-PRIVADA****************'; // Clave privada
    if (!empty($_POST) && isset($_POST['g-recaptcha-response'])) {
    $params['response'] = urlencode($_POST['g-recaptcha-response']);
    }
    $params['remoteip'] = $_SERVER['REMOTE_ADDR'];
    
    // Generar una cadena de consulta codificada estilo URL
    $params_string = http_build_query($params);
    // Creamos la URL para la petición
    $requestURL = 'https://www.google.com/recaptcha/api/siteverify?' . $params_string;
    
    // Inicia sesión cURL
    $curl = curl_init(); 
    // Establece las opciones para la transferencia cURL
    curl_setopt_array($curl, array(
    CURLOPT_RETURNTRANSFER => 1,
    CURLOPT_URL => $requestURL,
    ));
    
    // Enviamos la solicitud y obtenemos la respuesta en formato json
    $response = curl_exec($curl);
    // Cerramos la solicitud para liberar recursos
    curl_close($curl);
    // Devuelve la respuesta en formato JSON
    echo $response;
    }
?>

Contenido del script de procesamiento de datos

En este script simplemente mostraremos el valor de los campos enviados desde el formulario que se han recibido por el método POST.

<?php
  if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  echo '<h1>Datos obtenidos del formulario</h1>';
  echo '<pre>';
  print_r($_POST);
  echo '</pre>';
  }
?>

Se mostrarán los valores de todos los campos excepto el campo ‘g-recaptcha-response’ que se habrá eliminado antes de ser enviados al script de procesamiento.

Ver demostraciónDescargar rarDescargar demo reCAPTCHA 2,0

Comentarios

Publicar un comentario