Ενσωμάτωση React Native

Ενσωματώστε το SilentShield σε εφαρμογές React Native με ένα wrapper βασισμένο σε WebView. Το widget εκτελείται μέσα σε ένα ελαφρύ WebView και επικοινωνεί με την εφαρμογή σας μέσω της γέφυρας μηνυμάτων του React Native.

Εγκατάσταση

Early Access

Το πακέτο React Native βρίσκεται προς το παρόν σε early access — ζητήστε το στο [email protected]· η δημοσίευση στο npm θα ακολουθήσει. Τα παρακάτω παραδείγματα δείχνουν το API του πακέτου early access.

npmbash

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

iOS: Εγκατάσταση CocoaPods

Μετά την εγκατάσταση, εκτελέστε cd ios && pod install για να συνδέσετε την εγγενή εξάρτηση WebView.

Χρήση του component

Ο απλούστερος τρόπος να ενσωματώσετε το SilentShield είναι με το component <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

Prop	Type	Required	Περιγραφή
apiKey	string	Ναι	Το κλειδί API του SilentShield σας
baseUrl	string	Ναι	Βασικό URL του API του SilentShield
onVerdict	(result) => void	Ναι	Callback με το αποτέλεσμα της ετυμηγορίας
onError	(error) => void	Όχι	Callback σφάλματος
onReady	() => void	Όχι	Καλείται όταν φορτωθεί το widget
lang	string	Όχι	Κωδικός γλώσσας (προεπιλογή: "en")
zeroPii	boolean	Όχι	Ενεργοποίηση λειτουργίας Zero-PII (χωρίς fingerprinting)
theme	"light" \| "dark" \| "auto"	Όχι	Θέμα του widget
invisible	boolean	Όχι	Απόκρυψη του widget, προγραμματιστική επαλήθευση

Χρήση του hook (προγραμματιστικά)

Για αόρατη επαλήθευση ή προσαρμοσμένες ροές UI, χρησιμοποιήστε το 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>
  );
}

Αόρατη λειτουργία

Στην αόρατη λειτουργία, το WebView αποδίδεται με μηδενικό ύψος και μηδενική αδιαφάνεια. Η παρακολούθηση συμπεριφοράς εκτελείται στο παρασκήνιο και ενεργοποιείτε την επαλήθευση προγραμματιστικά μέσω της συνάρτησης verify(). Αυτό είναι ιδανικό για οθόνες σύνδεσης και διαδικασίες ολοκλήρωσης αγοράς.

CheckoutScreen.tsxtsx

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

Συνιστάται: χρησιμοποιήστε τη λειτουργία Zero-PII σε κινητά

Τα αποτυπώματα προγράμματος περιήγησης που συλλέγονται μέσα σε ένα WebView είναι λιγότερο αξιόπιστα από ό,τι σε ένα πραγματικό πρόγραμμα περιήγησης. Για εφαρμογές React Native συνιστούμε να ενεργοποιήσετε το zeroPii={true}, το οποίο απενεργοποιεί το fingerprinting και βασίζεται αποκλειστικά σε σήματα συμπεριφοράς.