Atrás quedaron ya aquellos CAPTCHA bajo los formularios en que no entendíamos lo que ponía y debíamos copiar o mejor aún, los que se empeñaban en enseñarte semáforos y autobuses.
Por cierto, señores que hacen las webs de la administración, por favor, entren en este siglo y dejen de lado los puñeteros CAPTCHA visuales que son un peñazo.
Como si fuese a haber un bot con ganas de hacer trámites con la administración de este país…
En fin, que me voy del tema, hoy te explico en qué consiste el reCAPTCHA v3 y cómo instalarlo en tu web.
¿Que es Google reCAPTCHA?
ReCAPTCHA es el sistema utilizado por Google para detectar tráfico generado por Bots.
Lo utilizamos en los formularios de contacto /comentarios para evitar que bots te llenen tu página de SPAM.
Su versión actual, permite utilizar un reCAPTCHA invisible, tan sólo identificable porque introduce en la página el logo, pero tranquilo, que por código podemos hacer que incluso eso sea invisible y no tener el icono feote de las tres flechas…
¿Cómo configurar Google reCAPTCHA?
Configurar Google reCAPTCHA es muy fácil, aunque te advierto, que algo de código vas a tener que tocar.
Tranquilo, es fácil, tan solo has de obtener unas claves que te da Google y después introducir el código de reCAPTCHA en tu web.
¿Te animas?
Obtener las claves API
Primero tendremos que registrar nuestro dominio en Google, para eso iremos a: https://www.google.com/recaptcha/admin/create
Ahí si tienes una sesión abierta con tu usuario de Google, tomará ese usuario por defecto, si tienes varios usuarios, asegúrate de loguearte con el que te interese registrar el dominio.
Te mostrará un formulario muy básico donde tendrás que poner un nombre de etiqueta (el nombre de tu web, mismamente)
Eliges el tipo de reCAPTCHA
Por dios, elige el v3, si no tus usuarios tendrán un bonito reto que completar (véanse los ‘selecciona todos los pasos de cebra…’) de verdad, qué manía le tengo a ese captcha…
Después pones el dominio de tu web, puedes poner varias, que funcionarán con la misma clave API, ahí tu mismo.
Aceptas las condiciones de servicio, et voilà!
Te dará dos códigos que has de copiar, una clave de sitio web y una cable secreta.
Bien, ya hemos terminado en la página de Google, volvemos a nuestra web.
Introducir código reCAPTCHA en tu web
reCAPTCHA + Contact Forms 7
Si utilizas Contact Forms 7 lo tienes super fácil, tan sólo tendrás que ir en el menú de tu wordpress a Contacto y hacer clic en Integración, te pedirá los dos códigos de Recaptcha y ya lo tienes integrado.
Introducir reCAPTCHA vía código
Vamos a la cabecera de nuestra web y entre las etiquetas <head></head> copiamos este código, sustituyendo donde te he puesto CLAVE-DE-SITIO-WEB por la clave que te ha dado en ese apartado (la primera, vaya)
<script src='https://www.google.com/recaptcha/api.js?render=CLAVE-DE-SITIO-WEB'>
</script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('CLAVE-DE-SITIO-WEB', {action: 'formulario'})
.then(function(token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});});
</script>Hecho esto, añadimos el campo (que quedará oculto) al formulario escribiendo:
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">Validamos el formulario
Ahora sólo falta comprobar que efectivamente funciona, para ello ve a tu archivo functions.php y copia este código, sustituyendo CLAVE-SECRETA por la clave secreta que te ha dado Google.
if (isset($_POST['action']) && ($_POST['action'] == 'process')) {
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'CLAVE-SECRETA';
$recaptcha_response = $_POST['recaptcha_response'];
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
if($recaptcha->score >= 0.7){
// código para procesar los campos y enviar el form
} else {
// código para lanzar aviso de error en el envío
}
}Por lo que he visto por ahí, hay servidores que no se llevan bien con ese código, si es tu caso prueba con este otro
$recaptcha_secret = 'CLAVE-SECRETA';
$recaptcha_response = $_POST['recaptcha_response'];
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = array( 'secret' => $recaptcha_secret, 'response' => $recaptcha_response, 'remoteip' => $_SERVER['REMOTE_ADDR'] );
$curlConfig = array( CURLOPT_URL => $url, CURLOPT_POST => true, CURLOPT_RETURNTRANSFER => true, CURLOPT_POSTFIELDS => $data );
$ch = curl_init();
curl_setopt_array($ch, $curlConfig);
$response = curl_exec($ch);
curl_close($ch);
$jsonResponse = json_decode($response);
if ($jsonResponse->success === true) {
// Código para procesar el formulario
} else {
// Código para aviso de error
}Pero… ¿y esto no se puede hacer sin tocar código?
Of course, my friend, pero siempre es divertido un poco de programación antes del desayuno 😉
Instalar plugin reCaptcha
La tercera opción pasa por instalar un plugin.
Si, hay plugins para todo.
No obstante, asegúrate primero que tu theme no lo tenga integrado, porque Divi (link afiliado), por ejemplo lo tiene integrado en sus formularios de contacto y sólo has de activarlo.
En este caso te recomiento reCaptcha de BestWebSoft tiene buenas valoraciones, un montón de instalaciones y lo mantienen actualizado ¿Qué más podemos pedir?
Cómo ocultar el icono de reCaptcha
Seamos sinceros, el icono de reCAPTCHA no es el más bonito del mundo, pero con unas líneas en el style.css de tu web puedes ocultarlo.
Tan sólo tienes que añadir estas líneas:
/* Ocultar icono de reCaptcha v3 */
.grecaptcha-badge{
visibility: collapse !important;
}Eso sí, como estás utilizando un sistema que está comprobado el comportamiento de tus usuarios para decidir si son humanos o no, tienes que avisar que lo estás utilizando.
Para eso, añade esta línea en tus formularios (en la misma zona donde tienes la capa informativa que obligaba el RGPD)
<small>Este sitio está protegido por reCAPTCHA y se aplican la <a href="https://policies.google.com/privacy">política de privacidad</a> y <a href="https://policies.google.com/terms">términos del servicio</a> de Google.</small>
Hola, Esther.
Hace un mes, instalé reCaptcha a través del menú «integración» del plugin Contact Form 7. Me sorprendió que afectase a todas las páginas de mi web y no sólo a las páginas en las que había formularios creados con CF7.
Esto no debería ser un problema. El problema era que se trataba de la edición anterior de reCaptcha. Cualquier persona que llegase a mi blog, tendría que resolver un captcha horrible con chimeneas, semáforos, escaleras y bocas de incendio. Así que lo desactivé.
Después de leer tu último artículo, Esther, he vuelto a activar reCaptcha. Pero es la versión 3, el «captcha invisible». Esta vez, parece que todo va bien. 😉
Un saludo.
Hola Rafa! Sip, a mi me ha sorprendido gratamente, yo hasta ahora no utilizo ningún captcha aquí, pero lo instalé en una página que estoy diseñando y me pareció muy práctico. 🙂