React Native-integratie

Integreer SilentShield in React Native-apps met een wrapper op basis van WebView. De widget draait in een lichte WebView en communiceert met uw app via de message bridge van React Native.

Installatie

Early Access

Het React Native-pakket is momenteel in early access — aan te vragen via [email protected]; de npm-release volgt. De onderstaande voorbeelden tonen de API van het early-access-pakket.

npmbash

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

iOS: CocoaPods installeren

Voer na de installatie cd ios && pod install uit om de native WebView-afhankelijkheid te koppelen.

Gebruik van de component

De eenvoudigste manier om SilentShield te integreren is met de component <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-referentie

Prop	Type	Required	Beschrijving
apiKey	string	Ja	Uw SilentShield API-sleutel
baseUrl	string	Ja	Basis-URL van de SilentShield API
onVerdict	(result) => void	Ja	Callback met het oordeel
onError	(error) => void	Nee	Fout-callback
onReady	() => void	Nee	Wordt aangeroepen wanneer de widget is geladen
lang	string	Nee	Taalcode (standaard: "en")
zeroPii	boolean	Nee	Zero-PII-modus inschakelen (geen fingerprinting)
theme	"light" \| "dark" \| "auto"	Nee	Widgetthema
invisible	boolean	Nee	Widget verbergen, programmatisch verifiëren

Gebruik van de hook (programmatisch)

Gebruik voor onzichtbare verificatie of eigen UI-flows de hook 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>
  );
}

Onzichtbare modus

In de onzichtbare modus wordt de WebView weergegeven met een hoogte en dekking van nul. Het volgen van gedrag gebeurt op de achtergrond en u start de verificatie programmatisch via de functie verify(). Dit is ideaal voor inlogschermen en afrekenprocessen.

CheckoutScreen.tsxtsx

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

Aanbevolen: gebruik de Zero-PII-modus voor mobiel

Browser-fingerprints die binnen een WebView worden verzameld, zijn minder betrouwbaar dan in een echte browser. Wij raden aan zeroPii={true} in te schakelen voor React Native-apps; dat schakelt fingerprinting uit en steunt volledig op gedragssignalen.