Como implementar Google reCaptcha en WordPress

En este artículo, explicaremos como proteger tu sitio web WordPress mediante Google reCaptcha, una herramienta muy efectiva para filtrar tráfico no deseado, evitar problemas de SPAM y para garantizar la autenticidad de los visitantes de tu web.

Además, también te hablaremos de los distintos tipos que reCaptcha que existen, y te indicaremos brevemente cómo funciona cada uno de ellos.

Índice del artículo
  • Qué es reCaptcha y cómo funciona
  •  Tipos de reCaptcha
  • Obtener API KEY de Google reCaptcha
  • Configurar Google reCaptcha en WordPress
  • Configurar Google reCaptcha en WordPress sin plugins

Qué es reCaptcha y cómo funciona


Antes de nada, habría que diferenciar entre lo que es un captcha y lo que es el propio reCaptcha.

Un captcha (Completely Automated Public Turing test to tell Computers and Humans Apart) es un sistema de seguridad (de tipo pregunta/respuesta) que se utiliza en los sitios web y que determina si un usuario es humano o robot. Normalmente se presenta en forma de test, el cual debe de ser resuelto por parte del usuario, y en teoría, solo un humano debería de poder completarlo.

El tipo de test a realizar dependerá de la configuración que tenga implementada la web, por ejemplo, un cálculo matemático, identificar unas imágenes, reproducir un texto específico, etc.

Ejemplo de captcha de cálculo matemático

Ejemplo de captcha de reproducción de texto

Por otro lado, reCaptcha es el nombre que se le dió al servicio de captchas de Google, el cual podemos decir que es una evolución del sistema de captcha tradicional.

Este sistema tiene una mejor adaptabilidad (son menos molestos para el usuario final, ya que se basan en el comportamiento de navegación del visitante), una seguridad mejorada (son más difíciles de burlar por parte de los bots) y una mejor integración con tecnologías modernas. Además, reCaptcha también se utiliza para digitalizar información y optimizar algoritmos de inteligencia artificial.

 Tipos de reCaptcha


La primera versión del servicio reCaptcha se popularizó en 2009, cuando Google compró la empresa que lo gestionaba anteriormente. En esta versión, se le obligaba al usuario a copiar en un campo de texto ciertos caracteres aleatorios y deformados que se mostraban en una imagen.

Posteriormente, en 2012, Google empezó a incluir imágenes obtenidas de Google Street View, de forma que la palabra aleatoria fuese el número o el nombre de una calle en concreto, de esta forma se aseguraban de ir alimentando su base de datos con este tipo de información.

reCaptcha con Google Street View

reCaptcha con texto

Llegado el 2014, Google sacaba a la luz la versión v2 de reCaptcha, en la cual es necesario marcar la casilla de “No soy un robot” que tantas veces habrás visto a lo largo del tiempo.

reCaptcha "No soy un robot"

Cuanto pulsamos este botón, el sistema revisa en segundo plano el comportamiento que ha tenido el usuario antes de realizar esta acción (además de otro tipo de comprobaciones), y en función de los resultados (en base a un algoritmo creado por el propio Google), permite o bloquea el acceso al visitante.

Este algoritmo que te indicamos se basa en multitud de parámetros, configuraciones y comportamientos, por ejemplo, en las cookies activas, en la dirección IP, analiza el movimiento del ratón para ver cómo se comporta el visitante al pulsar la casilla, etc.

En caso de que el comportamiento del usuario sea dudoso para el sistema, le mostrará otro desafío en el que tendrá que escoger entre distintas imágenes o entre algún texto específico.

reCaptcha con imágenes

A finales de 2018, Google presentó la versión v3 de reCaptcha, que es la más reciente actualmente. El objetivo de esta versión es que el usuario no necesite realizar ninguna acción de su lado para verificar que es humano.

Para ello, se introduce un sistema que analiza en segundo plano el comportamiento, los clicks y todas las interacciones de los usuarios en el sitio web, y le asigna una puntuación en base al mismo. La puntuación asignada va desde 0.0 a 1, de mayor a menor riesgo, es decir, que si la puntuación es menor de 0.5, le saltará un puzle al visitante que tendrá que completar si quiere pasar la prueba.

versión v3 de reCaptcha

En la actualidad, las versiones que puedes configurar de Google reCaptcha son las siguientes:

  • reCaptcha v2: requiere pulsar una casilla para verificar que no eres un robot.

  • reCaptcha invisible: es una mezcla entre la versión v2 y la v3, sin llegar a disponer de todas la ventajas y potencias de esta última. Te permite vincular la casilla o click de validación mediante un script a otro botón que escojas de tu web, por lo que desaparecerá el de “Yo soy robot”, aunque seguirá requiriendo una interacción por parte del usuario.

  • reCaptcha v3: no requiere interacción por parte del usuario tal y como indicamos anteriormente, lo único que será visible es un icono que por defecto se muestra en la parte inferior derecha de la página.


Obtener API KEY de Google reCaptcha


Para poder configurar Google reCaptcha, es necesario obtener anteriormente una llave de autorización (API Key a partir de ahora). Para ello, lo primero que tienes que hacer es loguearte con una cuenta de Gmail (lo recomendable es utilizar el mismo email para todos los servicios externos que tengas implementados en la web, por ejemplo, Analytics, GSC, etc, de esta forma, tienes todo unificado en la misma cuenta) y acceder a la siguiente URL: https://www.google.com/recaptcha/about/, específicamente al apartado "v3 Admin Console".

obtener API Key de Google reCaptcha

Una vez dentro, tan solo habría que rellenar los campos correspondientes:

  • Etiqueta: un nombre para poder identificarlo en el futuro.

  • Tipo de reCaptcha: tendrás que elegir el tipo de reCaptcha que quieres utilizar (v3, v2 con desafío o v2 invisible). Una Api Key solo funciona con un único tipo de sitio reCaptcha, es decir, las API Key de la versión v2 no funcionarán con la versión v3.

  • Dominios: tendrás que introducir el dominio en el que quieres vincular las claves. Si realizas un cambio de dominio en tu aplicación, sería necesario configurar nuevas claves para el mismo.


Rellenar campos de Api Key de Google reCaptcha

Cuando rellenes los campos (en nuestro caso hemos escogido la versión v3, ya que es la más reciente y utilizada actualmente), tendrás que darle a enviar y te facilitarán las claves del sitio, las cuales serán necesarias para poder configurar reCaptcha posteriormente.

versión v3 Api Key reCaptcha

Una vez hecho esto y copiadas las claves (puedes verificarlas cuando desees desde el propio panel de control de Google reCaptcha, en el proyecto correspondiente), ya tendrías todo lo necesario para configurar reCaptcha en tu sitio web, nosotros nos centraremos en WordPress, ya que es nuestra especialidad, no obstante, estas claves deberían de ser válidas para cualquier sitio web.

Configurar Google reCaptcha en WordPress


Existen multitud de plugins que permiten implementar reCaptcha en WordPress, no obstante, uno de los más completos actualmente sería "Advanced Google reCAPTCHA", ya que, a día de hoy, permite configurar reCaptcha en la gran mayoría de los formularios y accesos de una web, incluidos los propios de Woocommerce.

Puedes obtener este plugin directamente desde el repositorio de WordPress: https://es.wordpress.org/plugins/advanced-google-recaptcha/,

Plugin de WordPress de Google reCaptcha

En este post, vamos a configurar la versión v3 de reCaptcha como te indicamos anteriormente, no obstante, el proceso es bastante similar con todas sus versiones.

Una vez instalado el plugin, nos dirigiremos a los ajustes del mismo, estos puedes encontrarlos en el apartado "Ajustes" > "Advanced Google reCaptcha".

Cuando estemos dentro, veremos un apartado en el que se muestran las distintas opciones de reCaptcha que puedes implementar en la web:

opciones de reCaptcha que puedes implementar en la web

  • Captcha Disabled: sin ningún captcha habilitado.

  • Built-in Math Captcha: no requiere "Site Key", el visitante tiene que realizar una operación matemática simple.

  • Built-in Icon Captcha: tampoco requiere "Site Key", se basa en resolver una cuestión en base a unos iconos, por ejemplo, indicar cual es el icono que menos veces aparece.

  • Google reCaptcha v2: necesitas obtener y configurar el "Site Key" correspondiente, añade un botón a todos los formularios que hay que clicar para que realice las comprobaciones necesarias.

  • Google reCaptcha v3: es necesario configurar el "Site Key" para utilizarlo, realiza las comprobaciones pertinentes en segundo plano y no requiere interacción por parte del usuario.

  • hCaptcha: para utilizarlo necesitas la versión pro, y la verificación se realiza mediante hCaptcha.

  • Cloudflare Turnstile: para utilizarlo necesitas la versión pro, y la verificación se realiza mediante Cloudflare.


Escogemos la opción que queramos, en nuestro caso la versión v3, para la que tendremos que configurar las claves que hemos obtenido anteriormente en la aplicación de Google reCaptcha (podemos realizar la validación de las mismas desde el botón "Verify Captcha"):

configurar las claves de la aplicación de Google reCaptcha

Le damos a "Guardar cambios" y nos dirigimos ahora al apartado "Donde mostrar", en el que tenemos que escoger en que formularios y accesos de la web quieres que sea funcional el reCaptcha.

escoger en que formularios y accesos de la web funciona reCaptcha

Con esto, ya deberíamos tener configurado reCaptcha v3 en todos los formularios de la web, incluidos el proceso de compra de Woocommerce o el acceso al administrador de WordPress en caso de haberlos escogido (la gran mayoría de los plugins requieren versión de pago para poder integrar reCaptcha en Woocommerce).

configurar reCaptcha v3 en todos los formularios de la web

Otra opción que tendrías si quieres configurar reCaptcha en ciertos apartados o formularios en concreto sería utilizar la integración de la que disponen algunos plugins como pueden ser Elementor, Woocommerce o Contact Form 7.

Por ejemplo, si utilizas Contact Form 7 y quieres configurar un reCaptcha en todos sus formularios, tan solo tienes que dirigirte al apartado "Contacto" > "Integración", desde el que podrás rellenar los campos con las “Site key” correspondientes (en versiones actuales, únicamente permite la versión v3 de Google reCaptcha).

integración de Contact form 7 reCaptcha

Configurar Google reCaptcha en WordPress sin plugins


Si no quieres utilizar un plugin de WordPress para añadir el reCaptcha a tu web, podrías añadir un código al fichero functions.php del tema que utilices. Esta opción es algo más avanzada que la anterior, por lo que no te recomendamos utilizarla si no tienes experiencia en este tipo de configuraciones.

Además, es recomendable configurar antes de nada un tema hijo, para no perder los cambios realizados en el fichero al realizar actualizaciones.

Por otro lado, debes de tener en cuenta que el código a introducir varía dependiendo de dónde quieras configurar el reCaptcha exactamente, y también podría cambiar en versiones posteriores o más antiguas del propio WordPress.

En este caso, te indicamos a continuación el código para configurar reCaptcha v3 en el login de WordPress para que lo tengas como referencia:
/**
* Estas funciones agregan y verifican el reCAPTCHA invisible de Google al iniciar sesión
*/

add_action('login_enqueue_scripts', 'login_recaptcha_script');

function login_recaptcha_script() {
wp_register_script('recaptcha_login', 'https://www.google.com/recaptcha/api.js');

wp_enqueue_script('recaptcha_login');

}

add_action( 'login_form', 'display_recaptcha_on_login' );

function display_recaptcha_on_login() {
echo "
";

}

add_filter('wp_authenticate_user', 'verify_recaptcha_on_login', 10, 2);

function verify_recaptcha_on_login($user, $password) {

if (isset($_POST['g-recaptcha-response'])) {
$response = wp_remote_get( 'https://www.google.com/recaptcha/api/siteverify?secret=YOUR_SECRET_KEY&response=' . $_POST['g-recaptcha-response'] );

$response = json_decode($response['body'], true);

if (true == $response['success']) {

return $user;

} else {

// FIXME: Este se activa si tu contraseña es incorrecta... Comprueba si la contraseña es incorrecta antes de devolver este error...

// return new WP_Error( 'Captcha Invalid', __('ERROR: You are a bot') );

}

} else {

return new WP_Error( 'Captcha Invalid', __('ERROR: You are a bot. If not then enable JavaScript.') );

}

}

Ten en cuenta que tendrías que modificar el texto de “YOUR_PUBLIC_KEY” por tu clave pública y el de “YOUR_SECRET_KEY” por la privada para que sea funcional.

Si lo has configurado bien, ya deberías de tener reCaptcha v3 activo en el login de WordPress.
Andrés Gude
Andrés Gude

Andrés Gude forma parte del departamento de aplicaciones de Raiola Networks. Usuario de un ordenador desde la cuna, apasionado de la F1 y del D10S del fútbol, Leo Messi.

Artículos relacionados

Si te ha gustado este post, aquí tienes otros que pueden ser de tu interés. ¡No dejes de aprender!

Tenemos 21 comentarios en Como implementar Google reCaptcha en WordPress

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Avatar del autor del comentario

Marcos Séculi

09/10/2018 a las 20:14

Buenas Ángel,

Estoy usando WooCommerce y, cuando me olvido un check requerido en el formulario, aparece un error. Este error hace que no pueda enviar el formulario porque el recapcha se queda enganchado (debería actualizarlo). ¿Sabes cómo llamar a una funcion cuando se cargue un error de WooCommerce?

Gracias

Responder
Avatar del autor del comentario

Héctor Luaces

10/10/2018 a las 08:24

Hola, Marcos:

creo que no tengo muy claro lo que preguntas. Por favor, aclárame dos cosas:

- ¿El error que recibes en el formulario que es, de validación?, ¿qué dice el error?
- Cuando hablas de "error de WooCommerce" te refieres a este error de validación u a otros?
- Cuando comentas que "se queda enganchado" a qué te refieres, ¿a que no funciona al hacer clic sobre él?

Un saludo.

Responder
Avatar del autor del comentario

Marcos Séculi

10/10/2018 a las 16:07

Buenas Héctor!

Te comento paso por paso:
1- relleno el formulario
2- me olvido de marcar un check de acepto la política (pero sí marco el captcha)
3- Aparece un div que muestra el mensaje de error (alerta) de Woocommerce diciendo que debo aceptar las condiciones.
4- Las acepto y hago clic en el submit del checkout
5- Vuelve a aparecer un error diciendo que valide el capcha (pero ya está validado).

Por lo tanto, necesito que cuando la función que llama al error se active, también haga un "repatcha:reload();" pero no consigo hacerlo. ¿Se te ocurre cómo?

Gracias!

Responder
Avatar del autor del comentario

Héctor Luaces

11/10/2018 a las 08:23

Hola, Marcos:

gracias por comentar, me hago una idea mejor ahora.

¿Cón qué has hecho el formulario e implementado el recaptcha?, ¿es todo a medida o has usado plugins?, coméntame un poco y lo vemos.

¡Un saludo!

Responder
Avatar del autor del comentario

Marcos Séculi

11/10/2018 a las 10:16

Buenas de nuevo,

Puse un plugin, ahora mismo no recuerdo cual y no tengo acceso al WP. El formulario es el de la plantilla a nivel de estilos, es el que viene por defecto en WooCommerce.
He intentado editar el checkout.js de WooCommerce para añadir esa función pero no funciona.

Gracias!

Responder
Avatar del autor del comentario

Héctor Luaces

15/10/2018 a las 08:26

Hola:

antes de nada, editar archivos de WooCommerce o de WordPress es algo que deberías evitar. Si el día de mañana se actualiza ese fichero perderías los cambios.

Tendrías que empezar por recuperar el acceso a WordPress y, a partir de ahí, vamos viendo qué plugins tienes y que soluciones podemos darte.

Un saludo.

Responder
Avatar del autor del comentario

Marcos Séculi

15/10/2018 a las 08:42

Me sorprende que digas eso Héctor. Existen formas muy seguras de editar los archivos de WP (incluso Woocommerce) sin perder datos con las actualizaciones.
Es una lástima pero no hay plugins que permitan solucionar este error.
Seguiré probando. Creo que este finde di con una solución.

Gracias por todo!

Responder
Avatar del autor del comentario

Héctor Luaces

15/10/2018 a las 10:16

Hola, Marcos:

en mi opinión, es muy práctica editar archivos del núcleo de WordPress o de plugins de terceros. Ya no solo por las actualizaciones que sobreescriban ficheros (que es lo de menos si lo tienes bien documentado y controlado) si no porque cualquier cambio en el entorno puede hacer que tus configuraciones se queden obsoletas (p.ej.: cambios en la API interna de WordPress o de programación en los plugins que uses).

Para controlar esto perfectamente necesitarías tener programados casos de prueba que verifiquen el funcionamiento de esto y, sinceramente, es más costoso y complicado que usar la alternativa real, que explico a continuación.

Para estos casos de uso la solución pasa por extender la funcionalidad utilizando los filtros y acciones de WordPress. Ten en cuenta que el equipo de desarrollo ha invertido muuuucho tiempo y personal en hacer que esto sea así precisamente para garantizar que los programadores pueden crear código que pueda mantenerse sin esfuerzo.

En tu caso no puedo darte medidas concretas porque aún no has podido darme los plugins que usas (por eso te dije que lo primero sería conseguir de nuevo el acceso a WordPress), pero en un vacío, la solución genérica pasa por inyectar una hoja javascript que extienda el código que necesitas, esto es asumiendo que los plugins que uses no ofrezcan interfaces para gestionarlo mejor (cosa que no puedo decirte ahora mismo porque no se los detalles que usas).

Un saludo.

Responder
Avatar del autor del comentario

Victoria Muñoz Gutierrez

14/02/2019 a las 14:13

Hola tengo un problema y es que cuando implemento la opción invisible me sale la imagen de recaptcha en toda la home y no en los formularios, no sé cómo quitarla de ahí ¿Puedes ayudarme?Gracias

Responder
Avatar del autor del comentario

Héctor Luaces

19/02/2019 a las 09:53

Hola, Victoria:

¿estás usando el plugin o lo has metido a mano?

Un saludo.

Responder
Avatar del autor del comentario

Gonzalo Padrón

27/02/2019 a las 20:55

Buenas tardes.

No consigo que me funcione los recaptcha de google, despues de varios intentos, quisiera desintarle la V3, para poner la V2. Hay alguna forma de hacerlo, para ver si la versión V2, me funciona.
Muchas gracias

Responder
Avatar del autor del comentario

Héctor Luaces

11/03/2019 a las 16:40

Hola, Gonzalo:

¿Cómo has configurado el captcha y dónde quieres introducir el V2?

Un saludo.

Responder
Avatar del autor del comentario

Arriaga Diana

26/06/2019 a las 16:14

Muchisimas gracias!!! Tu articulo me ayudo mucho

Responder
Avatar del autor del comentario

Diego Lopez

08/07/2019 a las 23:23

buenas tengo una pagina web en WordPress, pero al cargar la pagina web, esta me muestra una pantalla de verificación de e-captcha. realmente no se que he hecho mal.

Responder
Avatar del autor del comentario

Héctor Luaces

15/07/2019 a las 09:12

Hola, Diego:

¿Cómo has realizado la implementación del captcha?

Un saludo.

Responder
Avatar del autor del comentario

Cindy

27/11/2020 a las 03:14
Hola, muchas gracias por el tutorial, super completo.
Cómo podría instalarlo en español?
Responder
Avatar del autor del comentario

Alvaro Fontela

23/01/2021 a las 22:38
Hola Cindy, los captchas no tienen idioma.
Responder
Avatar del autor del comentario

José Alfredo Miranda esquivel

18/07/2021 a las 03:04
Es bueno esto
Responder
Avatar del autor del comentario

Omar Díaz

30/07/2021 a las 11:22
Muchas gracias José Alfredo ✌
Responder
Avatar del autor del comentario

Eduardo

13/01/2022 a las 18:55
Hola, yo tengo un problema tengo que usar el captcha v3 en un formulario de registro, que a su vez suscribe a mailchimp, la cosa es que por un lado al ponerlo me deja de salir mensaje si un campo no está rellenado o si el usuario ya existe y además el formulario se "envía" aunque no sucede nada excepto que me sale que el formulario se ha enviado correctamente.
Responder
Avatar del autor del comentario

Alvaro Fontela

17/01/2022 a las 13:54
Hola Eduardo, con tan pocos datos no podemos decirte nada concreto, ya que depende de la implementación (plugin de formularios) y de la configuración de este. Si necesitas ayuda profesional para solucionarlo, nuestro departamento de CMS estará a tu disposición: https://raiolanetworks.com/contacto/
Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Vienes desde otro proveedor?

¡Sin problema! Te migramos gratis y sin cortes
Migraciones de hosting gratis