Prise en main

Copiez un prompt de configuration avec les étapes d'installation et la guide Markdown complète pour ce plugin.

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-recaptcha`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/recaptcha/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

Installer

Vous pouvez utiliser notre configuration assistée par l'IA pour installer le plugin. Ajoutez les Capgo compétences à votre outil IA à l'aide de la commande suivante :

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

Utilisez ensuite la prompt suivante :

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 la configuration manuelle, installez le plugin en exécutant les commandes suivantes et suivez les instructions spécifiques à la plateforme ci-dessous :

bun add @capgo/capacitor-recaptcha
bunx cap sync

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 surécrivez la valeur partagée siteKeyVous pouvez également passer un siteKey directement à load() ou execute() Lorsque la clé dépend de votre environnement.

Générer un jeton

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() calls load() lorsque le client n'est pas prêt, il est donc facultatif d'effectuer une étape de préchargement explicite.

Standard Web reCAPTCHA v3

Set enterprise: false pour charger le script Web standard de reCAPTCHA v3 de Google.

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

On Android and iOS, Google’s native mobile SDK path is Enterprise/mobile only. Passing enterprise: false Sur les plateformes natives, la clé Web v3 est rejetée, elle n'est donc pas utilisée par inadvertance.

Section intitulée « Note de migration »

Le plugin accepte les anciens alias d'options de Cordova. sitekeyAndroid and sitekeyWeb Dans les options d'appel et la Capacitor configuration. Il accepte également sitekeyIos and sitekeyIOS Préférez les noms de configuration Capacitor pour les nouveaux code alias de migration vers iOS.

Continuez de Getting Started

Si vous utilisez Getting Started pour planifier l'authentification et les flux de compte, connectez-l’avec Utilisez @capgo/capacitor-recaptcha pour la capacité native dans Utilisez @capgo/capacitor-recaptcha, @capgo/capacitor-connexion-social pour le détail d'implémentation dans @capgo/capacitor-social-login, /capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-native-biometrique pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation dans l'authentification à deux facteurs.