OneSpan Sign Developer: Personalización e integración del diseñador - Parte 4

Duo Liang, 13 de Marzo de 2019

OneSpan Sign Developer: Designer Customization and Integration – Part 4

En Parte 3 de esta serie de blogs, demostramos uno de los flujos de trabajo recomendados que incluyen una página de diseñador personalizada. En ese proyecto, utilizamos un botón externo para activar el evento de finalización en lugar del botón enviado por defecto.

Hoy, mostraremos otro método para manejar el evento de finalización para hacer un proceso coherente. Además de eso, nuestro proyecto se ampliará para mostrar la información del paquete. Esto puede ser útil cuando buscas códigos de muestra para desarrollar tu propio tablero.

Flujo de trabajo de personalización del diseñador en OneSpan Sign

Paso 1:

Similar a la demostración en la Parte 3, se presentó una página de formulario pidiendo información básica del paquete. Una vez que se hace clic en el botón "Crear paquete", el front-end solicitará a nuestro back-end que cree un paquete de firma en persona. 3-13-1

Paso 2:

En lugar de abrir directamente una página de diseñador, OneSpan Sign presenta una página de detalles del paquete similar a nuestro portal web. Aquí, puede agregar sus propias extensiones para realizar funciones tales como la manipulación de paquetes, la recopilación de información del firmante o la carga de documentos. 3-13-2

Paso 3:

Después de que el usuario confirmó la información y presionó el botón "Design Package", se activó un modal con la sesión de Designer incrustada. Para simplificar el proceso, los usuarios seguirán utilizando Designer para completar todo el paso de diseño del paquete. 3-13-3

Nota que hicimos algo diferente en este paso en comparación con la demostración en la parte 3.

Inhabilitamos el clic al fondo del modal usando el siguiente código, por lo que la única forma de salir del Diseñador (independientemente de si el paquete se envió o no) fue haciendo clic en el botón "X" en la esquina superior derecha. De esta forma, limitamos y garantizamos el flujo de trabajo del usuario final. Esto lleva a otra diferencia notable; mantuvimos el "botón de envío" predeterminado.

            $ ('# modal-fullscreen'). modal ({
                telón de fondo: 'estático',
                teclado: falso
            });

Cuando el usuario envía el paquete y hace clic en el botón de salida de acuerdo con el proceso esperado, podemos activar otra solicitud para consultar el estado del paquete. Incluso si los usuarios finales hicieron clic en el botón de salida sin enviar el paquete, OneSpan Sign sabe que el paquete no se envió y aún así ofrece a los usuarios finales la oportunidad de regresar a la página del Diseñador. 3-13-4

Paso 4:

En el momento en que el usuario hace clic en el botón de salida, consultamos el paquete nuevamente y podemos activar el cambio de estado que consultará el estado del paquete. En nuestro proyecto, cuando el remitente vuelve a la página de información del paquete, podemos volver a mostrar la página y ver los documentos actualizados y las listas de destinatarios. 3-13-5

Cuando se hace clic en el botón "Ceremonia de firma", podemos crear un enlace de firma en persona y llevarlos a la sesión de la ceremonia de firma. 3-13-6

EL CÓDIGO

La demostración está alojada en nuestro código compartido , que fue escrito en PHP y con el método REST. Si es la primera vez que trabaja con PHP, consulte este blog " Crear una aplicación web PHP simple "Para aprender a ejecutar una aplicación web PHP simple.

Para ajustar la información de su cuenta, simplemente cambie los parámetros correspondientes en el archivo "ESLPackageCreation.php". El punto de partida del proyecto es el archivo "index.html".

API RELACIONADA

En esta demostración, es particularmente importante utilizar el Cambio de estado del paquete para activar el evento de finalización. Esta es una forma de sondeo activo, que se ve comúnmente en su proceso de integración. Use la API a continuación para recuperar los metadatos de su paquete, y luego puede analizar el estado del paquete desde la carga útil de JSON.

Recuperar paquete JSON
Solicitud HTTP
GET / api / packages / {packageId}
Encabezados HTTP
Aceptar: aplicación / json; esl-api-version = 11.21
Autorización: Basic api_key

Para obtener una descripción completa de cada campo en respuesta, puede consultar la tabla de propiedades JSON al final de " Crear y enviar un paquete "Guía. Además, consulte Nota de lanzamiento 10.6.1 por razones para llevar "esl-api-version" en el encabezado de la solicitud.

Personalización del diseñador y flujos de trabajo sugeridos

A través de este blog, presentamos otro flujo de trabajo sugerido para integrar con Designer. También puede encontrar el código fuente que representa la información del paquete, que es muy ampliable para otros escenarios de integración.

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.

La serie de blogs de personalización e integración de diseñadores: