React Native インテグレーション

WebViewベースのラッパーを使って、SilentShieldをReact Nativeアプリに統合できます。ウィジェットは軽量なWebView内で動作し、React Nativeのメッセージブリッジを介してアプリと通信します。

インストール

Early Access

React Nativeパッケージは現在アーリーアクセス中です — [email protected] までリクエストしてください。npmでの公開は後日行われます。以下の例はアーリーアクセス版パッケージのAPIを示しています。

npmbash

# Early access — request the package via [email protected]
# (npm release to follow). Peer dependency:
npm install react-native-webview

iOS: CocoaPods のインストール

インストール後、cd ios && pod install を実行して、ネイティブの WebView 依存関係をリンクしてください。

コンポーネントの使い方

SilentShieldを統合する最も簡単な方法は、<SilentShield /> コンポーネントを使うことです：

ContactForm.tsxtsx

import { SilentShield } from '@silentshield/react-native';

function ContactForm() {
  const [token, setToken] = useState<string | null>(null);

  return (
    <View>
      {/* Your form fields */}
      <TextInput placeholder="Email" />
      <TextInput placeholder="Message" multiline />

      {/* SilentShield widget */}
      <SilentShield
        apiKey="YOUR_API_KEY"
        baseUrl="https://api.silentshield.io"
        onVerdict={(result) => {
          if (result.verdict === 'human') {
            setToken(result.token);
          }
        }}
        onError={(err) => console.error(err)}
        lang="en"
        theme="light"
      />

      <Button
        title="Submit"
        onPress={() => submitForm(token)}
        disabled={!token}
      />
    </View>
  );
}

Props リファレンス

Prop	Type	Required	説明
apiKey	string	はい	SilentShield の API キー
baseUrl	string	はい	SilentShield API のベース URL
onVerdict	(result) => void	はい	判定結果を受け取るコールバック
onError	(error) => void	いいえ	エラー時のコールバック
onReady	() => void	いいえ	ウィジェットの読み込み完了時に呼び出されます
lang	string	いいえ	言語コード（既定: "en"）
zeroPii	boolean	いいえ	Zero-PIIモードを有効化（フィンガープリンティングなし）
theme	"light" \| "dark" \| "auto"	いいえ	ウィジェットのテーマ
invisible	boolean	いいえ	ウィジェットを非表示にし、プログラムから検証

フックの使い方（プログラムから）

非表示の検証や独自のUIフローには、useSilentShield() フックを使用します：

LoginScreen.tsxtsx

import { useSilentShield } from '@silentshield/react-native';

function LoginScreen() {
  const { verify, reset, isReady, isVerifying, WebViewComponent } =
    useSilentShield({
      apiKey: 'YOUR_API_KEY',
      baseUrl: 'https://api.silentshield.io',
    });

  const handleLogin = async () => {
    const result = await verify();
    if (result.verdict === 'human') {
      // Submit login with result.token
    }
  };

  return (
    <View>
      {/* Hidden WebView for behavior tracking */}
      {WebViewComponent}

      <TextInput placeholder="Email" />
      <TextInput placeholder="Password" secureTextEntry />

      <Button
        title={isVerifying ? 'Verifying...' : 'Log In'}
        onPress={handleLogin}
        disabled={!isReady || isVerifying}
      />
    </View>
  );
}

非表示モード

非表示モードでは、WebViewは高さと不透明度がゼロの状態でレンダリングされます。行動のトラッキングはバックグラウンドで実行され、検証は verify() 関数でプログラムから開始します。ログイン画面やチェックアウトのフローに最適です。

CheckoutScreen.tsxtsx

<SilentShield
  apiKey="YOUR_API_KEY"
  baseUrl="https://api.silentshield.io"
  onVerdict={handleVerdict}
  invisible={true}  // No visible UI
/>

推奨：モバイルでは Zero-PIIモードを使用

WebView 内で収集されたブラウザーのフィンガープリントは、実際のブラウザーより信頼性が低くなります。React Native アプリでは zeroPii={true} を有効にすることをおすすめします。フィンガープリンティングが無効になり、判定は行動シグナルのみに基づきます。