Tutorial: Configuración de reCAPTCHA v2 en MultiVendorX

Introducción

Este tutorial explica cómo configurar Google reCAPTCHA v2 en un marketplace creado con MultiVendorX para proteger tus formularios de registro contra bots y spam. El sistema reCAPTCHA ayuda a verificar que quienes interactúan con tu sitio son humanos y no programas automatizados.

¿Qué es reCAPTCHA?

reCAPTCHA es un servicio gratuito de Google que protege tu sitio web contra spam y abuso. Utiliza técnicas avanzadas de análisis de riesgo para distinguir entre humanos y bots.

Requisitos previos

• Una cuenta de Google
• Acceso al panel de administración de tu sitio MultiVendorX
• Acceso a la configuración de formularios/seguridad de tu marketplace

Paso 1: Obtener las claves de reCAPTCHA

1. Visita Google reCAPTCHA Admin
2. Inicia sesión con tu cuenta de Google
3. Completa el formulario de registro:
   • Etiqueta: Un nombre para identificar este reCAPTCHA (ej. "Mi Marketplace MultiVendorX")
   • Tipo de reCAPTCHA: Selecciona "reCAPTCHA v2" (opción "No soy un robot")
   • Dominios: Añade el dominio de tu sitio web (ej. "mimarketplace.com")
   • Acepta los términos de servicio y haz clic en "Enviar"
4. Obtendrás dos claves:
   • Clave del sitio: (ej. 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI)
   • Clave secreta: (ej. 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe)

Nota: Estas son claves demo proporcionadas por Google para pruebas. Para un sitio en producción, debes generar tus propias claves.

Paso 2: Configurar reCAPTCHA en MultiVendorX

1. Accede al panel de administración de tu marketplace MultiVendorX
2. Navega a la sección de configuración de seguridad o formularios
3. Busca la opción de reCAPTCHA (como se muestra en la captura)
4. En el campo "reCAPTCHA Type", selecciona "reCAPTCHA v2"
5. En el campo "Recaptcha Script", añade el siguiente código (reemplaza la clave de ejemplo con tu clave del sitio real):

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>

6. Opcionalmente, añade:
   • Preguntas específicas para tu marketplace en "Write questions applicable to your marketplace"
   • Instrucciones para el registro en "Introduce your marketplace or add instructions for registration"
7. Guarda los cambios

Paso 3: Verificación

Una vez implementado:

1. Navega a un formulario de registro en tu sitio
2. Deberías ver el widget de reCAPTCHA "No soy un robot"
3. Completa el formulario y verifica que el sistema valida correctamente el reCAPTCHA

Cómo funciona reCAPTCHA en MultiVendorX

1. Frontend: El código que añadiste muestra el widget de reCAPTCHA en el formulario de registro.
2. Interacción del usuario: Cuando un usuario marca la casilla "No soy un robot", Google realiza verificaciones en segundo plano.
3. Backend: Cuando se envía el formulario, MultiVendorX utiliza automáticamente la clave secreta para verificar con los servidores de Google si el reCAPTCHA fue completado correctamente.
4. Validación: Si la validación es exitosa, el registro continúa. Si falla, se muestra un mensaje de error solicitando que se complete el reCAPTCHA.

Solución de problemas

Si tu reCAPTCHA no funciona correctamente:

1. Verifica las claves: Asegúrate de que estás usando la clave del sitio correcta en el código frontend.
2. Dominios: Confirma que el dominio donde estás implementando reCAPTCHA está incluido en la lista de dominios autorizados en la consola de Google reCAPTCHA.
3. JavaScript: Asegúrate de que JavaScript está habilitado en tu navegador y que no hay errores en la consola del navegador.
4. Caché: Limpia la caché del navegador y del servidor para asegurarte de que se carga la versión más reciente de tu página.

Conclusión

Has configurado exitosamente reCAPTCHA v2 en tu marketplace MultiVendorX. Esto ayudará a proteger tu sitio contra registros automatizados y spam, mejorando la seguridad tanto para los administradores como para los vendedores y compradores legítimos.

Recuerda que para un sitio en producción debes usar tus propias claves de reCAPTCHA, no las claves de demostración incluidas en este tutorial.

Búsqueda: MultivendorX, Multivendor, Marketplace multivendor x