In this article I will show how to implement the formation of a legally significant electronic document in the web interface without the need to modify the backend. This may be of interest to those who are faced, for example, with the following tasks and are limited in resources and time:

• it is necessary to add the ability to submit official applications or appeals to the company's website;
• it is necessary to add the ability to sign a connection agreement to the web interface of the portal;
• you need to implement an online receptionist.

As a nice bonus - the ability to receive documents signed by EDS by e-mail.

It will be about the EDS certificates issued by the NCA RK .

I will formulate the task as follows: on the basis of a previously agreed template, create an electronic document in the web interface, provide an opportunity to sign it with an EDS, transfer it for processing to a group of managers and ensure legal significance in accordance with the legislation of the Republic of Kazakhstan.

I will use:

• Vue.js for ease of development (I will try not to write anything specific, so that you can easily switch to any other);
• Bootstrap for basic styling (almost invisible);
• axios to simplify networking;
• pdfmake PDF JS;
• ncalayer-js-client NCALayer;
• SIGEX .

:

• , , ;
• ;
• NCALayer.

, : https://github.com/sigex-kz/example-sign-web-form

, :

<form v-on:submit.prevent="compilePDF">
  <h2>{{ formHeader }}</h2>
  <p>{{ formIntro }}</p>
  <div v-for="formItem in formItems" class="form-group">
    <label>{{ formItem.label }}</label>
    <input v-model="formItem.value" type="text" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary"> </button>
</form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Vue.js , HTML PDF:

new Vue({
...
  data: {
    formHeader: ' №1',
    formIntro: '        ,  ,           ,   ,      .',
    formItems: [
      { label: ' ', value: '', },
      { label: ' ', value: '', },
      { label: ' ', value: '', },
    ],
...
  },
...
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

PDF JS

PDF pdfmake, PDF — JS.

, pdfmake PDF base64 :

async compilePDF() {
  const pdfDefinition = {
    content: [
      { text: this.formHeader, fontSize: 20, bold: true, alignment: 'center', margin: [ 0, 0, 0, 20 ] },
      { text: this.formIntro, fontSize: 15, margin: [ 0, 0, 0, 20 ] },
    ],
  };

  for (const formItem of this.formItems) {
    pdfDefinition.content.push(`${formItem.label}: ${formItem.value}`);
  }

  this.dataB64 = await new Promise((resolve) => {
    const pdfDocGenerator = pdfMake.createPdf(pdfDefinition);
    pdfDocGenerator.getBase64(resolve);
  });
},
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

PDF

, , :

<p>   <a v-bind:href="`data:application/octet-stream;base64,${dataB64}`" target="_blank" v-bind:download="title">{{ title }}</a>.</p>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

— NCALayer, . NCALayer — WebSocket , , ncalayer-js-client.

NCALayer , , ( ). NCALayer . , , :

const storageTypes = await this.ncaLayer.getActiveTokens();

if (storageTypes.length == 0) {
  this.storageType = 'PKCS12';
} else {
  this.storageType = storageTypes[0];
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

PDF. , NCALayer :

const signature = await this.ncaLayer.createCMSSignatureFromBase64(this.storageType, this.dataB64);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , :

• PDF ;
• .

" " , .

API SIGEX , . .

let response = await axios.post(
  `${this.sigexURL}/api`,
  {
    title: this.title,
    description: this.description,
    signature,
    emailNotifications: { to: ['some-manager@example.kz', this.email] },
  },
);

this.sigexId = response.data.documentId;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, , , .

:

const dataToSend = Uint8Array.from(atob(this.dataB64), c => c.charCodeAt(0)).buffer;
response = await axios.post(
  `${this.sigexURL}/api/${this.sigexId}/data`,
  dataToSend,
  {
    headers: { 'Content-Type': 'application/octet-stream' },
  },
);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . .

:

• generate an electronic document in the web interface based on a pre-agreed template - implemented as a static web page and a small amount of JS code;
• provide an opportunity to sign his EDS - implemented using the recommended certified software;
• transfer it to a group of managers for processing - implemented by sending signed documents to the email address of the responsible managers;
• ensure legal significance in accordance with the legislation of the Republic of Kazakhstan - implemented using the API of the SIGEX service.