Mobile WebView

Eine native App zeigt dieselben gehosteten Seiten wie das Web-SDK in einer WebView. Eine native WebView ist keine Website und braucht daher keinen Eintrag unter Einbettung — diese Einstellung steuert nur, welche Websites Ihre Seiten einrahmen dürfen.

1. Ihr Server erstellt die Verifizierung über die REST-API und gibt das gehostete Token an die App zurück. Liefern Sie niemals einen API-Schlüssel in einer App aus.

2. Die App öffnet https://<certivant-host>/verify/<token>?embed=1 in einer WebView, in der Kamera und Mikrofon erlaubt sind.

3. Mit ?embed=1 sendet die Seite das versionierte Envelope an die Host-App:

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

Ereignistypen und Nutzlasten entsprechen den Web-SDK-Ereignissen. Prüfen Sie immer source === "certivant" und version === 1 und reagieren Sie nur auf Nachrichten aus der von Ihnen erstellten WebView.

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

Deklarieren Sie CAMERA und RECORD_AUDIO im Android-Manifest sowie NSCameraUsageDescription / NSMicrophoneUsageDescription in Info.plist, und fordern Sie die Berechtigungen zur Laufzeit an, bevor Sie den Bildschirm anzeigen.

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

Verwenden Sie permission_handler für die Abfragen zu Kamera, Mikrofon und Standort.

Beispielcode

Sofort anpassbare Wrapper finden Sie im Repository unter samples/certivant-embed/ (react-native/ und flutter/), neben den mobilen Live-ID-Beispielen für Android, iOS und .NET MAUI.