React Native Integration

Integrieren Sie SilentShield in React Native Apps mit einem WebView-basierten Wrapper. Das Widget läuft in einer leichtgewichtigen WebView und kommuniziert per React Native Message Bridge mit Ihrer App.

Installation

Early Access

Das React-Native-Paket ist derzeit im Early Access — anfragbar über [email protected]; die npm-Veröffentlichung folgt. Die folgenden Beispiele zeigen die API des Early-Access-Pakets.

npmbash

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

iOS: CocoaPods installieren

Nach der Installation führen Sie cd ios && pod install aus, um die native WebView-Abhängigkeit zu verknüpfen.

Komponenten-Nutzung

Der einfachste Weg, SilentShield zu integrieren, ist die <SilentShield /> Komponente:

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="sk_live_..."
        baseUrl="https://api.silentshield.com"
        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-Referenz

Prop	Type	Required	Beschreibung
apiKey	string	Ja	Ihr SilentShield API-Key
baseUrl	string	Ja	Basis-URL der SilentShield API
onVerdict	(result) => void	Ja	Callback mit Verdict-Ergebnis
onError	(error) => void	Nein	Fehler-Callback
onReady	() => void	Nein	Wird aufgerufen wenn Widget geladen
lang	string	Nein	Sprachcode (Standard: "en")
zeroPii	boolean	Nein	Zero-PII-Modus aktivieren (kein Fingerprinting)
theme	"light" \| "dark" \| "auto"	Nein	Widget-Theme
invisible	boolean	Nein	Widget verstecken, programmatisch verifizieren

Hook-Nutzung (Programmatisch)

Für unsichtbare Verifizierung oder eigene UI-Flows verwenden Sie den useSilentShield() Hook:

LoginScreen.tsxtsx

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

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

  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>
  );
}

Unsichtbarer Modus

Im unsichtbaren Modus wird die WebView mit Höhe und Deckkraft null gerendert. Behavior-Tracking läuft im Hintergrund, und Sie lösen die Verifizierung programmatisch über die verify()-Funktion aus. Ideal für Login-Bildschirme und Checkout-Flows.

CheckoutScreen.tsxtsx

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

Empfehlung: Zero-PII-Modus für Mobile verwenden

Browser-Fingerprints, die innerhalb einer WebView erfasst werden, sind weniger zuverlässig als in einem echten Browser. Wir empfehlen, zeroPii={true} für React Native Apps zu aktivieren, was Fingerprinting deaktiviert und sich vollständig auf Verhaltenssignale verlässt.