Getting Started

GitHub

Kopieren Sie einen Setup-Vorschlag mit den Installationsanweisungen und der vollständigen Markdown-Anleitung für diesen 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.

Installieren

Sie können unser AI-gestütztes Setup verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten zu Ihrem AI-Tool hinzu, indem Sie folgenden Befehl verwenden:

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

Verwenden Sie dann folgende Anweisung:

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

Wenn Sie die manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und die unten angegebenen Plattform-spezifischen Anweisungen befolgen:

npm install @capgo/capacitor-recaptcha
npx cap sync

Site-Schlüssel konfigurieren

Erstellen Sie Plattform-Schlüssel in Google Cloud reCAPTCHA und fügen Sie sie dann hinzu 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, iosSiteKeyund webSiteKey überschreiben Sie die gemeinsam genutzten siteKey. Sie können auch einen direkten Schlüssel übergeben. siteKey direkt an load() oder execute() wenn der Schlüssel von Ihrer Umgebung abhängt.

Token generieren

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() wird load() wird automatisch aufgerufen, wenn der Client nicht bereit ist, daher ist ein expliziter Vorkompilierungsschritt optional.

Web-Standard reCAPTCHA v3

Setzen enterprise: false um Googles Standard-Web reCAPTCHA v3-Skript zu laden.

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

Bei Android und iOS ist Googles native mobile SDK Pfad nur für Enterprise/mobile verfügbar. Das Übergeben enterprise: false auf nativen Plattformen wird abgelehnt, daher wird ein Standard-Web v3-Schlüssel versehentlich nicht verwendet.

Migrationshinweise

Der Plugin akzeptiert die alten Cordova-Option-Aliase sitekeyAndroid und sitekeyWeb bei Aufrufoptionen und Capacitor-Konfiguration. Es akzeptiert auch sitekeyIos und sitekeyIOS als iOS-Migrations-Aliase. Wählen Sie die Capacitor-Konfigurationsnamen für neue code.

Fortsetzen Sie von Getting Started

Wenn Sie "Getting Started" verwenden Getting Started um die Authentifizierung und die Kontoflows zu planen, verbinden Sie es mit Mit @capgo/capacitor-recaptcha für die native Fähigkeit in Mit @capgo/capacitor-recaptcha, @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.