React Native integráció

Integrálja a SilentShieldet React Native alkalmazásokba egy WebView-alapú wrapperrel. A widget egy könnyű WebView-ban fut, és a React Native üzenethídján keresztül kommunikál az alkalmazásával.

Telepítés

Early Access

A React Native csomag jelenleg early accessben van — kérje a [email protected] címen; az npm-kiadás később következik. Az alábbi példák az early access csomag API-ját mutatják.

npmbash

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

iOS: telepítse a CocoaPods-t

A telepítés után futtassa a cd ios && pod install parancsot a natív WebView-függőség összekapcsolásához.

Komponens használata

A SilentShield integrálásának legegyszerűbb módja a <SilentShield /> komponens:

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-referencia

Prop	Type	Required	Leírás
apiKey	string	Igen	Az Ön SilentShield API-kulcsa
baseUrl	string	Igen	A SilentShield API alap-URL-je
onVerdict	(result) => void	Igen	Callback az ítélet eredményével
onError	(error) => void	Nem	Hiba-callback
onReady	() => void	Nem	Akkor hívódik meg, amikor a widget betöltődött
lang	string	Nem	Nyelvkód (alapértelmezés: "en")
zeroPii	boolean	Nem	Zero-PII mód bekapcsolása (ujjlenyomatozás nélkül)
theme	"light" \| "dark" \| "auto"	Nem	Widget-téma
invisible	boolean	Nem	Widget elrejtése, programozott ellenőrzés

Hook használata (programozottan)

Láthatatlan ellenőrzéshez vagy egyéni UI-folyamatokhoz használja a useSilentShield() hookot:

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

Láthatatlan mód

Láthatatlan módban a WebView nulla magassággal és nulla átlátszatlansággal jelenik meg. A viselkedéskövetés a háttérben fut, az ellenőrzést pedig programozottan, a verify() függvénnyel indítja el. Ez ideális bejelentkezési képernyőkhöz és fizetési folyamatokhoz.

CheckoutScreen.tsxtsx

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

Ajánlott: Zero-PII mód mobilon

A WebView-n belül gyűjtött böngésző-ujjlenyomatok kevésbé megbízhatók, mint egy valódi böngészőben. React Native alkalmazásokhoz a zeroPii={true} bekapcsolását javasoljuk, amely letiltja az ujjlenyomatozást, és kizárólag a viselkedési jelekre támaszkodik.