시작하기

설치

AI-Assisted Setup으로 플러그인을 설치할 수 있습니다. 다음 명령어로 AI 도구에 Capgo 스킬을 추가하세요:

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

그런 다음 아래 프롬프트를 사용하세요:

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

수동 설정을 선호한다면, 다음 명령어를 실행하여 플러그인을 설치하고 아래의 플랫폼별 지침을 따르세요:

npm install @capgo/capacitor-recaptcha
npx cap sync

빠른 시작

사이트 키를 다음에 설정하세요: capacitor.config.ts 그 후 액션을 실행하고 백엔드에서 토큰을 검증하세요.

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

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

자주 하는 실수

• 서버 검증: 토큰은 수명이 짧으므로, 클라이언트를 신뢰하기 전에 Google에서 평가하세요.
• 키: 플랫폼별 사이트 키를 설정에 지정하세요.
• Enterprise 플래그: Google Cloud의 키 유형과 일치해야 합니다.

사이트 키 설정

Google Cloud reCAPTCHA에서 플랫폼 키를 생성한 후, 다음에 추가하세요: 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, 그리고 webSiteKey 공유 설정을 재정의 siteKey. 또한 다음을 전달할 수도 있습니다 siteKey 에 직접 load() 또는 execute() 키가 환경에 따라 달라질 때.

토큰 생성

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() 호출합니다 load() 클라이언트가 준비되지 않았을 때 자동으로 호출되므로, 명시적인 preload 단계는 선택 사항입니다.

웹 표준 reCAPTCHA v3

설정 enterprise: false Google의 표준 Web reCAPTCHA v3 스크립트를 로드합니다.

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

Android와 iOS에서 Google의 네이티브 모바일 SDK 경로는 Enterprise/mobile 전용입니다. 다음을 전달하면 enterprise: false 네이티브 플랫폼에서는 거부되어 표준 Web v3 키가 실수로 사용되지 않도록 합니다.

마이그레이션 노트

이 플러그인은 이전 Cordova 옵션 별명을 sitekeyAndroid 및 sitekeyWeb 호출 옵션과 Capacitor 설정에서 허용합니다. 또한 다음도 허용합니다. sitekeyIos 및 sitekeyIOS iOS 마이그레이션 별칭으로 사용됩니다. 새 code에는 Capacitor config 이름을 사용하세요.

시작하기 다음 단계

사용 중이라면 시작하기 인증 및 계정 흐름을 설계할 때, 이를 다음 항목과 연결하세요: @capgo/capacitor-recaptcha 사용하기 @capgo/capacitor-recaptcha 사용 시 네이티브 기능을 위한 @capgo/capacitor-social-login @capgo/capacitor-social-login의 구현 세부 사항은, @capgo/capacitor-passkey @capgo/capacitor-passkey의 구현 세부 사항은 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric의 구현 세부 사항은, 2단계 인증 2단계 인증의 구현 세부 사항에 대해서는