Pada artikel ini, saya akan menunjukkan cara mengimplementasikan pembentukan dokumen elektronik yang signifikan secara hukum di antarmuka web tanpa perlu memodifikasi backend. Ini mungkin menarik bagi mereka yang dihadapkan, misalnya, dengan tugas-tugas berikut dan terbatas dalam sumber daya dan waktu:

• perlu menambahkan kemampuan untuk mengajukan aplikasi resmi atau banding ke situs web perusahaan;
• perlu menambahkan kemampuan untuk menandatangani perjanjian koneksi ke antarmuka web portal
• perlu menerapkan resepsionis online.

Sebagai bonus bagus - kemampuan untuk menerima dokumen yang ditandatangani oleh EDS melalui email.

Ini tentang sertifikat EDS yang dikeluarkan oleh NCA RK .

Saya akan merumuskan tugas sebagai berikut: berdasarkan template yang telah disepakati sebelumnya, buat dokumen elektronik di antarmuka web, berikan kesempatan untuk menandatanganinya dengan EDS, mentransfernya untuk diproses ke sekelompok manajer dan memastikan signifikansi hukum di sesuai dengan undang-undang Republik Kazakhstan.

Saya akan gunakan:

• Vue.js untuk kemudahan pengembangan (saya akan mencoba untuk tidak menulis sesuatu yang spesifik, sehingga Anda dapat dengan mudah beralih ke yang lain);
• Bootstrap untuk gaya dasar (hampir tidak terlihat);
• aksios untuk menyederhanakan jaringan;
• 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' },
  },
);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . .

:

• menghasilkan dokumen elektronik di antarmuka web berdasarkan template yang telah disetujui sebelumnya - diimplementasikan sebagai halaman web statis dan sejumlah kecil kode JS;
• memberikan kesempatan untuk menandatangani EDS-nya - diimplementasikan menggunakan perangkat lunak bersertifikat yang direkomendasikan;
• mentransfernya ke sekelompok manajer untuk diproses - dilaksanakan dengan mengirimkan dokumen yang ditandatangani ke alamat email manajer yang bertanggung jawab;
• memastikan signifikansi hukum sesuai dengan undang-undang Republik Kazakhstan - diimplementasikan menggunakan API layanan SIGEX.