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

Como integrador, si desea proporcionar una página HTML front-end para que los usuarios finales diseñen y preparen documentos, existe una capacidad llamada "Diseñador" en OneSpan Sign. Al crear un enlace de diseñador específico, puede incrustar la ubicación de la firma y la experiencia de revisión de documentos en un iFrame. Además, OneSpan Sign también admite configuraciones flexibles para esta interfaz gráfica de usuario que se ajusta a una amplia gama de requisitos.

En este blog, nos sumergiremos en la codificación API / SDK relacionada con Designer. Luego exploraremos los componentes configurables en la página del Diseñador y discutiremos el proceso de integración.

Crear una sesión de diseñador

Paso 1:

El primer paso es crear un token de autenticación de remitente

SDK de Java

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

.NET SDK

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

MÉTODO DE DESCANSO:

Solicitud HTTP
POST / api / autenticaciónTokens / remitente
Encabezados HTTP
Aceptar: aplicación / json
Tipo de contenido: application / json
Autorización: Basic api_key
Solicitar carga útil
{
  "packageId": "e937fc75-3c3b-4506-b270-cc7e43f4cf78"
}
Carga útil de respuesta
{
   "value": "MjY0MjQ4MzgtMTJlOS00MzhjLTgzODMtMzJmMGNiZTg3ODBl"
}

Paso 2:

Utilizando el token de autenticación creado en el Paso 1 y la ID del paquete que se le devolvió durante la creación del paquete, cree la siguiente URL para una nueva experiencia de diseñador:

{instance_url} / auth? senderAuthenticationToken = {senderToken} & target = {instance_url} / a / transacción / {packageId} / designer

Y use este enlace para el Diseñador clásico:

{instance_url} / auth? autenticaciónToken = {userToken} & target = {instance_url} / designer / {packageId}

Nota:

Hay experiencias clásicas y nuevas de diseñador. En las siguientes secciones, solo discutiremos la nueva versión.

Paso 3:

Mientras su paquete esté en estado "Borrador", puede incrustar este enlace en un iFrame y migrar el proceso del diseñador a su propio flujo de trabajo.

Referirse a Guía de diseñador para más información de API / SDK.

Personaliza tu diseñador

La siguiente imagen muestra la comparación entre la función Diseñador con la configuración predeterminada y el Diseñador con un estilo minimalista. Estas dos opciones demuestran cuántos componentes se pueden eliminar o modificar en la página del Diseñador.

Aquí hay una lista detallada de qué componentes se pueden modificar:

1) Botón "guardar diseño" y "aplicar diseño"

2) Botón "documentVisibility"

3) Botón "addSigner"

4) Botón "editRecipient"

5) Botón "addDocument"

6) Botón "editDocument"

7) Botón "eliminar documento"

8) Botón "enviar" para la creación de paquetes o botón "hecho" en la creación de plantillas

9) Se pueden ocultar los siguientes campos adicionales

• firmando
• signerName
• signerTitle
• signerCompany
• campo de texto
• caja
• lista
• radio
• textarea
• etiqueta
• selector de fechas

Para cambiar la configuración del Diseñador a nivel de cuenta, comuníquese con nuestro equipo de apoyo .

Integración con el diseñador

Una página de Designer puede participar significativamente en su flujo de trabajo, debido a las potentes capacidades que proporciona.

A diferencia de la aplicación de métodos automáticos para crear su documento, como el uso de las funciones de Extracción de documento o Extracción de etiquetas de texto que requieren modificar el propio PDF, esta página GUI permite a sus usuarios no técnicos la capacidad de diseñar documentos con una simple interfaz de arrastrar y soltar. Potencialmente, incluso brinda la capacidad de agregar y editar firmantes y documentos, incluso si no ha creado su página de interfaz para hacerlo.

Hasta ahora, hemos revisado cómo generar una sesión de Designer mediante programación, analizamos los componentes potenciales y enumeramos algunas ventajas para usar esta solución durante la integración. En la segunda parte de esta serie, discutiremos los flujos de trabajo de integración detallados en la página del Diseñador y mostraremos al Diseñador en acció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 el Foros de la comunidad de desarrolladores . ¡Sus comentarios nos importan!