In diesem Artikel werde ich zeigen, wie die Bildung eines rechtlich bedeutenden elektronischen Dokuments in der Weboberfläche implementiert werden kann, ohne dass das Backend geändert werden muss. Dies kann für diejenigen von Interesse sein, die beispielsweise mit folgenden Aufgaben konfrontiert sind und nur über begrenzte Ressourcen und Zeit verfügen:

• Es ist erforderlich, die Möglichkeit hinzuzufügen, offizielle Anträge oder Beschwerden auf der Website des Unternehmens einzureichen.
• Es ist erforderlich, die Möglichkeit zum Unterzeichnen einer Verbindungsvereinbarung zur Weboberfläche des Portals hinzuzufügen
• Es ist notwendig, eine Online-Empfangsdame zu implementieren.

Als netter Bonus - die Möglichkeit, von EDS signierte Dokumente per E-Mail zu erhalten.

Es geht um die von der NCA RK ausgestellten EDS-Zertifikate .

Ich werde die Aufgabe wie folgt formulieren: Auf der Grundlage einer zuvor vereinbarten Vorlage ein elektronisches Dokument in der Weboberfläche erstellen, die Möglichkeit bieten, es mit einem EDS zu unterschreiben, es zur Verarbeitung an eine Gruppe von Managern zu übertragen und die rechtliche Bedeutung in sicherzustellen gemäß den Rechtsvorschriften der Republik Kasachstan.

Ich werde benützen:

• Vue.js zur Vereinfachung der Entwicklung (Ich werde versuchen, nichts Spezielles zu schreiben, damit Sie problemlos zu einem anderen wechseln können);
• Bootstrap für einfaches Styling (fast unsichtbar);
• Axios zur Vereinfachung der Vernetzung;
• 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' },
  },
);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . .

:

• Generieren eines elektronischen Dokuments in der Weboberfläche basierend auf einer im Voraus vereinbarten Vorlage - implementiert als statische Webseite und eine kleine Menge JS-Code;
• bieten die Möglichkeit, sein EDS zu signieren - implementiert mit der empfohlenen zertifizierten Software;
• Übertragen Sie es zur Verarbeitung an eine Gruppe von Managern - implementiert durch Senden signierter Dokumente an die E-Mail-Adresse der verantwortlichen Manager;
• Gewährleistung der rechtlichen Bedeutung gemäß den Rechtsvorschriften der Republik Kasachstan - implementiert mithilfe der API des SIGEX-Dienstes.