Getting Started

Install

Sie können unsere AI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie die Capgo Fähigkeiten Ihrem AI-Tool mit folgender Befehl hinzu:

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

Zur Zwischenablage kopieren

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

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

npm install @capgo/capacitor-recaptcha
npx cap sync

Schnellstart

Konfigurieren Sie die Site-Schlüssel in capacitor.config.ts erst, dann führen Sie eine Aktion aus und überprüfen Sie den Token auf Ihrem Backend.

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

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

Häufige Fehler

• Server-Verifizierung: Tokens sind kurzlebig, beurteilen Sie sie bei Google, bevor Sie Clients vertrauen.
• SchlüsselEinstellungen pro Plattform mit Site Keys konfigurieren.
• Unternehmensflagge: muss der Schlüsseltyp in Google Cloud übereinstimmen.

Konfigurieren von Site-Schlüsseln

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 genutzte siteKeySie können auch einen siteKey direkt übergeben load() oder execute() wenn die Schlüssel auf Ihre Umgebung angewiesen ist.

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

Web-Standard reCAPTCHA v3

Set 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',
});

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

Migrationshinweise

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

Abschnitt mit dem Titel "Fortsetzen von Getting Started"

Wenn Sie Capgo verwenden Zur Einführung um die Authentifizierung und die Kontenflüsse zu planen und es mit Mit @capgo/capacitor-recaptcha zur nativen Fähigkeit in Mit @capgo/capacitor-recaptcha, capgo/capacitor-social-login zur Implementierungsdetails in capgo/capacitor-social-login, capgo/capacitor-passkey zur Implementierungsdetails in capgo/capacitor-passkey, capgo/capacitor-native-biometric zur Implementierungsdetails in capgo/capacitor-native-biometric und Zwei-Faktor-Authentifizierung zur Implementierungsdetails in Zwei-Faktor-Authentifizierung.