Einstieg

GitHub

Einen Einrichtungsprompt mit den Installationsanweisungen und der vollständigen Markdown-Guide für diesen Plugin kopieren.

        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 unsere AI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten Ihrem AI-Tool mit der folgenden Befehlszeile hinzu:

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

Verwenden Sie dann die folgende Anfrage:

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 untenstehenden plattform-spezifischen Anweisungen befolgen:

npm install @capgo/capacitor-recaptcha
npx cap sync

Konfigurieren Sie die Site Keys

Erstellen Sie Plattform-Schlüssel in Google Cloud reCAPTCHA und fügen Sie sie dann hinzu an 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 die gemeinsame überschreiben siteKey. Sie können auch einen siteKey direkt an load() oder execute() als Teil einer längeren Capgo-UI-Zeichenfolge (Elternschlüssel `alternatives_cta_questions`). Seite/Bereich: Seite für die Vergleichsseite von Capacitor live-update alternatives. Rolle: Langer Marketing- oder Rechtsparagraph. Gesehen in: Seite alternatives.astro. Produkt- und Markenbezeichnungen von Capgo sowie Entwicklertermen bleiben genau erhalten. Nachrichtenschlüssel `alternatives_cta_questions` (Alternativen CTA-Fragen). | Teil einer längeren Capgo-UI-Zeichenfolge (Elternschlüssel `appflow_cta_questions`). Seite/Bereich: Seite für die Appflow-Vergleichs- und Migration-Marketing-Kopie. Rolle: Langer Marketing- oder Rechtsparagraph. Gesehen in: Seite ionic-appflow.astro. Produkt- und Markenbezeichnungen von Capgo sowie Entwicklertermen bleiben genau erhalten. Nachrichtenschlüssel `appflow_cta_questions` (Appflow CTA-Fragen). | Teil einer längeren Capgo-UI-Zeichenfolge (Elternschlüssel `capwesome_cta_questions`). Seite/Bereich: Seite für die Capawesome-Vergleichsseite. Rolle: Langer Marketing- oder Rechtsparagraph. Gesehen in: Seite capwesome.astro. Produkt- und Markenbezeichnungen von Capgo sowie Entwicklertermen bleiben genau erhalten. Nachrichtenschlüssel `capwesome_cta_questions` (Capwesome CTA-Fragen). | Teil einer längeren Capgo-UI-Zeichenfolge (Elternschlüssel `consulting_faq_subtitle`). Seite/Bereich: Seite für die Beratungsdienste. Rolle: Untertitel oder Slogan einer Abschnittsüberschrift. Gesehen in: Seite consulting.astro. Produkt- und Markenbezeichnungen von Capgo sowie Entwicklertermen bleiben genau erhalten. Nachrichtenschlüssel `consulting_faq_subtitle` (Beratung FAQ-Untertitel). | Seite/Bereich: Seite für die Appflow-Vergleichs- und Migration-Marketing-Kopie. Rolle: Kurze UI-Bezeichnung oder Navigationsitem. Gesehen in: Seite ionic-appflow.astro, Seite ionic-enterprise-plugins.astro, Seite Lösungen/ionic-enterprise-plugins.astro. Nachrichtenschlüssel `appflow_plugins_or` (Appflow Plugins oder).

wenn der Schlüssel von Ihrem Umfeld abhängt.

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() Zur Zwischenablage kopieren load() Aufrufe

automatisch, wenn der Client nicht bereit ist, so ist ein expliziter Vorbereitungsstep optional.

Setzen enterprise: false Google’s Standard-Web reCAPTCHA v3-Script laden

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

Bei Android und iOS ist der native mobile SDK Pfad nur für Unternehmen verfügbar. Die Weitergabe enterprise: false Zurückgewiesen, so dass ein Standard-Web v3-Schlüssel versehentlich nicht verwendet wird.

Migrationshinweise

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

Fortsetzung von Getting Started

Wenn Sie sich für Getting Started die Authentifizierung und die Kontoflussplanung verwenden, verbinden Sie es mit Verwendung von @capgo/capacitor-reCAPTCHA zur Verwendung der nativen Fähigkeit in Verwendung von @capgo/capacitor-reCAPTCHA Verwendung von @capgo/capacitor-social-login zur Verwendung der Implementierungsdetails in @capgo/capacitor-social-login Verwendung von @capgo/capacitor-passkey zur Verwendung der Implementierungsdetails in @capgo/capacitor-passkey @capgo/capacitor-native-biometrisch für die Implementierungsdetails in @capgo/capacitor-native-biometrisch, und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.