lsx-recaptcha

SDK para Google reCAPTCHA - Frontend TypeScript

🚀 Características

• ✅ reCAPTCHA v2 Checkbox - Casilla de verificación visible
• ✅ reCAPTCHA v2 Badge - Insignia invisible
• ✅ reCAPTCHA v3 Score - Verificación basada en comportamiento
• ✅ TypeScript - Tipado completo
• ✅ Sin dependencias - Librería ligera
• ✅ Compatible con navegadores modernos

📦 Instalación

npm install lsx-recaptcha-frontend

🎯 Uso Básico

reCAPTCHA v2 Checkbox

import { Recaptcha } from 'lsx-recaptcha-frontend';

const recaptcha = new Recaptcha({
  siteKey: 'tu-site-key',
  version: 'v2_checkbox',
  callback: (token) => {
    console.log('Token recibido:', token);
  }
});

// Renderizar en un contenedor
await recaptcha.renderCheckbox('mi-contenedor');

reCAPTCHA v2 Badge (Invisible)

import { Recaptcha } from 'lsx-recaptcha-frontend';

const recaptcha = new Recaptcha({
  siteKey: 'tu-site-key',
  version: 'v2_badge',
  callback: (token) => {
    console.log('Token recibido:', token);
  }
});

// Renderizar badge invisible
await recaptcha.renderBadge();

reCAPTCHA v3 Score

import { Recaptcha } from 'lsx-recaptcha-frontend';

const recaptcha = new Recaptcha({
  siteKey: 'tu-site-key',
  version: 'v3_score'
});

// Ejecutar y obtener token
const token = await recaptcha.executeV3('submit');
console.log('Token v3:', token);

🔧 API Completa

Constructor

new Recaptcha(config: RecaptchaConfig)

Configuración

interface RecaptchaConfig {
  siteKey: string;                    // Clave del sitio de Google
  version: 'v2_checkbox' | 'v2_badge' | 'v3_score';
  action?: string;                    // Solo para v3
  callback?: (token: string) => void; // Callback para v2
  'expired-callback'?: () => void;    // Callback de expiración
  'error-callback'?: () => void;      // Callback de error
}

Métodos

• renderCheckbox(containerId: string): Promise<number> - Renderiza v2 checkbox
• renderBadge(): Promise<void> - Renderiza v2 badge
• executeV3(action?: string): Promise<string> - Ejecuta v3
• getResponse(): string - Obtiene respuesta v2
• reset(): void - Resetea v2
• verifyToken(token: string, version?: string): Promise<Response> - Verifica token

🌐 HTML Requerido

Para v2 Checkbox

<div id="mi-contenedor"></div>

Para v2 Badge

<!-- El badge se muestra automáticamente -->

📋 Requisitos

• Node.js >= 16.0.0
• Navegadores modernos con soporte ES2020
• Claves válidas de Google reCAPTCHA

📄 Licencia

MIT

🤝 Contribuir

1. Fork el proyecto
2. Crea tu rama (git checkout -b feature/nueva-funcionalidad)
3. Commit tus cambios (git commit -m 'Agregar nueva funcionalidad')
4. Push a la rama (git push origin feature/nueva-funcionalidad)
5. Abre un Pull Request

📞 Soporte

• Email: [email protected]
• GitLab: https://gitlab.com/lunarsystemx/lsx-recaptcha-front