Panduan Memulai

Instal

Anda bisa menggunakan AI-Assisted Setup kami untuk menginstal plugin ini. Tambahkan skill Capgo ke tool AI Anda dengan command berikut:

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

Lalu gunakan prompt berikut:

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

Jika Anda lebih memilih Manual Setup, instal plugin dengan menjalankan perintah berikut dan ikuti petunjuk khusus platform di bawah ini:

npm install @capgo/capacitor-recaptcha
npx cap sync

Mulai cepat

Atur site keys di capacitor.config.ts terlebih dahulu, lalu jalankan aksi dan verifikasi token di backend Anda.

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

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

Kesalahan umum

• Verifikasi server: token berumur pendek, validasi dengan Google sebelum mempercayai klien.
• Keys: atur site keys per platform di config.
• Flag Enterprise: harus sesuai dengan tipe key di Google Cloud.

Konfigurasi Site Keys

Buat platform keys di Google Cloud reCAPTCHA, lalu tambahkan ke 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, dan webSiteKey override bersama siteKey. Anda juga bisa meneruskan siteKey langsung ke load() atau execute() ketika key bergantung pada environment Anda.

Generate A 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() panggilan load() secara otomatis saat client belum siap, jadi langkah preload eksplisit bersifat opsional.

reCAPTCHA v3 Standar Web

Atur enterprise: false untuk memuat skrip Web reCAPTCHA v3 standar Google.

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

Di Android dan iOS, jalur SDK native mobile Google hanya untuk Enterprise/mobile. Mengoper enterprise: false di platform native akan ditolak agar kunci Web v3 standar tidak terpakai tanpa sengaja.

Catatan Migrasi

Plugin ini menerima alias opsi Cordova lama sitekeyAndroid dan sitekeyWeb dalam call options dan konfigurasi Capacitor. Plugin ini juga menerima sitekeyIos dan sitekeyIOS sebagai alias migrasi iOS. Untuk code baru, lebih baik gunakan nama konfigurasi Capacitor.

Lanjutkan dari Getting Started

Jika Anda menggunakan Panduan Memulai untuk merencanakan alur autentikasi dan akun, hubungkan dengan Menggunakan @capgo/capacitor-recaptcha untuk kapabilitas native di Using @capgo/capacitor-recaptcha, @capgo/capacitor-social-login untuk detail implementasi di @capgo/capacitor-social-login, @capgo/capacitor-passkey untuk detail implementasi di @capgo/capacitor-passkey, @capgo/capacitor-native-biometric untuk detail implementasi di @capgo/capacitor-native-biometric, dan Autentikasi dua faktor untuk detail implementasi di autentikasi dua faktor.