Desarrolladores de OneSpan Sign: Soporte de WebView en dispositivos Android

OneSpan Sign New Signer Experience cuenta con un diseño web adaptable a dispositivos móviles y de escritorio. Tanto si su destinatario revisa el contenido con un ordenador de sobremesa, un portátil, una tableta o un teléfono móvil, experimentará el mismo contenido de origen con el diseño de los elementos, el tamaño del texto, la navegación y las imágenes ajustados automáticamente al dispositivo del usuario

Esto también podría beneficiar a los desarrolladores móviles que además de integrarse con los SDKs de OneSpan Sign Mobile, ahora los desarrolladores pueden aprovechar esta característica y cargar directamente la URL de firma en una WebView.

En este blog, vamos a demostrar un código de ejemplo de trabajo de cómo agregar un WebView a su aplicación móvil y controlar totalmente el flujo de la firma mediante la supervisión del notificador de eventos de Javascript. Sin más dilación, ¡comencemos!

Requisitos previos

Para facilitar el aprendizaje de hoy, asegúrate de haber realizado las siguientes tareas:

1. Habilitar la experiencia del nuevo firmante en su cuenta
2. Descargue el código de ejemplo de este Code Share

El código de ejemplo que se muestra en este blog es un proyecto Android en Kotlin, por lo que si es la primera vez que construyes una aplicación Android, repasa primero esta guía. En las siguientes secciones, desglosaremos el código de ejemplo por partes. Siga las explicaciones siguientes y ajuste el código en consecuencia.

Paso 1: Añadir una WebView en el diseño de la actividad

Android WebView es un componente incrustado que se utiliza para cargar y mostrar páginas web como parte del diseño de su actividad sin tener que abrir un navegador web. Esto es muy útil cuando se quiere reutilizar el código centrado en el navegador dentro de la aplicación móvil nativa

En nuestro proyecto, hemos creado una actividad llamada "WebviewActivity" que contiene una WebView añadiendo el código siguiente al layout XML "activity_webview.xml":

Para saber más sobre el diseño de Android y los parámetros disponibles, revisa esta guía. Una vez identificado en el WebView, podemos localizar el WebView y cargar la URL deseada dentro de la función onCreate() de la actividad:

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

Paso 2: Personalizar la WebView

Esto es suficiente para mostrar la experiencia del nuevo firmante. Si desea recibir una notificación cuando el firmante haya terminado de firmar y controlar el flujo de la firma, puede habilitar el Javascript y personalizar la WebView con el siguiente código:

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

Paso 3: Manejar el notificador de Javascript

El puente Javascript es un mecanismo proporcionado por WebView que permite la comunicación entre el código JavaScript y el código Android del lado del cliente. Creando una interfaz etiquetada con la anotación "@JavascriptInterface", puedes exponer funciones Kotlin/Java para que sean accesibles desde JavaScript.

La Experiencia del Nuevo Firmante aprovecha este mecanismo e intenta invocar la función del lado del cliente "postMessage" cuando se activa un evento de interés. A continuación se muestra un ejemplo de cómo se podría implementar esta interfaz de 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"){ /algún código aquí...
        }    }}

Y no olvides vincular la interfaz a tu objeto WebView:

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

Al igual que el notificador de eventos de OneSpan Sign Javascript en el navegador de escritorio, usted configuraría su sistema para escuchar el evento "ESL:MESSAGE:REGISTER" y luego enviaría el mensaje "ESL:MESSAGE:ACTIVATE_EVENTS" para recibir más notificaciones. En nuestro código, el primer caso de cambio le dice explícitamente a OneSpan Sign que queremos registrarnos para escuchar eventos.

Paso 4: Gestionar la descarga de documentos

Sin una configuración adicional, al pulsar el botón de descarga en la página WebView no se almacenará el archivo en la carpeta de descargas como hace un navegador real. Por lo tanto, para manejar la descarga del documento, la clase WebViewClient puede ser utilizada aquí para interceptar la carga de la URL:

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

En particular, anularemos dos eventos, "onPageFinished" y "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 la url es del tipo /pdf /zip. crea una petición y descarga el archivo donde quiera si (url?.contains("/pdf") == true || url?.contains("/zip") == true){ /Realiza aquí las operaciones de descarga utilizando el token del Almacenamiento de la Sesión } }

Dentro de la función "onPageFinished", recuperamos y almacenamos en caché el token de sesión del firmante. Esto se utilizará posteriormente para realizar la operación de descarga cuando el firmante pulse el botón de descarga y active la función "onLoadResource".

Probar el código

Después de reemplazar el enlace de firma y rellenar las funciones stub que quedan en el código de ejemplo, estás listo para ejecutar la aplicación en un dispositivo real o en un emulador. Puede seguir adelante y terminar la firma, navegar por los documentos, hacer clic en los botones de descarga, acercar y alejar la página, rechazar la firma y realizar todos los casos de prueba que desee

En particular, hay algunas cosas a las que debes prestar atención en el registro de la consola:

• Debería encontrar la notificación inicial del evento "ESL:MESSAGE:REGISTER" la primera vez que cargue la ceremonia de firma.

• Otras notificaciones de eventos como firmante completo ("ESL:MESSAGE:SUCCESS:SIGNER_COMPLETE"), declive del firmante ("ESL:MESSAGE:SUCCESS:PACKAGE_DECLINE") deberían funcionar bien y así tu aplicación podrá controlar el flujo de la firma.
• Al hacer clic en los botones de descarga, la función onLoadResource() debería ser capaz de capturar el enlace de descarga e invocar la función stub para realizar las operaciones de descarga.

Con esto concluye el blog de hoy. A estas alturas, deberías ser capaz de integrar una WebView en tu aplicación móvil, activar el puente de Javascript y manejar con éxito el evento de descarga del documento.

Si tiene alguna pregunta sobre este blog o cualquier otra cosa relacionada con la integración de OneSpan Sign en su aplicación, visite los foros de la comunidad de desarrolladores. Su opinión nos importa