Per iniziare

Installa

Puoi usare il nostro setup assistito dall'IA per installare il plugin. Aggiungi le skill Capgo al tuo strumento di IA usando il seguente comando:

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

Poi usa il seguente prompt:

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

Se preferisci la configurazione manuale, installa il plugin eseguendo questi comandi e segui le istruzioni specifiche per piattaforma qui sotto:

npm install @capgo/capacitor-recaptcha
npx cap sync

Avvio rapido

Configura le site key in capacitor.config.ts poi esegui un'azione e verifica il token sul tuo backend.

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

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

Errori comuni

• Verifica server: i token hanno vita breve, verifica con Google prima di fidarti dei client.
• Chiavi: imposta le site key per ogni piattaforma nella config.
• Flag Enterprise: deve corrispondere al tipo di chiave in Google Cloud.

Configura le site key

Crea le chiavi per piattaforma in Google Cloud reCAPTCHA, poi aggiungile 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, e webSiteKey sovrascrivi il valore condiviso siteKey. Puoi anche passare un siteKey direttamente a load() o execute() quando la chiave dipende dall'ambiente.

Genera 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() chiama load() automaticamente se il client non è pronto, quindi il preload esplicito è opzionale.

reCAPTCHA v3 standard web

Imposta enterprise: false per caricare lo script standard Web reCAPTCHA v3 di Google.

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

Su Android e iOS, il percorso nativo mobile SDK di Google è riservato a Enterprise/mobile. Passare enterprise: false su piattaforme native viene rifiutato per evitare l'uso accidentale di una chiave Web v3 standard.

Note di migrazione

Il plugin accetta i vecchi alias delle opzioni Cordova sitekeyAndroid e sitekeyWeb nelle call options e nella configurazione Capacitor. Accetta anche sitekeyIos e sitekeyIOS come alias di migrazione iOS. Per i nuovi code, preferisci i nomi di configurazione Capacitor.

Continua da Getting Started

Se stai usando Per iniziare per pianificare i flussi di autenticazione e account, collegandolo a Utilizzo di @capgo/capacitor-recaptcha per la funzionalità nativa in Utilizzo di @capgo/capacitor-recaptcha, @capgo/capacitor-social-login per i dettagli di implementazione in @capgo/capacitor-social-login, @capgo/capacitor-passkey per i dettagli di implementazione in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric per i dettagli di implementazione in @capgo/capacitor-native-biometric, e Autenticazione a due fattori per i dettagli sull'implementazione dell'autenticazione a due fattori.