Saltar al contenido principal
@capgo/capacitor-recaptcha Auth y seguridad Código abierto

reCAPTCHA plugin Capacitor

Genera tokens de reCAPTCHA web o reCAPTCHA Enterprise y tokens móviles nativos Enterprise

Instalar

bun add @capgo/capacitor-recaptcha bunx cap sync
npm, pnpm o yarn
  • npm install @capgo/capacitor-recaptcha
  • pnpm add @capgo/capacitor-recaptcha
  • yarn add @capgo/capacitor-recaptcha

Guía

Cómo usar reCAPTCHA en Capacitor

Probar en el dispositivo

Descarga la app Capgo y escanea el QR code.

QR de vista previa del plugin reCAPTCHA code

Uso de @capgo/capacitor-recaptcha

Genera tokens de reCAPTCHA y reCAPTCHA Enterprise desde apps Capacitor para Web, Android e iOS.

Instalar

npm install @capgo/capacitor-recaptcha
npx cap sync

Configurar

import type { CapacitorConfig } from '@capacitor/cli';
import '@capgo/capacitor-recaptcha';

const config: CapacitorConfig = {
  plugins: {
    Recaptcha: {
      androidSiteKey: 'ANDROID_SITE_KEY',
      iosSiteKey: 'IOS_SITE_KEY',
      webSiteKey: 'WEB_SITE_KEY',
      enterprise: true,
    },
  },
};

export default config;

Usa enterprise: false solo cuando la implementación web deba cargar reCAPTCHA v3 estándar en lugar de reCAPTCHA Enterprise. Android e iOS usan la ruta Enterprise/móvil de SDK de Google y rechazan enterprise: false.

Generar un token

import { Recaptcha } from '@capgo/capacitor-recaptcha';

const { token } = await Recaptcha.execute({
  action: 'login',
});

Envía el token a tu backend y crea una evaluación de reCAPTCHA antes de aceptar la solicitud protegida.

Referencia completa

Continúa desde Usando @capgo/capacitor-recaptcha

Si estás usando Uso de @capgo/capacitor-recaptcha para planificar los flujos de autenticación y de cuenta, conéctalo con @capgo/capacitor-recaptcha para los detalles de implementación en @capgo/capacitor-recaptcha, Primeros pasos para los detalles de implementación en Primeros pasos, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para los detalles de implementación en @capgo/capacitor-passkey, y @capgo/capacitor-native-biometric para los detalles de implementación en @capgo/capacitor-native-biometric.

FAQ

Preguntas frecuentes del plugin de reCAPTCHA

¿Cómo instalo el plugin de reCAPTCHA en una app de Capacitor?

Run "bun add @capgo/capacitor-recaptcha" (or "npm install @capgo/capacitor-recaptcha"), then run "bunx cap sync" so the iOS and Android projects pick up the native code. Import it from "@capgo/capacitor-recaptcha" in your app code.

¿Funciona @capgo/capacitor-recaptcha con React, Vue y Angular?

Sí. reCAPTCHA es un paquete de Capacitor, por lo que funciona con cualquier framework web que se ejecute dentro de Capacitor, incluyendo Ionic, React, Vue, Angular, Svelte y JavaScript puro.

¿Qué versión de Capacitor soporta @capgo/capacitor-recaptcha?

Los plugins de Capgo siguen la versión mayor de Capacitor: usa la versión mayor del plugin que coincida con la versión mayor de tu Capacitor (por ejemplo, el plugin v8 con Capacitor 8). La tabla de compatibilidad del README de GitHub lista las versiones mantenidas.

¿Es @capgo/capacitor-recaptcha gratuito y de código abierto?

Sí. El código code es público en GitHub en https://github.com/Cap-go/capacitor-recaptcha/ y el paquete se puede instalar gratis desde npm. Se aceptan informes de errores y pull requests.

¿Puedo actualizar code que usa reCAPTCHA sin una revisión de la App Store?

Instalar o actualizar el plugin cambia el code nativo, así que requiere un nuevo build para la tienda. Después, los cambios de JavaScript, HTML y CSS que llamen al plugin se pueden publicar al instante con las live updates de Capgo.

Lanza cambios de reCAPTCHA sin esperar la revisión de la app

Una vez que el plugin esté en tu store build, Capgo live updates envía tus cambios de JavaScript, HTML y CSS a los usuarios en minutos.

Empieza con Capgo