SilentShield

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 레퍼런스

PropTypeRequired설명
apiKeystring예SilentShield API 키
baseUrlstring예SilentShield API의 기본 URL
onVerdict(result) => void예판정 결과를 받는 콜백
onError(error) => void아니요오류 콜백
onReady() => void아니요위젯이 로드되면 호출됩니다
langstring아니요언어 코드(기본값: "en")
zeroPiiboolean아니요Zero-PII 모드 사용(핑거프린팅 없음)
theme"light" | "dark" | "auto"아니요위젯 테마
invisibleboolean아니요위젯을 숨기고 프로그래밍 방식으로 검증

훅 사용법(프로그래밍 방식)

보이지 않는 검증이나 사용자 지정 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가 높이와 불투명도 0으로 렌더링됩니다. 행동 추적은 백그라운드에서 실행되며, 검증은 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}를 활성화할 것을 권장합니다. 이 설정은 핑거프린팅을 끄고 전적으로 행동 신호에 의존합니다.