OneSpan Sign Developer: Incrustar la página de edición de transacciones

En OneSpan Sign, ¿cuál es la forma más fácil de integrar el proceso de preparación de transacciones?

Esta ha sido una pregunta frecuente de muchos de nuestros usuarios integrados. En este blog, mostraremos cómo OneSpan Sign permite a los integradores incrustar la "Página de edición de transacciones" en un iFrame, para que puedan simplificar los pasos de preparación de la transacción dentro de una sola página HTML y dar a los remitentes la posibilidad de crear una transacción desde cero. Además, también incluiremos un proyecto de demostración que muestra cómo desarrollar con una página de edición de transacciones en un flujo de trabajo común. Sin más dilación, ¡comencemos!

Construir una página de edición de transacciones

La página de edición de transacciones ofrece a los usuarios no técnicos la posibilidad de crear y enviar una transacción desde cero con una interfaz intuitiva, que incluye añadir documentos y destinatarios, editar los detalles de la transacción y navegar a la página de diseño donde pueden revisar el documento y colocar firmas y campos

Con la simple creación de una URL de página de edición de transacciones, los integradores pueden incorporar todo el proceso de creación de transacciones con las últimas características a su propia aplicación sin esfuerzos adicionales para construir su propia página de front-end. En esta sección, le indicaremos los pasos para lograrlo:

Paso 0:

Antes de crear un enlace de edición de transacciones, es necesario crear una transacción mínima con al menos un nombre de paquete:

SDK de Java

DocumentPackage transaction = PackageBuilder.newPackageNamed("Test Transaction").build(); PackageId packageId = eslClient.createPackageOneStep(transaction);

SDK DE .NET

DocumentPackage transaction = PackageBuilder.NewPackageNamed("Test Transaction").Build(); PackageId packageId = eslClient.CreatePackageOneStep(transaction);

MÉTODO REST:

Petición HTTP

POST /api/paquetes

Encabezados HTTP

Authorization: Basic api_key Accept: application/json Content-Type: application/json

Solicitud de carga útil

{"nombre": "Transacción de prueba"}

Carga útil de la respuesta

{ "id": "6u9gD7zn9Ide0IHwdLyIRMp033g=" }

Nota:

• En esta llamada a la API, puede establecer el tipo de contenido como "application/json" en lugar de "multipart/form-data", en comparación con la creación normal de paquetes.

Paso 1:

Una vez creada la transacción, el primer paso es crear un token de autentificación del remitente:

SDK de Java

String senderAuthenticationToken = client.getAuthenticationTokensService().createSenderAuthenticationToken(packageId);

SDK DE .NET

string senderAuthenticationToken = client.AuthenticationTokenService.CreateSenderAuthenticationToken(packageId);

MÉTODO REST:

Petición HTTP

POST /api/authenticationTokens/sender

Encabezados HTTP

Accept: application/json Content-Type: application/json Authorization: Basic api_key

Solicitud de carga útil

{ "packageId": "e937fc75-3c3b-4506-b270-cc7e43f4cf78" }

Carga útil de la respuesta

{ "value": "MjY0MjQ4MzgtMTJlOS00MzhjLTgzODMtMzJmMGNiZTg3ODBl" }

Paso 2:

Con el token de autenticación del remitente creado en el primer paso y el ID del paquete que se le devolvió durante la creación del paquete, construya la siguiente URL para la página de edición de la transacción:

{instance_url}/auth?authenticationToken={senderToken}&target={instance_url}/a/transaction/{packageId}

Un ejemplo real podría ser el siguiente:

https://sandbox.esignlive.com/auth?authenticationToken=MmFlZjgyY2xxxxxxUwNGI0&target=https://sandbox.esignlive.com/a/transaction/6RlLc1fatjabLzzN5js_DRnPLCE=

Ahí está. Ahora está listo para incrustar este enlace en un iFrame y migrar el proceso de preparación de transacciones a su propio flujo de trabajo.

Ejemplo en acción real

En esta sección, demostraremos un proyecto de trabajo y mostraremos uno de los posibles flujos de trabajo que implican la página de edición de transacciones en su propia aplicación.

Paso 1:

Presentaremos un formulario HTML que recoge la información básica de la transacción. Como se ha dicho anteriormente, el requisito mínimo es introducir un nombre de transacción y hacer clic en "Crear transacción"

Paso 2:

El código del front-end solicitará a nuestro back-end que cree un paquete y devuelva el enlace de la página de edición de la transacción. En esta demostración, presentaremos el enlace en un iFrame de anchura porcentual y altura absoluta

Paso 3:

Como hemos mencionado en un blog anterior, eliminaremos el botón "Enviar" en la página de diseño y añadiremos un botón personalizado fuera del iFrame para activar el proceso. Una vez que el usuario hace clic en el botón personalizado "Enviar paquete", nuestro código del front-end volverá a solicitar a nuestro back-end que envíe el paquete. Suponiendo que se trate de un escenario de firma en persona, el iFrame seguirá mostrando la ceremonia de firma en persona.

El Código

Puede encontrar el código de demostración 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 "Creación de una aplicación web PHP sencilla" para aprender a ejecutar una aplicación web PHP sencilla.

Para ajustarse a la información de su propia cuenta, basta con cambiar los parámetros correspondientes en el archivo "ESLPackageCreation.php". El punto de partida del proyecto es el archivo "index.html".

A través de este blog, hemos caminado a través del proceso de generación de un enlace de página de edición de transacciones e incrustar la URL en su propia aplicación para adaptarse a sus casos de uso específicos.

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