Primeros pasos

Instalar

Puedes usar nuestro setup asistido por IA para instalar el plugin. Añade las skills de Capgo a tu herramienta de IA con el siguiente comando:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Luego usa el siguiente prompt:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-recaptcha` plugin in my project.

Si prefieres la configuración manual, instala el plugin ejecutando estos comandos y sigue las instrucciones de cada plataforma:

npm install @capgo/capacitor-recaptcha
npx cap sync

Inicio rápido

Configura las site keys en capacitor.config.ts primero, luego ejecuta una acción y verifica el token en tu backend.

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

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

Errores comunes

• Verificación en el servidor: los tokens son de corta duración; valídalos con Google antes de confiar en el cliente.
• Claves: configura las site keys por plataforma en el config.
• Flag de Enterprise: debe coincidir con el tipo de key en Google Cloud.

Configurar Site Keys

Crea las keys de plataforma en Google Cloud reCAPTCHA y luego añádelas a capacitor.config.ts.

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

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'Example',
  webDir: 'dist',
  plugins: {
    Recaptcha: {
      androidSiteKey: 'ANDROID_SITE_KEY',
      iosSiteKey: 'IOS_SITE_KEY',
      webSiteKey: 'WEB_SITE_KEY',
      enterprise: true,
    },
  },
};

export default config;

androidSiteKey, iosSiteKey, y webSiteKey sobrescribir el compartido siteKey. También puedes pasar un siteKey directamente a load() o execute() cuando la clave dependa de tu entorno.

Generar un token

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

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

await fetch('/api/recaptcha-assessment', {
  method: 'POST',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({ token, action: 'login' }),
});

execute() llama a load() automáticamente si el cliente no está listo, por lo que el paso de preload es opcional.

reCAPTCHA v3 estándar web

Configurar enterprise: false para cargar el script estándar de Google Web reCAPTCHA v3.

const { token } = await Recaptcha.execute({
  siteKey: 'WEB_V3_SITE_KEY',
  enterprise: false,
  action: 'signup',
});

En Android e iOS, la ruta nativa de SDK de Google es solo para Enterprise/mobile. Al pasar enterprise: false en plataformas nativas, se rechaza para evitar el uso accidental de una clave Web v3 estándar.

Notas de migración

El plugin acepta los antiguos alias de opciones de Cordova sitekeyAndroid y sitekeyWeb en las opciones de llamada y en la configuración de Capacitor. También acepta sitekeyIos y sitekeyIOS como alias de migración de iOS. Prefiere los nombres de configuración de Capacitor para nuevos code.

Continúa desde Getting Started

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