Esign-Widget

As the signature is one of the personal components that allow the identification of people and the acceptance of conditions in business processes, it is important for Tu Identidad to strengthen the KYC process with a service that allows to collect and provide legal certainty, as well as minimize the friction in the process of acceptance of the parties on different documents (contracts, promissory notes, etc.) in a digital business environment.

It is for this reason that the need arises to create this library that helps you in the process of collecting signatures in an automated way.

Installation

Using npm:

npm i esign-widget

Dependencies

When installing Esign-Widget it is necessary to install the following dependencies for the optimal functioning of the library.

npm i signature_pad

Implementation

Once the library is installed, it is necessary to import it into the app.module.ts file as follows:

import { EsignWidgetModule } from 'esign-widget';

Besides adding it in the imports section

imports: [
    EsignWidgetModule,
    ...
]

Once the library is imported, we can insert the component in the desired section by adding the following tag:

<lib-esign-widget 
    [onSuccess]="onSuccessFunction"
    [onError]="onErrorFunction"
    [esignWidgetData]="esignWidgetData"
></lib-esign-widget>

Configuration

Once the Esign-Widget installation is complete, it is necessary to configure the component with the data of the document to be signed. The data required is the following:

  • onSuccess (Function): Function to be execute in case of success signing the document
  • The function in case of success return an object with the properties:
    • status (string)
    • message (string)
  • onError (Function): Function to be execute in case of error signing the document
  • The function in case of error return an object with the properties:
    • code (string)
    • message (string)
  • esignWidgetData (object): Object with the URL of the document to sign, as well the person data to sign. This object has the following properties:
  • identifier (string): identifier to obtain file once signed.
  • name (string): name of the person who signs the file.
  • firstName (string): first surname of the person who signs the file.
  • lastName (string): second surname of the person who signs the file.
  • rfc (string): RFC of the person who signs the file.
  • email (string): email of the person who signs the file.
  • showSignature (string): Flag to identify if the signature will be shown or not.
  • document (string): URL of the document to be signed.
    • It is important to consider that the URL of the document to be signed must be public and can be accessed from anywhere.
  • token (string): authorization token, obtained with the Get token method.

Configuration object example

{
   token: "<authorization token>"
   identifier: "1000000",
   name: "Juan",
   firstName: "Perez",
   lastName: "Lopez",
   rfc: "XAXX010101000",
   email: "xxxxxx@yyyyyyy.com",
   showSignature: "true",
   document: "http://tuidentidad.com/documento.pdf"
}

Autenticación

The characteristics of the authentication endpoint for the consumption of the esign service are listed below, with which the required token is obtained in the component's configuration.

Get token

~/v1/token

Headers

'apiKey':

Response:
Success
{
    success: boolean,
    token: string
}
Error
{
    code: string,
    message: string
}