WebView mobile

Une application native affiche les mêmes pages hébergées que le SDK web, dans une WebView. Une WebView native n'est pas un site web : elle n'a pas besoin d'être ajoutée à la liste Intégration. Ce paramètre ne contrôle que les sites web autorisés à encadrer vos pages.

1. Votre serveur crée la vérification avec l'API REST et renvoie le jeton hébergé à l'application. Ne livrez jamais de clé d'API dans une application.

2. L'application ouvre https://<certivant-host>/verify/<token>?embed=1 dans une WebView avec la caméra et le microphone autorisés.

3. Avec ?embed=1, la page envoie l'enveloppe versionnée à l'application hôte :

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

Les types d'événements et les charges utiles sont les mêmes que les événements du SDK web. Vérifiez toujours source === "certivant" et version === 1, et n'agissez que sur les messages provenant de la WebView que vous avez créée.

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

Déclarez CAMERA et RECORD_AUDIO dans le manifeste Android, ainsi que NSCameraUsageDescription et NSMicrophoneUsageDescription dans Info.plist, puis demandez les autorisations à l'exécution avant d'afficher l'écran.

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

Utilisez permission_handler pour les demandes d'accès à la caméra, au microphone et à la localisation.

Exemples de code

Des wrappers prêts à adapter se trouvent dans le dépôt, sous samples/certivant-embed/ (react-native/ et flutter/), à côté des exemples mobiles Live ID pour Android, iOS et .NET MAUI.