OneSpan Sign-Entwickler: WebView-Unterstützung in Android-Geräten

Duo Liang, 26. Mai 2021

OneSpan Sign New Signer Experience bietet responsives Webdesign für Desktop- und Mobilgeräte. Unabhängig davon, ob Ihr Empfänger mit einem Desktop, einem Laptop, einem Tablet oder einem Mobiltelefon prüft, erlebt er den konsistenten Quellinhalt mit Elementlayout, Textgröße, Navigation und Bildern, die automatisch an das Gerät des Benutzers angepasst werden

Dies könnte auch mobilen Entwicklern zugute kommen, die zusätzlich zur Integration mit den OneSpan Sign Mobile SDKs nun auch die Möglichkeit haben, diese Funktion zu nutzen und die Signier-URL direkt in eine WebView zu laden.

In diesem Blog demonstrieren wir anhand eines funktionierenden Beispielcodes, wie Sie eine WebView zu Ihrer mobilen App hinzufügen und den Signierfluss durch Überwachung des Javascript Event Notifier vollständig kontrollieren können. Ohne weitere Verzögerung, lassen Sie uns anfangen!

5-26-1

Voraussetzungen

Um das heutige Lernen zu erleichtern, stellen Sie sicher, dass Sie die folgenden Aufgaben erledigt haben:

  1. Aktivieren Sie "New Signer Experience" in Ihrem Konto
  2. Laden Sie den Beispielcode von dieser Codefreigabeherunter

Der in diesem Blog gezeigte Beispielcode ist ein Android-Projekt in Kotlin. Wenn Sie also zum ersten Mal eine Android-App erstellen, sollten Sie zuerst diese Anleitung durchgehen. In den folgenden Abschnitten werden wir den Beispielcode in einzelne Teile zerlegen. Folgen Sie den nachfolgenden Erläuterungen und passen Sie den Code entsprechend an.

Schritt 1: Hinzufügen einer WebView im Aktivitätslayout

Android WebView ist eine einbettbare Komponente, die zum Laden und Anzeigen von Webseiten als Teil Ihres Aktivitätslayouts verwendet wird, ohne dass Sie einen Webbrowser öffnen müssen. Dies ist praktisch, wenn Sie den Browser-fokussierten Code innerhalb Ihrer nativen mobilen App wiederverwenden möchten

In unserem Projekt haben wir eine Aktivität mit dem Namen "WebviewActivity" erstellt, die eine WebView enthält, indem wir den folgenden Code zum Layout-XML "activity_webview.xml" hinzugefügt haben:

Um mehr über das Android-Layout und die verfügbaren Parameter zu erfahren, lesen Sie diesen Leitfaden. Einmal in der WebView identifiziert, können wir die WebView lokalisieren und die gewünschte URL innerhalb der onCreate()-Funktion der Aktivität laden:

        webView = findViewById(R.id.webview) webView.loadUrl(intent.getStringExtra("URL").toString())

Schritt 2: Anpassen der WebView

Dies ist ausreichend, um das Erlebnis "Neuer Unterzeichner" anzuzeigen. Wenn Sie benachrichtigt werden möchten, sobald der Unterzeichner die Unterzeichnung abgeschlossen hat, und den Ablauf der Unterzeichnung steuern möchten, können Sie das Javascript aktivieren und die WebView mit dem unten stehenden Code anpassen:

        webView.settings.javaScriptEnabled = true webView.settings.setSupportMultipleWindows(true) webView.settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW) webView.settings.allowContentAccess = true webView.settings.allowFileAccess = true

Schritt 3: Javascript-Benachrichtiger handhaben

Die Javascript-Bridge ist ein von WebView bereitgestellter Mechanismus, der die Kommunikation zwischen dem JavaScript-Code und dem client-seitigen Android-Code ermöglicht. Durch das Erstellen einer Schnittstelle, die mit der Annotation "@JavascriptInterface" versehen ist, können Sie Kotlin/Java-Funktionen für den Zugriff aus JavaScript bereitstellen.

Die New Signer Experience macht sich diesen Mechanismus zunutze und versucht, die clientseitige Funktion "postMessage" aufzurufen, wenn ein Ereignis von Interesse ausgelöst wird. Im Folgenden finden Sie ein Beispiel, wie Sie diese Javascript-Schnittstelle implementieren könnten:

class WebAppInterface(val webView: WebView, val activity: WebviewActivity) { @JavascriptInterfacefun postMessage(message: String, origin: String) { Log.d("webview-events", "message ----$message") if (message == "ESL:MESSAGE:REGISTER"){ webView.post( Runnable { webView?.evaluateJavascript("window.parent.postMessage('ESL:MESSAGE:ACTIVATE_EVENTS');", null) }) }else if(message == "ESL:MESSAGE:SUCCESS:SIGNER_COMPLETE"){ //some code here...
        }    }}

Und vergessen Sie nicht, die Schnittstelle mit Ihrem WebView-Objekt zu verknüpfen:

webView.addJavascriptInterface(WebAppInterface(webView, this), "android")

Ähnlich wie der OneSpan Sign Javascript Event Notifier im Desktop-Browser würden Sie Ihr System so konfigurieren, dass es auf das Ereignis "ESL:MESSAGE:REGISTER" hört und dann die Nachricht "ESL:MESSAGE:ACTIVATE_EVENTS" zurücksendet, um weitere Benachrichtigungen zu erhalten. In unserem Code teilt der erste Schaltfall OneSpan Sign explizit mit, dass wir uns für das Abhören von Ereignissen registrieren möchten.

Schritt 4: Dokument-Download abwickeln

Ohne zusätzliche Konfiguration wird beim Tippen auf die Download-Schaltfläche in der WebView-Seite die Datei nicht im Download-Ordner gespeichert, wie es ein echter Browser tut. Um den Download des Dokuments zu handhaben, kann hier also die Klasse WebViewClient verwendet werden, um das Laden der URL abzufangen:

private class MyWebViewClient : WebViewClient() { ...... } webView.webViewClient = MyWebViewClient()

Insbesondere werden wir zwei Ereignisse überschreiben, "onPageFinished" und "onLoadResource":

override fun onPageFinished(view: WebView?, url: String?) { view?.evaluateJavascript( "JSON.parse(window.sessionStorage.getItem('session')).host", ValueCallback { result -> Log.d("Webview", "Session Storage ----$result") if (result != null) { sessionToken = result.substring(1,result.length - 1) } }) } override fun onLoadResource(view: WebView?, url: String?) { //wenn url vom Typ /pdf /zip ist. Erstellen Sie eine Anfrage und laden Sie die Datei herunter, wo immer Sie wollen if (url?.contains("/pdf") == true || url?.contains("/zip") == true){ //Download-Operationen hier mit dem Token aus dem Sitzungsspeicher durchführen } }

In der Funktion "onPageFinished" haben wir das Session-Token des Unterzeichners abgerufen und zwischengespeichert. Diese wird später verwendet, um den Download-Vorgang durchzuführen, wenn der Unterzeichner auf die Download-Schaltfläche tippt und die Funktion "onLoadResource" auslöst.

Testen Sie den Code

Nachdem Sie den Signierlink ersetzt und die im Beispielcode verbliebenen Stub-Funktionen ausgefüllt haben, sind Sie bereit, die App auf einem echten Gerät oder einem Emulator auszuführen. Sie können die Unterzeichnung abschließen, durch die Dokumente navigieren, auf Download-Schaltflächen klicken, die Seite vergrößern und verkleinern, die Unterzeichnung ablehnen und so viele Testfälle durchführen, wie Sie möchten

Insbesondere gibt es ein paar Dinge, auf die Sie im Konsolenprotokoll achten müssen:

  • Beim ersten Laden der Signierzeremonie sollten Sie die erste Ereignisbenachrichtigung "ESL:MESSAGE:REGISTER" finden können.

5-26-2

  • Andere Ereignisbenachrichtigungen wie Signer complete ("ESL:MESSAGE:SUCCESS:SIGNER_COMPLETE"), Signer decline ("ESL:MESSAGE:SUCCESS:PACKAGE_DECLINE") sollten gut funktionieren und so kann Ihre App den Signierfluss steuern.
  • Wenn Sie auf die Download-Schaltflächen geklickt haben, sollte die Funktion onLoadResource() in der Lage sein, den Download-Link zu erfassen und die Stub-Funktion aufzurufen, um die Download-Operationen durchzuführen.

5-26-3

Damit ist der heutige Blog beendet. Inzwischen sollten Sie in der Lage sein, ein WebView in Ihre mobile App zu integrieren, die Javascript-Bridge einzuschalten und das Dokument-Download-Ereignis erfolgreich zu behandeln.

Wenn Sie Fragen zu diesem Blog oder andere Fragen zur Integration von OneSpan Sign in Ihre Anwendung haben, besuchen Sie die Foren der Entwickler-Community. Ihr Feedback ist uns wichtig!