Tu Identidad eSign Service Integration Demo
Last update time: September 19, 2024
1. Demo Project overview
This demo project showcases an example of consuming and integrating digital signature services. It was built with an Ionic/Vue.js application and a Node.js backend service.
Repositories:
The target audience for this project includes product managers and engineering teams interested in learning more about integration and consumption recommendations for Tu Identidad's digital signature services.
Let's begin by understanding the system context of this application, which serves as an analogy for your organization's system or application. Your organization's application will always be responsible for handling customer requests and interactions, while using Tu Identidad's services through integration to complement business rule tasks such as identity validation processes and, in this case, electronic signature generation.
The following diagram shows the client, Tu Identidad's web services in a gray-background rectangle, and, as the central focus, your company's system.
Diagram 1. System context diagram - This diagram describe how the company systems provide services to the customer and integrate external services from Tu Identidad Signature Services.
1.1. Company System
In the context of this project, it represents the demonstration application for integration. In real-world scenarios, it represents your company's or organization's system where Tu Identidad services will be used.
1.2. Customer
This refers to the user of the company system and the customer of your organization. The customer interacts through the company system to receive products or services.
1.3. Tu identidad Services - Signature Service
Represents the Tu Identidad services platform, which in the case of this demo project exemplifies the electronic signature services.
2. Demo App Components
Now you will see more detailed information. This demo application consists of a client-server architecture with two projects: a client application developed in Ionic/VueJS and a web services component called backend services.
We recommend that the integration between systems be implemented server-to-server.
Diagram 2. Container Diagram - Client-Server architecture for Company System Demo.
2.1. Mobile Web Application
The Mobile web application is responsible for handling customer requests and interactions to provide services. In this example, it manages the signature interaction and provides feedback on the signature process result by displaying the signed document.
2.2. Backend Service
The backend services consist of a web server with a RESTful API developed in JavaScript and Node.js. In this example, it handles requests from the mobile web application and integrates the signature services of Tu Identidad.
3. Integration workflow
For the process of consuming electronic signature services, we suggest a server-to-server integration between Tu Identidad's web services and your system. This allows you to have control over the user experience and security in the consumption of the signature service.
3.1. Document Signature flow
In order to start the signature flow you it must complete the following preconditions:
- You have obtained credentials for the Tu Identidad Services Platform and have the signature service activated.
- You have already completed an identity verification process of your customer,
- And collect the following identification data:
- Name
- Last name
- RFC (optional)
- You have an agreement document to be signed.
- Assign an unique identifier to the current signature process.
Diagram 3. Sequence Diagram - Signature integration flow of Company System and Tu Identidad Services.
3.1. Signing Document
3.1.1. Sign and accept agreement.
The signature flow begins when customers decide to sign the agreement document with his digital autograph, demonstrating their willingness to accept and continue with an acquisition process.
3.1.2. Sign Document
The application client saves the digital autograph as an image and sends a request to its backend web service to sign the agreement document. In the demo application, this request also includes the customer identification data collected during the precondition steps and a random unique identifier for the process.
Once the backend service returns a success response, the app client requests the signed document.
3.1.3. Call Signature Service
The backend service calls the signature service with all the identification data and the digital autograph image. As soon as the eSign service returns a success response, the backend service confirms this to the app client. The backend service can then either retrieve the signed document immediately or wait to get it on demand from an application. In the demo application, the backend service waits to download the signed document on demand from the app client.
Note: The signature process and document retrieval are separate steps. This is because signing occurs asynchronously and generates multiple file outputs.
3.2. Retrieve Signed Document
3.2.1. Retrieve Document.
To continue with the signature flow, the app client retrieves the signed document from its backend service and presents it to the customer.
3.2.2. Call get document service.
The backend service requests the signed document from Tu Identidad's signature service. This process can be done on demand or as soon as the backend service receives confirmation of a successful signature process.
In the demo application, the backend service requests the signed document on demand.
3.3. Retrieve Key Signature Certificate
3.3.1. Call Key signature certificate service
The Key Signature certificate is one of multiple file outputs of the signature process. As the documentation indicates, this certificate is generated on the fly as part of the electronic signature generation. To complement the signature flow and improve the availability of the key signature certificate, we recommend implementing a process in your backend service to download and store this file.
In the demo application, the backend service exposes an endpoint to retrieve this file on demand.
3.4. Retrieve Trusted Timestamp Certificate (NOM151)
3.4.1. Call NOM151 Trusted Timestamp Certificate service
The Trusted Timestamp Certificate (NOM151) is one of multiple file outputs of the signature process. As the documentation indicates, this certificate is a document issued by an organization (PSC) authorized by the Mexican Ministry of Economy. These files provide trusted certification of data conservation.
To enhance the signature flow and improve the availability of the Trusted Timestamp Certificate, we recommend implementing a process in your backend service to download and store this file.
In the demo application, the backend service exposes an endpoint to retrieve this file on demand.