React Native integrācija

Integrējiet SilentShield React Native lietotnēs, izmantojot uz WebView balstītu ietvērumu. Logrīks darbojas vieglā WebView un sazinās ar jūsu lietotni caur React Native ziņojumu tiltu.

Instalēšana

Early Access

React Native pakotne pašlaik ir agrīnās piekļuves posmā — pieprasiet to [email protected]; npm publicēšana sekos. Tālāk esošie piemēri rāda agrīnās piekļuves pakotnes API.

npmbash

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

iOS: instalējiet CocoaPods

Pēc instalēšanas palaidiet cd ios && pod install, lai piesaistītu vietējo WebView atkarību.

Komponenta lietošana

Vienkāršākais veids, kā integrēt SilentShield, ir komponents <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 atsauce

Prop	Type	Required	Apraksts
apiKey	string	Jā	Jūsu SilentShield API atslēga
baseUrl	string	Jā	SilentShield API bāzes URL
onVerdict	(result) => void	Jā	Atgriezeniskā izsaukuma funkcija ar sprieduma rezultātu
onError	(error) => void	Nē	Kļūdas atgriezeniskā izsaukuma funkcija
onReady	() => void	Nē	Tiek izsaukts, kad logrīks ir ielādēts
lang	string	Nē	Valodas kods (noklusējums: "en")
zeroPii	boolean	Nē	Iespējot Zero-PII režīmu (bez pirkstu nospiedumiem)
theme	"light" \| "dark" \| "auto"	Nē	Logrīka motīvs
invisible	boolean	Nē	Paslēpt logrīku, pārbaudīt programmatiski

Hook lietošana (programmatiski)

Neredzamai pārbaudei vai pielāgotām UI plūsmām izmantojiet 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>
  );
}

Neredzamais režīms

Neredzamajā režīmā WebView tiek attēlots ar nulles augstumu un nulles necaurredzamību. Uzvedības izsekošana notiek fonā, un pārbaudi jūs aktivizējat programmatiski ar funkciju verify(). Tas ir ideāli piemērots pieteikšanās ekrāniem un norēķinu plūsmām.

CheckoutScreen.tsxtsx

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

Ieteicams: mobilajās ierīcēs izmantojiet Zero-PII režīmu

Pārlūka pirkstu nospiedumi, kas savākti WebView iekšienē, ir mazāk uzticami nekā īstā pārlūkā. React Native lietotnēm iesakām iespējot zeroPii={true}: tas atspējo pirkstu nospiedumu noteikšanu, un atklāšana pilnībā balstās uz uzvedības signāliem.