Intégration React Native

Intégrez SilentShield dans vos applications React Native grâce à un wrapper basé sur WebView. Le widget s'exécute dans une WebView légère et communique avec votre application via le pont de messages de React Native.

Installation

Early Access

Le paquet React Native est actuellement en accès anticipé — sur demande via [email protected] ; la publication npm suivra. Les exemples ci-dessous montrent l'API du paquet en accès anticipé.

npmbash

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

iOS : installer CocoaPods

Après l'installation, exécutez cd ios && pod install pour lier la dépendance WebView native.

Utilisation du composant

La façon la plus simple d'intégrer SilentShield est d'utiliser le composant <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>
  );
}

Référence des props

Prop	Type	Required	Description
apiKey	string	Oui	Votre clé API SilentShield
baseUrl	string	Oui	URL de base de l'API SilentShield
onVerdict	(result) => void	Oui	Callback avec le résultat du verdict
onError	(error) => void	Non	Callback d'erreur
onReady	() => void	Non	Appelé lorsque le widget est chargé
lang	string	Non	Code de langue (par défaut : "en")
zeroPii	boolean	Non	Active le mode Zero-PII (sans fingerprinting)
theme	"light" \| "dark" \| "auto"	Non	Thème du widget
invisible	boolean	Non	Masque le widget, vérification par programmation

Utilisation du hook (par programmation)

Pour une vérification invisible ou des parcours d'interface personnalisés, utilisez le 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>
  );
}

Mode invisible

En mode invisible, la WebView est rendue avec une hauteur et une opacité nulles. Le suivi du comportement s'exécute en arrière-plan et vous déclenchez la vérification par programmation via la fonction verify(). C'est idéal pour les écrans de connexion et les tunnels de paiement.

CheckoutScreen.tsxtsx

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

Recommandé : utilisez le mode Zero-PII sur mobile

Les empreintes de navigateur collectées dans une WebView sont moins fiables que dans un vrai navigateur. Nous recommandons d'activer zeroPii={true} pour les applications React Native : le fingerprinting est alors désactivé et la détection repose entièrement sur les signaux comportementaux.