Интеграция с React Native

Интегрирайте SilentShield в приложения с React Native чрез обвивка, базирана на WebView. Уиджетът работи в олекотен WebView и комуникира с вашето приложение чрез моста за съобщения на React Native.

Инсталиране

Early Access

Пакетът React Native в момента е в ранен достъп — заявете го на [email protected]; публикуването в npm предстои. Примерите по-долу показват API-то на пакета от ранния достъп.

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.

Използване на компонента

Най-лесният начин да интегрирате SilentShield е с компонента <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 на SilentShield API
onVerdict	(result) => void	Да	Callback с резултата от оценката
onError	(error) => void	Не	Callback при грешка
onReady	() => void	Не	Извиква се, когато уиджетът е зареден
lang	string	Не	Код на езика (по подразбиране: "en")
zeroPii	boolean	Не	Включва режима Zero-PII (без снемане на отпечатъци)
theme	"light" \| "dark" \| "auto"	Не	Тема на уиджета
invisible	boolean	Не	Скрива уиджета, проверката се задейства програмно

Използване на hook (програмно)

За невидима проверка или собствени потоци на потребителския интерфейс използвайте 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} — това изключва снемането на отпечатъци и се осланя изцяло на поведенчески сигнали.