React Native integracija

Integruokite SilentShield į „React Native“ programėles naudodami WebView pagrįstą apvalkalą. Valdiklis veikia lengvame WebView ir bendrauja su jūsų programėle per „React Native“ pranešimų tiltą.

Diegimas

Early Access

„React Native“ paketas šiuo metu yra ankstyvosios prieigos etape — kreipkitės [email protected]; npm leidimas bus vėliau. Toliau pateikti pavyzdžiai rodo ankstyvosios prieigos paketo API.

npmbash

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

iOS: įdiekite CocoaPods

Įdiegę paleiskite cd ios && pod install, kad susietumėte vietinę WebView priklausomybę.

Komponento naudojimas

Paprasčiausias būdas integruoti SilentShield – komponentas <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 žinynas

Prop	Type	Required	Aprašymas
apiKey	string	Taip	Jūsų SilentShield API raktas
baseUrl	string	Taip	SilentShield API bazinis URL
onVerdict	(result) => void	Taip	Atgalinio skambučio funkcija su verdikto rezultatu
onError	(error) => void	Ne	Klaidos atgalinio skambučio funkcija
onReady	() => void	Ne	Iškviečiama, kai valdiklis įkeltas
lang	string	Ne	Kalbos kodas (numatytasis: "en")
zeroPii	boolean	Ne	Įjungti Zero-PII režimą (be pirštų atspaudų)
theme	"light" \| "dark" \| "auto"	Ne	Valdiklio tema
invisible	boolean	Ne	Paslėpti valdiklį, tikrinti programiškai

Hook naudojimas (programiškai)

Nematomam patikrinimui arba savo UI eigoms naudokite 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>
  );
}

Nematomas režimas

Nematomu režimu WebView atvaizduojamas su nuliniu aukščiu ir nuliniu neskaidrumu. Elgsenos stebėjimas vyksta fone, o patikrinimą paleidžiate programiškai funkcija verify(). Tai idealu prisijungimo ekranams ir apmokėjimo eigoms.

CheckoutScreen.tsxtsx

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

Rekomenduojama: mobiliesiems naudokite Zero-PII režimą

Naršyklės pirštų atspaudai, surinkti WebView viduje, yra mažiau patikimi nei tikroje naršyklėje. React Native programoms rekomenduojame įjungti zeroPii={true}: tai išjungia pirštų atspaudų rinkimą, o aptikimas visiškai remiasi elgsenos signalais.