Integrazzjoni ma' React Native

Integra SilentShield f'apps React Native permezz ta' wrapper ibbażat fuq WebView. Il-widget jaħdem ġo WebView ħafif u jikkomunika mal-app tiegħek permezz tal-message bridge ta' React Native.

Installazzjoni

Early Access

Il-pakkett React Native bħalissa jinsab f'early access — itolbu fuq [email protected]; il-pubblikazzjoni fuq npm issegwi. L-eżempji hawn taħt juru l-API tal-pakkett tal-early access.

npmbash

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

iOS: Installa CocoaPods

Wara l-installazzjoni, ħaddem cd ios && pod install biex torbot id-dipendenza nattiva tal-WebView.

Użu tal-komponent

L-aktar mod sempliċi biex tintegra SilentShield huwa bil-komponent <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>
  );
}

Referenza tal-props

Prop	Type	Required	Deskrizzjoni
apiKey	string	Iva	Iċ-ċavetta API ta' SilentShield tiegħek
baseUrl	string	Iva	URL bażi tal-API ta' SilentShield
onVerdict	(result) => void	Iva	Callback bir-riżultat tal-verdett
onError	(error) => void	Le	Callback tal-iżball
onReady	() => void	Le	Jissejjaħ meta l-widget ikun tgħabba
lang	string	Le	Kodiċi tal-lingwa (difolt: "en")
zeroPii	boolean	Le	Jattiva l-modalità Zero-PII (l-ebda fingerprinting)
theme	"light" \| "dark" \| "auto"	Le	Tema tal-widget
invisible	boolean	Le	Jaħbi l-widget, verifika programmatika

Użu tal-hook (programmatiku)

Għal verifika inviżibbli jew flussi tal-UI personalizzati, uża 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à inviżibbli

Fil-modalità inviżibbli, il-WebView jintwera b'għoli u opaċità żero. It-traċċar tal-imġiba jaħdem fl-isfond, u int tibda l-verifika b'mod programmatiku permezz tal-funzjoni verify(). Dan huwa ideali għal skrins tal-login u flussi tal-checkout.

CheckoutScreen.tsxtsx

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

Rakkomandat: uża l-modalità Zero-PII fuq il-mowbajl

Il-fingerprints tal-browser miġbura ġo WebView huma inqas affidabbli milli f'browser veru. Nirrakkomandaw li tattiva zeroPii={true} għall-apps React Native: dan jitfi l-fingerprinting u jiddependi għalkollox fuq sinjali tal-imġiba.