Cómo agregar CAPTCHA al inicio de sesión de WooCommerce

¿Quieres añadir una capa de seguridad extra a tu tienda online? Has venido al lugar correcto. En este artículo, le mostraremos diferentes métodos para agregar CAPTCHA al inicio de sesión de WooCommerce y configurarlo de la manera correcta.

¿Qué es CAPTCHA?

CAPTCHA (Prueba de Turing pública completamente automatizada para diferenciar a las computadoras y los humanos) es una técnica moderna que se utiliza para agregar la verificación del usuario a cualquier sitio web o aplicación móvil. En otras palabras, los CAPTCHA se utilizan para distinguir a los humanos reales de los bots para que su sitio sea más seguro. El CAPTCHA crea desafíos simples y los muestra en la interfaz, y el usuario debe resolverlos para acceder al sitio. Dado que los bots no pueden resolver el CAPTCHA, puede filtrar el tráfico no deseado y evitar que los bots ingresen a su sitio web.

Entonces, si desea mantener los bots alejados de su inicio de sesión, registro y otras páginas importantes, agregar CAPTCHA es una buena opción.

Los proveedores de CDN como Cloudflare también han incluido esta tecnología y le permite agregar una capa de seguridad a su sitio web.

Tipos de CAPTCHA

Ahora echemos un vistazo a los diferentes tipos de CAPTCHA y cómo funcionan.

1) Texto CAPTCHA

Para acceder a una página específica o realizar una tarea como enviar un formulario, los visitantes deben ingresar el texto que se muestra en la imagen en un cuadro de envío. Si ingresan el texto correctamente, serán redirigidos a la página siguiente. Pero si el texto no es exacto, el sistema generará automáticamente otro CAPTCHA de texto que los usuarios deberán ingresar.

2) Imagen CAPTCHA

El es el tipo de CAPTCHA más común y ampliamente utilizado. Los usuarios deben elegir los cuadros de imagen correctos según los requisitos para verificar que no son un robot. Si la imagen o las instrucciones no son claras, los visitantes pueden omitir el CAPTCHA y obtener uno nuevo.

3) CAPTCHA de audio

Cuando usa CAPTCHA de audio, los visitantes de su sitio web deben escuchar un archivo de audio específico e ingresar las palabras/números que escuchan en un cuadro de envío. Esto es más seguro que el CAPTCHA de imagen o texto, pero no es tan común como los otros tipos.

4) Matemáticas CAPTCHA

Este es probablemente uno de los tipos de CAPTCHA más desafiantes de esta lista. Cuando configura CAPTCHA matemático en su sitio, los usuarios deben resolver un cálculo para acceder a una página específica o realizar una determinada acción. La mayoría de las veces, los cálculos son fáciles, pero los visitantes también pueden actualizar el CAPTCHA para obtener uno nuevo.

¿Por qué agregar Captcha al inicio de sesión en WooCommerce?

Si desea proteger su tienda de registros de spam y bots, debe agregar CAPTCHA a su inicio de sesión de WooCommerce. Las páginas de inicio de sesión y los formularios de contacto son algunas de las páginas a las que más se dirigen los piratas informáticos. Es por eso que no se recomienda usar el formulario de inicio de sesión predeterminado de WordPress.

Como puede ver, no hay capas de seguridad adicionales allí. Al usar las credenciales de cuenta adecuadas, cualquiera puede acceder a la cuenta. Los piratas informáticos utilizan un software que prueba diferentes combinaciones de nombre de usuario y contraseña hasta que encuentran la combinación correcta. Ya hemos visto cómo personalizar la página de inicio de sesión de WordPress para evitar esto, pero también debe agregar otra capa de seguridad.

Agregar CAPTCHA a la página de inicio de sesión de WooCommerce es una excelente manera de hacer que su sitio sea más seguro y proteger sus sitios web de los piratas informáticos. Los piratas informáticos a menudo usan software para forzar la página de inicio de sesión y acceder a los sitios. Sin embargo, si agrega un cuadro de verificación de CAPTCHA a la página de inicio de sesión, el software no podrá completar la operación.

Después de agregar CAPTCHA, su formulario de inicio de sesión se verá así:

Incluso si el usuario ha ingresado las credenciales de inicio de sesión correctas, debe resolver el CAPTCHA antes de iniciar sesión en el panel de la cuenta.

Ahora que sabe por qué necesita agregar CAPTCHA al inicio de sesión de WooCommerce, aprendamos cómo hacerlo y evitar el spam.

Cómo agregar CAPTCHA al inicio de sesión de WooCommerce

Hay dos formas de agregar CAPTCHA a WooCommerce:

1. Uso de complementos
2. Programáticamente

Echemos un vistazo a cada método, para que pueda elegir el mejor para usted.

1) Agregue CAPTCHA usando complementos

Hay varios complementos que puede usar para agregar CAPTCHA a su sitio. En esta sección, nos centraremos en dos herramientas:

• reCaptcha por BestWebSoft
• noCAPTCHA y reCAPTCHA avanzados

1.1) reCaptcha de BestWebSoft

reCaptcha de BestWebSoft es uno de los complementos CAPTCHA gratuitos más populares disponibles en el mercado. Veamos cómo configurarlo.

1.1.1) Instalación y Activación

Primero, inicie sesión en su sitio web de WordPress y vaya a Complementos > Agregar nuevo . Luego, busque el reCaptcha de BestWebSoft, presione Instalar ahora y actívelo.

1.1.2) Configuración

Una vez que haya activado el complemento, vaya a la consola de administración de Google reCAPTCHA y complete el registro. Para registrarse en un nuevo sitio web, debe ingresar:

• Etiqueta
• tipo reCAPTCHA
• Dominios
• Propietarios

Después de completar la información requerida, envíe el formulario.

En nuestro caso, hemos seleccionado el reCAPTCHA v2, que es el tipo de reCAPTCHA más simple disponible en la lista.

Hay 3 opciones que puede seleccionar. Recomendamos seleccionar la casilla de verificación No soy un robot, que es la validación más común.

Una vez que haya enviado el formulario, la plataforma mostrará dos claves en la pantalla: la clave del sitio y la clave secreta.

Cópielos y guárdelos en algún lugar a mano, ya que los usará en un minuto.

Ahora regrese a su tablero de WordPress y vaya a la configuración de reCAPTCHA .

Pegue las claves y antes de presionar el botón de enviar, asegúrese de haber seleccionado la misma versión que eligió antes.

Luego, desplácese hasta la parte inferior de la página y verá algunas páginas predeterminadas de WordPress. Seleccione las páginas a las que desea agregar CAPTCHA. Para esta demostración, vamos a seleccionar la página de inicio de sesión, pero también puede seleccionar más páginas. También puede ocultar CAPTCHA para ciertos roles de usuario.

Después de eso, guarde la configuración y ¡listo!

1.3) Pruebas

Para verificar que todo funciona correctamente, vaya a su página de inicio de sesión usando una ventana de incógnito y verá un cuadro de CAPTCHA debajo del campo de contraseña.

Si no puede ver una casilla de verificación en la parte delantera, es porque ingresó las claves incorrectas o seleccionó el tipo de reCAPTCHA incorrecto. Regrese a la configuración y vuelva a verificar las opciones del complemento.

Así es como puede agregar CAPTCHA a la página de inicio de sesión predeterminada de WordPress. Si está utilizando la página de inicio de sesión predeterminada de WordPress como página de inicio de sesión de WooCommerce, esta es una excelente opción. Sin embargo, si está utilizando una página dedicada generada por WooCommerce, debe usar la versión premium de este complemento.

Actualmente, la versión gratuita de reCAPTCHA no viene con la integración de WooCommerce. La versión premium, sin embargo, desbloqueará integraciones más potentes y funcionalidades más avanzadas por 21 USD al año.

Después de comprarlo, debe verificar la clave de licencia y luego agregar las opciones de reCAPTCHA a los campos de inicio de sesión, registro o restablecimiento de contraseña de WooCommerce.

Si desea agregar un campo CAPTCHA a la página de inicio de sesión de WooCommerce sin pagar nada, tenemos otro complemento para usted.

1.2) noCAPTCHA y reCAPTCHA avanzados (V2 y V3)

Advanced noCAPTCHA & reCAPTCHA es un excelente complemento gratuito para agregar fácilmente CAPTCHA a su sitio. Veamos cómo configurarlo para proteger su sitio.

1.2.1) Instalación y Activación

Como de costumbre, lo primero que debe hacer es instalar y activar el complemento en su sitio web. Vaya a Complementos > Agregar nuevo, busque el complemento e instálelo.

Después de activar la herramienta, verá la configuración del complemento en la sección Configuración .

1.2.2) Configuración

La configuración de esta herramienta es mínima. Vaya a la consola de administración de Google reCAPTCHA y complete el registro. Recuerda seleccionar el tipo de CAPTCHA que deseas y copiar la clave del sitio y la clave secreta.

Luego, seleccione el tipo reCAPTCHA y pegue la clave de su sitio y la clave secreta en los campos correspondientes.

Después de eso, elija los formularios que desea proteger con reCAPTCHA. En este caso, seleccionaremos nuestro formulario de inicio de sesión y registro. Después de eso, guarde los cambios.

1.2.3) Pruebas

Después de eso, es hora de revisar su página de inicio de sesión de WooCommerce. Abra la página de inicio de sesión en una ventana de incógnito y debería ver un cuadro reCAPTCHA allí.

¡Eso es! Así es como puede agregar fácilmente un campo CAPTCHA a su página de inicio de sesión de WooCommerce. Pero, ¿qué sucede si no desea utilizar herramientas de terceros para esto? También puedes hacerlo con un poco de código.

2) Agregar CAPTCHA programáticamente

Si tiene algunas habilidades de codificación, puede agregar CAPTCHA a su página de inicio de sesión de WooCommerce usando fragmentos de PHP. En esta sección, le mostraremos cómo puede incluir un cuadro de Google reCAPTCHA en la pantalla de inicio de sesión.

Como editaremos el archivo functions.php del tema, antes de comenzar debes generar una copia de seguridad completa de tu sitio. Además, le recomendamos que cree un tema secundario si aún no lo ha hecho.

Para este tutorial, en lugar de pegar el código directamente en el archivo functions.php , usaremos el complemento Code Snippets. Es una herramienta específica del sitio utilizada por miles de bloggers y desarrolladores para facilitar el proceso de edición de archivos principales.

Instalación y Activación

Primero, instale y active Code Snippets en su sitio como se muestra a continuación.

Después de activar el complemento, verá su configuración en el lado izquierdo.

Configuración

Haga clic en Agregar nuevo, asigne un nombre al fragmento y pegue el siguiente código:

 add_action('wp_head',function (){echo '<script src="https://www.google.com/recaptcha/api.js" async defer></script>';});
 add_action('woocommerce_login_form','add_recaptcha_to_login_form');
 función add_recaptcha_to_login_form() {
 echo '<div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div>';
 } { ?>
 <div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div> <p>ACA el captcha</p>
 <?php
 }
 add_action( "formulario_de_inicio de sesión", "display_login_captcha" );
 función verificar_login_captcha($usuario, $contraseña) {
 if (isset($_POST['g-recaptcha-response'])) {
 $recaptcha_secret = 'TU_CLAVE_SECRETA';
 $respuesta = wp_remote_get("https://www.google.com/recaptcha/api/siteverify?secret=". $recaptcha_secret ."&response=". $_POST['g-recaptcha-response']);
 $respuesta = json_decode($respuesta["cuerpo"], verdadero);
 if (verdadero == $respuesta["éxito"]) {
 devolver $usuario;
 } demás {
 return new WP_Error("Captcha no válido", __("<strong>ERROR</strong>: Eres un bot"));
 }
 } demás {
 return new WP_Error("Captcha no válido", __("<strong>ERROR</strong>: Eres un bot. Si no es así, habilita JavaScript"));
 }
 }
 add_filter("wp_authenticate_user", "verify_login_captcha", 10, 2); 

Asegúrese de pegar la clave de su sitio y la clave secreta en el fragmento donde dice YOUR_PUBLIC_KEY y YOUR_SECRET_KEY respectivamente. Una vez que haya hecho eso, guarde los cambios y active el fragmento.

Pruebas

Ahora, debe verificar su página de inicio de sesión de WooCommerce desde una ventana de incógnito. Debería ver un cuadro reCAPTCHA allí.

¡Eso es! Así es como puede agregar CAPTCHA a la página de inicio de sesión de WooCommerce usando un poco de código.

Bonificación: cómo personalizar la página de inicio de sesión

Cuando ejecuta una tienda WooCommerce, es una buena práctica personalizar su página de inicio de sesión. Eso no solo lo diferenciará de sus competidores, sino que también hará que su sitio sea más seguro. En esta sección, le mostraremos cómo editar su página de inicio de sesión sin escribir una sola línea de código para brindarles a los usuarios una mejor experiencia y mantener su tienda segura.

Hay muchos complementos para personalizar la página de inicio de sesión. En este tutorial, utilizaremos Custom Login Page Customizer, una herramienta gratuita que puede descargar desde el repositorio de complementos de WordPress.

Lo primero que debe hacer es instalar y activar el complemento en su sitio web. Vaya a Complementos > Agregar nuevo , busque Personalizador de página de inicio de sesión personalizado e instálelo.

Después de la activación, verá la opción Personalizador en el lado izquierdo debajo de Personalizador de inicio de sesión .

Una vez accedas a él, verás el personalizador de WordPress. El complemento viene con algunas plantillas prediseñadas que puede usar para hacer su vida más fácil y ahorrar algo de tiempo.

Con este complemento, podrá personalizar el fondo, el logotipo, el formulario, los campos y los botones de su sitio. Además, también puede incluir scripts de código personalizados desde la sección CSS y JavaScript personalizados .

Una vez que esté satisfecho con su personalización, recuerde guardar los cambios. ¡Eso es! Ahora los visitantes de su sitio web verán la página de inicio de sesión recién diseñada en la parte delantera.

Para obtener más información al respecto, consulte nuestra guía sobre cómo personalizar la página de inicio de sesión en WordPress. Además, le recomendamos que también eche un vistazo a nuestro tutorial para cambiar la URL de inicio de sesión.

Conclusión

En general, mantener segura su página de inicio de sesión es esencial. Al usar CAPTCHA en su página de inicio de sesión, hace que su sitio sea más seguro y evita que usuarios no autorizados, como bots, accedan a su tablero.

En esta guía, hemos visto cómo agregar CAPTCHA a la página de inicio de sesión de WooCommerce usando complementos y con un poco de código. ¿Cual deberías usar? Depende. Ambos métodos harán el trabajo, por lo que depende de sus habilidades y necesidades. Si está buscando una solución fácil, puede usar un complemento. Por otro lado, si tiene conocimientos de programación y no le gusta instalar demasiados complementos, puede agregar el fragmento de código proporcionado en este tutorial.

Si está buscando más tutoriales dedicados a WooCommerce, eche un vistazo a estos artículos:

• Cómo cambiar la URL de la página de inicio de sesión de WordPress
• ¿El inicio de sesión de WordPress no funciona? Como arreglarlo
• Cómo personalizar la página de inicio de sesión en WordPress

¿Te ha resultado útil este artículo? Si lo hizo, comparta este artículo con sus amigos en las redes sociales para ayudarlos a proteger sus sitios.