スタートガイド

インストール

AIアシストによるセットアップでプラグインをインストールできます。以下のコマンドを使用して、お使いの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 で評価してください。
• キー：設定でプラットフォームごとにサイトキーを設定します。
• エンタープライズフラグ：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 ステップは任意です。

Web標準の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の設定名を推奨します。

Getting Startedの続きを進める

使用している場合 スタートガイド 認証とアカウントフローを計画するには、これを次と連携させてください @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要素認証 二要素認証の実装の詳細については。