WebView móvil

Una aplicación nativa muestra las mismas páginas alojadas que el SDK web dentro de un WebView. Un WebView nativo no es un sitio web, así que no necesita una entrada en Integración: esa configuración solo controla qué sitios web pueden incrustar sus páginas.

1. Su servidor crea la verificación con la API REST y devuelve a la aplicación el token alojado. Nunca incluya una clave de API en una aplicación.

2. La aplicación abre https://<certivant-host>/verify/<token>?embed=1 en un WebView con la cámara y el micrófono permitidos.

3. Con ?embed=1, la página envía a la aplicación host el sobre versionado:

   { "source": "certivant", "version": 1, "type": "step", "payload": { "step": "upload" } }
   

Los tipos de evento y sus cargas útiles son los mismos que los eventos del SDK web. Compruebe siempre que source === "certivant" y version === 1, y actúe solo con los mensajes del WebView que usted creó.

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))}
/>

Declare CAMERA y RECORD_AUDIO en el manifiesto de Android, y NSCameraUsageDescription / NSMicrophoneUsageDescription en Info.plist, y solicite los permisos en tiempo de ejecución antes de mostrar la pantalla.

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'));

Use permission_handler para las solicitudes de cámara, micrófono y ubicación.

Código de ejemplo

Hay envoltorios listos para adaptar en el repositorio, en samples/certivant-embed/ (react-native/ y flutter/), junto a los ejemplos móviles de Live ID para Android, iOS y .NET MAUI.