Configurar “Invisible reCaptcha” en WordPress

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…

 

Insertando plugin “Invisible reCaptcha for WordPress”

1.reCaptcha_v2

 

2.reCaptcha_v2_Ejemplo

 

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”.

3.RegistrarNuevoSitio_reCaptcha

 

Al pulsar en “Register”, aparecerá una “Clave de sitio” y “Clave secreta”.

4.Claves_reCaptcha

 

 

 

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).

5.Invisible_reCaptcha_Configuracion

 

 

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”.

6.reCaptchaPantallaLoginWordpress

 

 

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.

7.LoginWordPress

 

 

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>

8.reCaptchaManualEnFormulario

 

 

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:

9.EnvioFormularioCorrecto

 

Si pulsamos “Actualizar” en el navegador, veremos que reCaptcha detecta que no ha sido enviado de forma segura y nos mostrará el error:

10.EnvioFormularioError

 

 

  • 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:

11.Subscribre2

 

Abrimos el archivo “functions.php” de nuestra plantilla e insertamos el siguiente código:

function add_subscribe2_recaptcha() { ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('#s2email').after('<div class="inv-recaptcha-holder"></div>');
        });
    </script>
<?php
}
add_action( 'wp_footer', 'add_subscribe2_recaptcha' );

12.Subscribre2_Manual

 

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:

13.Subscribre2_FormularioConRecaptcha

 

Finalmente, podemos observar que reCaptcha aparece correctamente en el formulario de suscripción:

14.Subscribre2_FormularioConRecaptchaFinal

 

 

¿Tienes alguna duda o necesitas asesoramiento para instalar tu Invisible reCaptcha? Contacta con Winamic y solicita nuestro servicio de actualización del reCaptcha de tu página web. ¡Estamos a tu disposición!

Configurar “Invisible reCaptcha” en WordPress
Valora este post

Rubén González Platas

Programador web. Ayudo a empresas y emprendedores a crear su web corporativa y canal de venta online. ¿Tienes un proyecto en mente y no sabes cómo llevarlo a cabo? Contacta conmigo y te ayudaré.

Deja un comentario