Prise en main

Installer

Vous pouvez utiliser notre configuration assistée par IA pour installer le plugin. Ajoutez les skills Capgo à votre outil d'IA avec la commande suivante :

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

Utilisez ensuite le prompt suivant :

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

Si vous préférez une installation manuelle, installez le plugin en exécutant les commandes suivantes et suivez les instructions spécifiques à chaque plateforme ci-dessous :

npm install @capgo/capacitor-recaptcha
npx cap sync

Démarrage rapide

Configurer les clés de site dans capacitor.config.ts d'abord, puis exécutez une action et vérifiez le token sur votre backend.

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

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

Erreurs courantes

• Vérification côté serveur: les tokens sont à durée de vie courte, évaluez avec Google avant de faire confiance aux clients.
• Clés: set per platform site keys in config.
• Flag Enterprise: doit correspondre au type de clé dans Google Cloud.

Configurer les clés de site

Créez des clés de plateforme dans Google Cloud reCAPTCHA, puis ajoutez-les à 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, et webSiteKey surcharger le partagé siteKey. Vous pouvez également passer un siteKey directement à load() ou execute() lorsque la clé dépend de votre environnement.

Générer 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() appelle load() automatiquement quand le client n'est pas prêt, une étape de preload explicite est donc facultative.

reCAPTCHA v3 standard web

Définissez enterprise: false pour charger le script Web reCAPTCHA v3 standard de Google.

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

Sur Android et iOS, le chemin natif mobile SDK de Google est réservé à Enterprise/mobile. Passer enterprise: false sur les plateformes natives est refusé afin qu’une clé Web v3 standard ne soit pas utilisée par erreur.

Notes de migration

Le plugin accepte les anciens alias d’options Cordova sitekeyAndroid et sitekeyWeb dans les options d'appel et la configuration Capacitor. Il accepte également sitekeyIos et sitekeyIOS comme alias de migration iOS. Privilégiez les noms de configuration Capacitor pour les nouveaux code.

Continuer depuis Getting Started

Si vous utilisez Prise en main pour planifier les flux d'authentification et de compte, le connecter à Utiliser @capgo/capacitor-recaptcha pour la fonctionnalité native dans Utiliser @capgo/capacitor-recaptcha, @capgo/capacitor-social-login pour les détails d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation de l'authentification à deux facteurs.