Clicky

Implementación de No Captcha, el nuevo ReCaptcha más fácil de usar

Categoría: Internet (Tutoriales y trucos)
Visitas: 9961
nuevo reCaptcha No Captcha

Goggle ejecutará una serie de controles para ayudar a determinar si el usuario podría ser un bot

ReCaptcha es un filtro anti-spam que verifica si un usuario que está navegando por el sitio es un ser humano o un cobarde robot mirando para publicar planes inútiles y hacerse rico rápidamente publicando enlaces de pastillas que supuestamente aumentan o reducen las áreas del cuerpo, en función de sus objetivos.

Incluso si no conoces el nombre reCaptcha estoy seguro de que has tenido que escribir aluna vez palabras o números (por lo general horriblemente distorsionadas) para completar acciones como el envío de un formulario de contacto o la publicación de comentarios a un artículo en un sitio web. Aunque reCaptcha es ideal para mantener nuestros artículos libres de enlaces maliciosos, a menos que estés escribiendo sobre ellos, puede ser un desafío; a menudo los caracteres o palabras que se requieren para entrar están tan distorsionados que se convierte en un ejercicio de frustración sólo para obtener un comentario publicado. Felizmente, este mes se ha introducido una nueva versión de reCaptcha - no Capcha - que bien puede aliviar nuestro dolor.

Google decidió ayudar a la gente en la web luchando para conseguir más protección contra el spam. Esta nueva versión de reCAPTCHA es una solución mucho mejor y más fácil de usar que en la mayoría de los casos requiere mucho menos esfuerzo. Esencialmente, en lugar de los jeroglíficos casi imposibles de leer que vemos actualmente, Goggle ejecutará una serie de controles para ayudar a determinar si el usuario podría ser un bot (Google no ha comentado los detalles, pero imagino que apuntarán a una serie de comportamientos específicos del usuario) y, si no encuentra nada sospechoso, entonces la parte de seguridad de cualquier proceso de intento de completar estará limitada sólo a hacer clic en una casilla que indica que no eres un robot (por lo que estamos a salvo hasta que los robots se vuelven conscientes de sí mismos).

no soy un robotSin embargo, si el mecanismo anti-lapso se da cuenta de que el usuario es de alguna manera sospechoso, se necesita verificación adicional. Desafortunadamente, esto significa que si tienes cualidades de robot vas a ser bombardeado con los caracteres ilegibles habituales o la imagen correspondiente. Una segunda versión está destinada principalmente para los usuarios de dispositivos móviles, en los que es mucho más fácil elegir una imagen que leer y escribir caracteres (también es posible la verificación de audio sobre la base de salida de sonido para las personas con visión limitada o que confian en un lector).

Implementación básica de reCaptcha No Captcha

Antes de empezar a poner en práctica estas nuevas características CAPTCHA en nuestro propio sitio, debemos asegurarnos de que tenemos conectadas las llaves reCAPTCHA privadas y públicas con el dominio en el que vamos a utilizarlas, de lo contrario no va a funcionar. Podemos conseguir las llaves de forma gratuita en el siguiente sitio web: https://www.google.com/recaptcha.

La cosa más importante que hacer es en realidad mostrar un widget No Captcha:

La forma más sencilla es añadir un enlace con un código JavaScript y agregar una etiqueta div con la clase g-recaptcha y el atributo data-sitekey con nuestra clave pública como un valor. Debe añadirse un enlace a la secuencia de comandos en la sección principal de nuestro sitio web:

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

En temas de WordPress el código podría ser algo como esto:

if(is_page('contact_page_slug')) {
    wp_enqueue_script('re-captcha', 'https://www.google.com/recaptcha/api.js', array('other-scripts'), false, false);
}

Se ha añadido una condición, (is_page (..)), que carga el mencionado script sólo en páginas específicas, tales como la página de nuestro formulario de contacto. El código debería añadirse en los archivos functions.php o header.php (el mismo lugar que otros scripts y css para nuestro tema).

Mientras debe ser colocado en el interior de nuestro formulario un div con la clase g-recaptcha, en el lugar donde queremos mostrar el widget.

<div class="g-recaptcha" data-sitekey="Your public reCaptcha key"></div>

Nuestro widget se debe mostrar ahora correctamente, después tenemos que crear una comprobación para confirmar que un usuario ha completado los campos necesarios para la verificación del usuario en forma de reCAPTCHA. Generalmente tenemos 3 métodos para comprobar si el usuario es un humano. A modo de ejemplo, el siguiente método que utiliza la verificación de parámetros POST durante el proceso de envío de nuestro formulario. A los efectos del ejemplo se ha añadido una variable $validated que se establece en "false" por si alguno de nuestros campos de formulario de contacto no son verificados correctamente. (podemos tener otros métodos de trabajo de verificación, tales como la comprobación de una dirección de correo electrónico correcta, etc...).

if ($_POST["g-recaptcha-response"]) {
$resp = $reCaptcha->verifyResponse(
                $_SERVER["REMOTE_ADDR"],
                $_POST["g-recaptcha-response"]
            );
} else {
            $validated = false;
            $errors['recaptcha'] = __("The reCAPTCHA code is incorrect. Please try again.", 'theme_domain');       
}

El fragmento de código resaltado comprueba el campo g-recaptcha-response, si se pasan los requisitos de verificación el valor de $validated permanecerá como "true" (verdadero - valor inicial) y el formulario puede ser enviado. Si la verificación falla (líneas 7,8), la variable cambia en la pantalla y aparece el texto de error (con la información de que la verificación de código de imagen no es completa y se debe entrar de nuevo).

Cambia el estilo del widget No Captcha

Para un control completo también podemos añadir un atributo data-theme con el valor "dark" en nuestro código para cambiar el esquema de color del widget o el atributo data-type con un valor de "audio" o "image" para seleccionar el método de verificación de preferencia.

<div class="g-recaptcha" data-sitekey="Your public reCaptcha key" data-theme="dark" data-type="audio"></div>

Espero que este tutorial haya sido de ayuda.