Integrazione React Native

Integri SilentShield nelle app React Native tramite un wrapper basato su WebView. Il widget viene eseguito in una WebView leggera e comunica con la Sua app tramite il bridge dei messaggi di React Native.

Installazione

Early Access

Il pacchetto React Native è attualmente in early access — richiedilo via [email protected]; la pubblicazione su npm seguirà. Gli esempi seguenti mostrano l'API del pacchetto in early access.

npmbash

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

iOS: installare CocoaPods

Dopo l'installazione, esegua cd ios && pod install per collegare la dipendenza nativa di WebView.

Uso del componente

Il modo più semplice per integrare SilentShield è il componente <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>
  );
}

Riferimento delle props

Prop	Type	Required	Descrizione
apiKey	string	Sì	La Sua chiave API SilentShield
baseUrl	string	Sì	URL di base dell'API SilentShield
onVerdict	(result) => void	Sì	Callback con l'esito del verdetto
onError	(error) => void	No	Callback di errore
onReady	() => void	No	Chiamato quando il widget è stato caricato
lang	string	No	Codice lingua (predefinito: "en")
zeroPii	boolean	No	Attiva la modalità Zero-PII (nessun fingerprinting)
theme	"light" \| "dark" \| "auto"	No	Tema del widget
invisible	boolean	No	Nasconde il widget, verifica via codice

Uso dell'hook (via codice)

Per la verifica invisibile o flussi di interfaccia personalizzati, utilizzi l'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>
  );
}

Modalità invisibile

In modalità invisibile, la WebView viene renderizzata con altezza e opacità pari a zero. Il rilevamento del comportamento avviene in background e la verifica viene avviata via codice con la funzione verify(). È ideale per le schermate di accesso e i processi di checkout.

CheckoutScreen.tsxtsx

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

Consigliato: usare la modalità Zero-PII su mobile

I fingerprint del browser raccolti all'interno di una WebView sono meno affidabili che in un browser reale. Per le app React Native consigliamo di attivare zeroPii={true}: il fingerprinting viene disattivato e il rilevamento si basa interamente sui segnali comportamentali.