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

Duo Liang, 6 de Marzo de 2019

OneSpan Sign Developer: Designer Customization and Integration – Part 3

En los últimos dos blogs, hemos visto aspectos básicos de personalización e integración con Designer Session en Parte 1 , y luego se centró en los Perfiles de diseñador y en cómo usar pancartas en Parte 2 .

La tercera parte de esta serie de blogs en curso incluirá un proyecto de demostración que muestra cómo desarrollar con una página de diseñador en un flujo de trabajo común. Explicaremos cómo puede manejar el evento de finalización y facilitar todo el proceso desde la creación del paquete hasta la firma incrustada.

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

Paso 1:

Le proporcionaremos un formulario HTML que le pedirá al usuario que ingrese la información básica del paquete antes de hacer clic en el botón "Crear diseñador". El código de front-end solicitará a nuestro back-end que cree un paquete con la información especificada y lo devuelva con un enlace de diseñador.

Paso 2:

Una vez que se devuelve la URL del diseñador, podemos crear un iFrame en el lado derecho de la pantalla. El usuario puede cargar documentos y agregar destinatarios aquí.

Tenga en cuenta que hemos eliminado el botón "Enviar" en la página del diseñador. En cambio, se agregó un botón personalizado fuera del iFrame. Esta es una práctica recomendada cuando necesita activar el evento de finalización o enviar actividad de su paquete, ya que el botón de envío predeterminado no le devolverá ninguna notificación de front-end.

Otra práctica comúnmente vista es incrustar al diseñador en un modelo emergente y proporcionar un botón "X" en la esquina superior derecha.

Una vez que el usuario hace clic en el botón personalizado "Enviar paquete", nuestro código de front-end volverá a solicitar nuestro back-end para validar y enviar el paquete y devolver un enlace URL de firma.

Paso 3:

Después de validar el paquete, se enviará y se devolverá un enlace de ceremonia de firma en persona a la página HTML.

EL CÓDIGO

Puedes 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 " Crear una aplicación web PHP simple "Para aprender a ejecutar una aplicación web PHP simple.

Para ajustarse a la información de su propia 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 el paso 1, utilizamos la API a continuación para crear un paquete de firma en persona sin ningún documento ni firmante. Si no está familiarizado con la función básica de creación de paquetes, consulte nuestro Guía de inicio rápido .

Solicitud HTTP
POST / api / paquetes
Encabezados HTTP
Autorización: Basic api_key
Aceptar: aplicación / json
Solicitar carga útil
{
	"Tipo": "PAQUETE",
	 "Estado": "BORRADOR",
	 "Nombre": {pkgName},
	 "Descripción": {pkgDesc},
	 "Configuración": {
		 "Ceremonia": {
			 "InPerson": "verdadero"
		}
	}
}
Carga útil de respuesta
{
    "id": "9sKhW-h-qS9m6Ho3zRv3n2a-rkI ="
}

En el paso 2, la carga de documentos y la adición de firmantes se realizaron por completo en la página del Diseñador. También puede recopilar e inyectar esta información en el paso 1.

Para enviar un paquete, consulte nuestro " Modificar estado de un paquete "Guía.

En el paso 3, debido a que es una firma en persona, creamos un token de autenticación de firmante para nuestro remitente utilizando la API a continuación:

Solicitud HTTP
POST / api / autenticaciónTokens / signer / multiUse
Encabezados HTTP
Aceptar: aplicación / json
Tipo de contenido: application / json
Autorización: Basic api_key
Solicitar carga útil
{
    "packageId": "5vjLRY5MWrDJ6MzRAEyCKOy5IH0 =",
    "signerId": "8b734331-bc5b-4843-9784-d4ece4b7dc22"
}
Carga útil de respuesta
{
   "packageId": "5vjLRY5MWrDJ6MzRAEyCKOy5IH0 =",
   "signerId": "8b734331-bc5b-4843-9784-d4ece4b7dc22",
   "value": "ZDNmMDNiNGUtNGYxOC00YWZiLTkwMmUtNWE5YmIwZTRjZDg1"
}

Nota: en un escenario de firma en persona, la ceremonia de firma comenzará con el firmante utilizado para generar el token de autenticación.

A través de este blog, hemos completado un proceso de integración muy básico desde la recopilación de información del paquete hasta la creación y diseño del paquete. A partir de ahí, incorporamos la ceremonia de firma y explicamos cómo activar manualmente el evento de finalización para permitir que su aplicación tome el control del proceso una vez más.

Si tiene alguna pregunta sobre este blog o cualquier otra cosa relacionada con la integración de OneSpan Sign en su aplicación, visite el Foros de la comunidad de desarrolladores .