@capgo/capacitor-recaptcha を使用して reCAPTCHA と reCAPTCHA Enterprise のトークンを生成

Capacitor アプリケーションから Web、Android、iOS で reCAPTCHA と reCAPTCHA Enterprise のトークンを生成

インストール

npm install @capgo/capacitor-recaptcha
npx cap sync

Web実装は、reCAPTCHA Enterpriseの代わりに標準のreCAPTCHA v3をロードする場合にのみ使用してください。 AndroidとiOSはGoogleのEnterprise/Mobileパスを使用し、拒否します。

import type { CapacitorConfig } from '@capacitor/cli';
import '@capgo/capacitor-recaptcha';

const config: CapacitorConfig = {
  plugins: {
    Recaptcha: {
      androidSiteKey: 'ANDROID_SITE_KEY',
      iosSiteKey: 'IOS_SITE_KEY',
      webSiteKey: 'WEB_SITE_KEY',
      enterprise: true,
    },
  },
};

export default config;

GoogleのEnterprise/Mobileパスを使用するため、AndroidとiOSは標準のreCAPTCHA v3をロードすることを拒否します。 enterprise: false only when the Web implementation should load standard reCAPTCHA v3 instead of reCAPTCHA Enterprise. Android and iOS use Google's Enterprise/mobile SDK path and reject enterprise: false.

トークンをバックエンドに送信し、受け入れる保護されたリクエストの前に reCAPTCHA の評価を実行してください。

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

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

フルリファレンス

https://__CAPGO_KEEP_0.com/Cap-go/CAPGO_KEEP_1__-recaptcha/

GitHub: https://github.com/Cap-go/capacitor-recaptcha/
Capacitor reCAPTCHA

Keep going from Using @capgo/capacitor-recaptcha

Capacitor reCAPTCHA を使用している場合 Using @capgo/capacitor-recaptcha 認証とアカウントフローの計画と接続 @capgo/capacitor-recaptcha @capgo/capacitor-recaptchaの実装詳細 Getting Started Getting Startedの実装詳細 @capgo/capacitor-social-login @capgo/capacitor-social-loginの実装詳細 @capgo/capacitor-passkey @capgo/capacitor-passkeyの実装詳細 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometricの実装詳細

reCAPTCHA

reCAPTCHA のチュートリアル