Les développeurs de panneaux OneSpan : prise en charge de WebView sur les appareils Android

La nouvelle expérience du signataire de OneSpan Sign est dotée d'un design web réactif pour les ordinateurs de bureau et les appareils mobiles. Que votre destinataire consulte un ordinateur de bureau, un ordinateur portable, une tablette ou un téléphone mobile, il bénéficiera d'un contenu source cohérent dont la disposition des éléments, la taille du texte, la navigation et les images seront automatiquement adaptées à l'appareil de l'utilisateur

Cela pourrait également profiter aux développeurs mobiles. En effet, en plus de s'intégrer aux SDK mobiles de OneSpan Sign, les développeurs peuvent désormais tirer parti de cette fonctionnalité et charger directement l'URL de signature dans une WebView.

Dans ce blog, nous allons démontrer un exemple de code fonctionnel sur la façon d'ajouter une WebView à votre application mobile et de contrôler entièrement le flux de signature en surveillant le Javascript Event Notifier. Sans plus attendre, commençons !

Conditions préalables

Pour faciliter l'apprentissage d'aujourd'hui, assurez-vous d'avoir effectué les tâches suivantes :

1. Activez l'expérience du nouveau signataire dans votre compte
2. Téléchargez l'exemple de code à partir de ce Code Share

L'exemple de code présenté dans ce blog est un projet Android en Kotlin, donc si c'est la première fois que vous construisez une application Android, lisez d'abord ce guide. Dans les sections suivantes, nous allons décomposer l'exemple de code en plusieurs parties. Suivez les explications ci-dessous et adaptez le code en conséquence.

Étape 1 : ajout d'un WebView dans la présentation de l'activité

Android WebView est un composant intégrable qui est utilisé pour charger et afficher des pages web dans le cadre de la mise en page de votre activité sans avoir à ouvrir un navigateur web. Cela s'avère pratique lorsque vous souhaitez réutiliser le code centré sur le navigateur dans votre application mobile native

Dans notre projet, nous avons créé une activité nommée "WebviewActivity" qui contient une WebView en ajoutant le code ci-dessous au layout XML "activity_webview.xml" :

Pour en savoir plus sur la disposition d'Android et les paramètres disponibles, consultez ce guide. Une fois identifié dans le WebView, nous pouvons localiser le WebView et charger l'URL désiré dans la fonction onCreate() de l'activité :

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

Étape 2 : personnaliser le WebView

Ceci est suffisant pour afficher l'expérience du nouveau signataire. Si vous souhaitez être informé lorsque le signataire a terminé de signer et contrôler le flux de signature, vous pouvez activer le Javascript et personnaliser le WebView avec le code ci-dessous :

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

Étape 3 : Gérer le Notificateur Javascript

Le pont Javascript est un mécanisme fourni par WebView qui permet la communication entre le code JavaScript et le code Android côté client. En créant une interface marquée de l'annotation "@JavascriptInterface", vous pouvez exposer les fonctions Kotlin/Java pour qu'elles soient accessibles depuis JavaScript.

L'expérience du nouveau signataire tire parti de ce mécanisme et tente d'invoquer la fonction "postMessage" côté client lorsqu'un événement intéressant est déclenché. Vous trouverez ci-dessous un exemple de la manière dont vous pouvez mettre en œuvre cette interface Javascript :

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"){ //quelque code ici...
        }    }}

Et n'oubliez pas de lier l'interface à votre objet WebView :

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

Comme avec le OneSpan Sign Javascript Event Notifier dans le navigateur de bureau, vous devez configurer votre système pour écouter l'événement "ESL:MESSAGE:REGISTER" et renvoyer le message "ESL:MESSAGE:ACTIVATE_EVENTS" afin de recevoir d'autres notifications. Dans notre code, le premier switch case indique explicitement à OneSpan Sign que nous voulons nous enregistrer pour l'écoute d'événements.

Étape 4 : Télécharger le document de traitement

Sans configuration supplémentaire, le fait d'appuyer sur le bouton de téléchargement dans une page WebView ne permettra pas de stocker le fichier dans le dossier de téléchargement comme le fait un vrai navigateur. Ainsi, afin de gérer le téléchargement du document, la classe WebViewClient peut être utilisée ici pour intercepter le chargement de l'URL :

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

En particulier, nous allons remplacer deux événements, "onPageFinished" et "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 ?) { //si l'url est du type /pdf /zip, créez une requête et téléchargez le fichier où vous voulez if (url ?.contains("/pdf") == true || url ?.contains("/zip") == true){ //Performez les opérations de téléchargement ici en utilisant le jeton du stockage de session } }

Dans la fonction "onPageFinished", nous récupérons et mettons en cache le jeton de session du signataire. Elle sera ensuite utilisée pour effectuer l'opération de téléchargement lorsque le signataire aura appuyé sur le bouton de téléchargement et déclenché la fonction "onLoadResource".

Tester le code

Après avoir remplacé le lien de signature et rempli les fonctions d'attente laissées dans l'exemple de code, vous êtes prêt à exécuter l'application sur un appareil réel ou un émulateur. Vous pouvez aller de l'avant et terminer la signature, naviguer dans les documents, cliquer sur les boutons de téléchargement, faire un zoom avant et arrière sur la page, refuser la signature et effectuer autant de cas de test que vous le souhaitez

En particulier, il y a quelques éléments auxquels vous devez prêter attention dans le journal de la console :

• Vous devriez pouvoir trouver la notification initiale de l'événement "ESL:MESSAGE:REGISTER" lors du premier chargement de la cérémonie de signature.

• D'autres notifications d'événements comme la fin de la signature ("ESL:MESSAGE:SUCCESS:SIGNER_COMPLETE"), le déclin de la signature ("ESL:MESSAGE:SUCCESS:PACKAGE_DECLINE") doivent fonctionner correctement et votre application peut ainsi contrôler le flux de signature.
• Lorsque vous avez cliqué sur les boutons de téléchargement, la fonction onLoadResource() devrait pouvoir capturer le lien de téléchargement et invoquer la fonction stub pour effectuer les opérations de téléchargement.

Ceci conclut le blog d'aujourd'hui. À présent, vous devriez être en mesure d'intégrer un WebView à votre application mobile, d'engager le pont Javascript et de gérer avec succès l'événement de téléchargement du document.

Si vous avez des questions concernant ce blog ou toute autre question relative à l'intégration de OneSpan Sign dans votre application, visitez les forums de la communauté des développeurs. Vos commentaires sont importants pour nous!