Integrare React Native

Integrați SilentShield în aplicațiile React Native printr-un wrapper bazat pe WebView. Widgetul rulează într-un WebView ușor și comunică cu aplicația dvs. prin puntea de mesaje React Native.

Instalare

Early Access

Pachetul React Native este momentan în early access — solicitați-l la [email protected]; publicarea pe npm va urma. Exemplele de mai jos arată API-ul pachetului din early access.

npmbash

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

iOS: instalați CocoaPods

După instalare, rulați cd ios && pod install pentru a lega dependența nativă WebView.

Utilizarea componentei

Cea mai simplă modalitate de a integra SilentShield este componenta <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>
  );
}

Referință props

Prop	Type	Required	Descriere
apiKey	string	Da	Cheia dvs. API SilentShield
baseUrl	string	Da	URL-ul de bază al API-ului SilentShield
onVerdict	(result) => void	Da	Callback cu rezultatul verdictului
onError	(error) => void	Nu	Callback pentru erori
onReady	() => void	Nu	Apelată când widgetul s-a încărcat
lang	string	Nu	Codul limbii (implicit: "en")
zeroPii	boolean	Nu	Activează modul Zero-PII (fără amprentare)
theme	"light" \| "dark" \| "auto"	Nu	Tema widgetului
invisible	boolean	Nu	Ascunde widgetul, verificare programatică

Utilizarea hook-ului (programatic)

Pentru verificare invizibilă sau fluxuri UI personalizate, folosiți hook-ul 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>
  );
}

Mod invizibil

În modul invizibil, WebView-ul este randat cu înălțime și opacitate zero. Urmărirea comportamentului rulează în fundal, iar verificarea o declanșați programatic prin funcția verify(). Este ideal pentru ecrane de autentificare și fluxuri de checkout.

CheckoutScreen.tsxtsx

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

Recomandat: folosiți modul Zero-PII pe mobil

Amprentele browserului colectate într-un WebView sunt mai puțin fiabile decât într-un browser real. Vă recomandăm să activați zeroPii={true} pentru aplicațiile React Native; astfel amprentarea este dezactivată, iar detectarea se bazează în întregime pe semnale comportamentale.