IntegrazioneWebView mobile

WebView mobile

Mostri una verifica Certivant in un'app React Native o Flutter — impostazioni della WebView, permessi della fotocamera e gli stessi eventi del web SDK, con codice di esempio.

Un'app nativa mostra le stesse pagine ospitate del web SDK in una WebView. Una WebView nativa non è un sito web, quindi non richiede alcuna voce in Integrazione — tale impostazione controlla solo quali siti web possono incorporare le Sue pagine.

  1. Il Suo server crea la verifica con la REST API e restituisce all'app il token ospitato. Non includa mai una chiave API in un'app.

  2. L'app apre https://<host-certivant>/verify/<token>?embed=1 in una WebView con fotocamera e microfono consentiti.

  3. Con ?embed=1 la pagina invia la busta versionata all'app ospitante:

    { "source": "certivant", "version": 1, "type": "step", "payload": { "step": "upload" } }
    
PiattaformaDove arriva il messaggio
React Native (react-native-webview)onMessage — event.nativeEvent.data è il testo JSON
Flutter (webview_flutter)il canale JavaScript CertivantBridge — onMessageReceived
iOS WKWebViewWKScriptMessageHandler registrato come certivant
Android WebViewaggiunga un'interfaccia JavaScript chiamata CertivantBridge con postMessage(String)

I tipi di evento e i payload sono gli stessi degli eventi del web SDK. Verifichi sempre source === "certivant" e version === 1, e agisca solo sui messaggi provenienti dalla WebView che ha creato.

React Native

<WebView
  source={{ uri: `https://app.certivant.com/verify/${token}?embed=1` }}
  originWhitelist={["https://app.certivant.com"]}
  javaScriptEnabled
  domStorageEnabled
  allowsInlineMediaPlayback
  mediaPlaybackRequiresUserAction={false}
  mediaCapturePermissionGrantType="grant"
  geolocationEnabled
  onMessage={(e) => handle(JSON.parse(e.nativeEvent.data))}
/>

Dichiari CAMERA e RECORD_AUDIO nel manifest Android e NSCameraUsageDescription / NSMicrophoneUsageDescription in Info.plist, e richieda i permessi a runtime prima di mostrare la schermata.

Flutter

final controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel('CertivantBridge',
      onMessageReceived: (m) => handle(jsonDecode(m.message)))
  ..setOnPlatformPermissionRequest((request) => request.grant())
  ..loadRequest(Uri.parse('https://app.certivant.com/verify/$token?embed=1'));

Usi permission_handler per le richieste di fotocamera, microfono e posizione.

Codice di esempio

Wrapper pronti da adattare si trovano nel repository sotto samples/certivant-embed/ (react-native/ e flutter/), accanto agli esempi mobili Live ID per Android, iOS e .NET MAUI.

Per una verifica ospitata lo stato finale complete è submitted — la decisione segue. Usi i webhook sul Suo server per conoscere l'esito.