Los Captchas son ese fantástico invento que nos ha ahorrado tantísimos problemas de spam y de seguridad en nuestras páginas webs. Los reconocerás todavía en muchos sitios web por ese mensaje que aparece de “No soy un robot”. Con este captcha, si Google detecta que puedes no ser humano, hace saltar una ventana con una pregunta del tipo ‘selecciona todas las imágenes que contengan carteles’. Te suena, ¿verdad?
Pues hoy en día estamos ante una nueva evolución de este “reCaptcha v.2” de Google. Ya ha llegado a nuestros gestores de contenido el “Invisible reCaptcha”. Y es mucho más sencillo que el antiguo. Mira el siguiente video o sigue leyendo…
Índice de contenidos
Insertando plugin «Invisible reCaptcha for WordPress»
Con el nuevo “Invisible reCaptcha”, nos ahorramos el paso de hacer click sobre el checkbox en el que dice “No soy un robot”. Para el usuario es una experiencia de navegación mucho más cómoda, ya que no tiene que hacer nada. Sólo verá un pequeño cuadrado en un lugar concreto de la página que le asignemos, pero ya no será necesario que haga clic en ningún botón. En realidad es totalmente transparente para el usuario, a no ser que detecte que podríamos ser un robot y en ese caso aparezca la ventana con la pregunta y varias imágenes para seleccionar.
Antes de nada, iremos a https://www.google.com/recaptcha/admin y registraremos un nuevo sitio web para generar las claves que usaremos a continuación.
Para activar en tu sitio web este nuevo “Invisible reCaptcha”, el primer paso es ir ahttps://www.google.com/recaptcha/admin y registrar un nuevo sitio web. Así, se generarán las claves que usaremos en el siguiente paso de la instalación.
Escribimos un nombre de “Etiqueta”, por ejemplo el nombre de nuestra web, y marcamos la opción “Invisible reCAPTCHA”. A continuación, tenemos que escribir el nombre de dominio y marcar la opción “Accept the reCAPTCHA Terms of Service”.
Al pulsar en “Register”, aparecerá una “Clave de sitio” y “Clave secreta”.
El siguiente paso es instalar el plugin. Podemos hacerlo desde la administración de plugins de WordPress o descargarlo desde este enlace: https://wordpress.org/plugins/invisible-recaptcha/.
Una vez instalado el plugin, iremos a Ajustes/Invisible reCaptcha. En esta página, tenemos que copiar la “Clave de sitio” y “Clave secreta” que se han generado en el primer paso del proceso. Deberemos seleccionar también el lenguaje y la posición de la página de navegación donde queremos que se muestre nuestro icono de Invisible reCaptcha a modo informativo. Por defecto, lo pondrá en el lado derecho y bajo de la web (Bottom Right).
Una vez que hemos introducido las claves y decidido dónde irá el botón, es hora de indicar en qué formularios queremos utilizar Invisible reCaptcha. Tenemos varias opciones de página:
- Login
- Registro
- Comentarios
- Recuperación de contraseña
Por ejemplo, si quisiéramos que apareciese en la pantalla de login, iremos a la pestaña “WordPress” y seleccionaremos las opciones “Enable Login Form Protection” y “Enable Forgot Password Form Protection”.
Al acceder al login de WordPress, aparecerá en el lado inferior derecho el icono de reCaptcha. Esto significa que… ¡ya tenemos el sistema funcionando correctamente!
- Recuerda que podemos configurar el plugin para que aparezca a la izquierda o dentro de nuestro formulario, simplemente seleccionándolo en el apartado “Settings” del plugin.
Si lo que quieres es integrar Invisible reCaptcha con formularios de contacto creados con los plugins Contact Form 7 o Gravity Forms, simplemente tienes que ir a la pestaña de configuración “Contact Forms” y seleccionar la opción correspondiente.
Insertando Invisible reCaptcha en formularios personalizados
Es posible que tengamos formularios montados con otros plugins diferentes a “Contact Form 7” o “Gravity”, o incluso que hayamos desarrollado nosotros mismos. El plugin Invisible reCaptcha nos permite usarlo con cualquier tipo de formulario de una forma muy cómoda.
Para entender mejor cómo se podría hacer, vamos a crear un formulario de ejemplo manualmente. Para ello, crearemos una nueva página en wordpress llamada “pagina-ejemplo” y editaremos el archivo “page.php” de nuestra plantilla, insertando el siguiente código dentro de la etiqueta <main>:
if ($_POST['nombre'] && $_POST['apellidos']) {
$is_valid = apply_filters('google_invre_is_valid_request_filter', true);
if( ! $is_valid ) {
echo '<p style="color:red;">Error al enviar el formulario. ¿Robot?</p>';
}
else {
echo '<p style="color:green;">Formulario enviado correctamente.</p>';
}
}
<form name="formularioWordPress" method="post" action="http://localhost/wordpress/pagina-ejemplo">
<p>Nombre</p>
<p><input type="text" name="nombre"></p>
<p>Apellidos</p>
<p><input type="text" name="apellidos"></p>
<p><?php do_action('google_invre_render_widget_action'); ?></p>
<p><input type="submit" value="Enviar"></p>
</form>
Como se puede observar, el formulario no hace prácticamente nada: no envía un e-mail ni almacena ninguna información en la base de datos. Este paso es simplemente un ejemplo práctico para ver las dos instrucciones que se necesitan para que funcione reCaptcha.
Dentro de las etiquetas <form> y </form> debemos escribir la instrucción:
do_action('google_invre_render_widget_action');
La posición que le asignemos en la página es indiferente. Lo importante es que esté dentro de las etiquetas del formulario. Solamente con esta línea, haremos que aparezca el reCaptcha.
Una vez hecho hecho, es el momento de enviar el formulario de prueba. Es necesario comprobar si se ha enviado forma segura por un usuario con las siguientes condiciones:
$is_valid = apply_filters(‘google_invre_is_valid_request_filter’, true);
if( ! $is_valid )
{
// El formulario no ha sido enviado de forma correcta, posible robot.
echo '<p style="color:red;">Error al enviar el formulario. ¿Robot?</p>';
}
else
{
// El formulario ha sido enviado de forma correcta.
echo '<p style="color:green;">Formulario enviado correctamente.</p>';
}
Ahora, al enviar el formulario creado manualmente, nos mostrará que se ha enviado correctamente:
Si pulsamos “Actualizar” en el navegador, veremos que reCaptcha detecta que no ha sido enviado de forma segura y nos mostrará el error:
- Notas:
- Al hacer varias pruebas actualizando la página, es posible que reCaptcha nos muestre el cuadro con la pregunta y las diferentes imágenes. ¡Sólo hay que responderlo!
- No aconsejamos editar el archivo page.php para para crear un formulario manual, simplemente es una forma rápida de mostrar un ejemplo y que se pueda comprender.
Insertando Invisible reCaptcha en otros plugins de formulario
Cuando lo que queremos es insertar Invisible reCaptcha en otro tipo de plugins de formulario de contacto, puede llegar a ser más o menos sencillo. Siempre dependerá del plugin con el que estemos trabajando.
Lo ideal es buscar en los archivos del plugin la instrucción donde se genera el formulario e insertar el código do_action(‘google_invre_render_widget_action’); entre las etiquetas <form> y </form>. Pero es posible que no podamos hacerlo por la complejidad del plugin o porque no queramos que en el futuro se pierdan los cambios al actualizarlo.
Es por este motivo que quería explicaros cómo podemos resolverlo de otra forma con javascript.
Hay una forma de resolver este inconveniente: con javascript. Vamos a ver un ejemplo de inserción del plugin “Invisible reCaptcha” en un formulario creado automáticamente por el plugin “Subscribe2”. Este plugin sirve para captar suscriptores y almacenarlos en la base de datos de WordPress.
Una vez tenemos configurado el plugin Invisible reCaptcha, instalamos el plugin “Subscribe2” y creamos una página en WordPress llamada “suscripción”. En esta página debemos insertar el shortcode de este plugin. Para ello, pulsamos el icono “S2” en el editor de WordPress o simplemente escribimos [subscribe2].
Ahora debemos cargar la página “sin estar logueados” y veremos la caja de suscripción:
Abrimos el archivo “functions.php” de nuestra plantilla e insertamos el siguiente código:
function add_subscribe2_recaptcha() { ?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%20%20%20%20jQuery(document).ready(function(%24)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24('%23s2email').after('%3Cdiv%20class%3D%22inv-recaptcha-holder%22%3E%3C%2Fdiv%3E')%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<?php
}
add_action( 'wp_footer', 'add_subscribe2_recaptcha' );
Como podemos observar, cuando se carga el pie de la página se ejecuta la función “add_subscribe2_recaptcha”. En esta función, lo que hacemos es introducir una capa HTML dentro de nuestro formulario a través de javascript: <div class=”inv-recaptcha-holder”></div>
Es la misma capa HTLM que ha creado la instrucción que habíamos visto anteriormente Digamos que la instrucción que habíamos visto anteriormente
do_action(‘google_invre_render_widget_action’);
La manera de introducirlo dentro de las etiquetas <form> y </form> es con la función de jQuery “after”, con la que le decimos que inserte este código después del elemento con id “s2email”. Esto podemos verlo inspeccionando el código fuente desde el navegador:
Finalmente, podemos observar que reCaptcha aparece correctamente en el formulario de suscripción:
Hola: Buen artículo. 🙂
Yo tengo un WP con varios posts (es la idea 🙂 ) y cada uno de ellos tiene el mismo formulario (y sin ID) para introducir un email, validarlo y tener acceso al resto del contenido de esa entrada.
Aparte, en la misma página, tengo un formulario en el pie y otro en el sidebar lateral. En total 3 formularios.
He conseguido integrar el captchav2 en el formulario del pie pero, claro, he puesto esta instrucción JS en el callback:
document.getElementById(«newsletter»).submit();
Como se aprecia, he puesto el id del formulario de manera explícita pero esta solución no es modular ya que necesitaría pasar un parámetro a esa función callback (que no admite) para pasar el id del formulario que quiero validar y, consecuentemente, ser válido para cualquier formulario.
¿Cómo podría solucionar esta situación? Gracias.
Hola,
Sinceramente, sin ponerme a ello y ver código no te sabría decir.
Siento no poder ayudarte.
Un saludo.
Buenos días,
tengo implementado Invisible reCaptcha con Contact Form 7 y funciona perfectamente.
Pero tengo un problema que no sé como resolverlo.
Tengo una página que recupera de un API un listado de documentos con una url para descargarlos.
Los enlaces se muestran mediante una lista con una etiqueta «» con la url para descargar el documento.
Mi pregunta es, ¿se puede implementar el Invisible reCaptcha en estos enlaces para evitar ataques??
Doc 1
Doc 2
Doc 3
…….
Hola Carlos,
Siento no poder ayudarte, no sé si es posible.
Un saludo.