Integração com React Native

Integre o SilentShield em aplicações React Native através de um wrapper baseado em WebView. O widget é executado numa WebView leve e comunica com a sua aplicação através da ponte de mensagens do React Native.

Instalação

Early Access

O pacote React Native está atualmente em acesso antecipado — solicite-o via [email protected]; a publicação no npm seguirá. Os exemplos abaixo mostram a API do pacote de acesso antecipado.

npmbash

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

iOS: instalar o CocoaPods

Após a instalação, execute cd ios && pod install para ligar a dependência nativa do WebView.

Utilização do componente

A forma mais simples de integrar o SilentShield é com o componente <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>
  );
}

Referência de props

Prop	Type	Required	Descrição
apiKey	string	Sim	A sua API key do SilentShield
baseUrl	string	Sim	URL base da API do SilentShield
onVerdict	(result) => void	Sim	Callback com o resultado do veredicto
onError	(error) => void	Não	Callback de erro
onReady	() => void	Não	Chamado quando o widget é carregado
lang	string	Não	Código de idioma (predefinição: "en")
zeroPii	boolean	Não	Ativa o modo Zero-PII (sem fingerprinting)
theme	"light" \| "dark" \| "auto"	Não	Tema do widget
invisible	boolean	Não	Oculta o widget e verifica por programação

Utilização do hook (por programação)

Para verificação invisível ou fluxos de interface personalizados, utilize o 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>
  );
}

Modo invisível

No modo invisível, a WebView é renderizada com altura e opacidade zero. A análise do comportamento decorre em segundo plano e a verificação é iniciada por programação através da função verify(). É ideal para ecrãs de início de sessão e processos de pagamento.

CheckoutScreen.tsxtsx

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

Recomendado: utilize o modo Zero-PII em dispositivos móveis

As impressões digitais do navegador recolhidas dentro de um WebView são menos fiáveis do que num navegador real. Recomendamos ativar zeroPii={true} nas apps React Native: assim o fingerprinting fica desativado e a deteção baseia-se inteiramente em sinais comportamentais.