Dans cet article, je montrerai comment implémenter la formation d'un document électronique juridiquement significatif dans l'interface Web sans avoir besoin de modifier le backend. Cela peut intéresser ceux qui sont confrontés, par exemple, aux tâches suivantes et qui sont limités en ressources et en temps:

• il est nécessaire d'ajouter la possibilité de soumettre des demandes officielles ou des appels sur le site Web de l'entreprise;
• il est nécessaire d'ajouter la possibilité de signer un accord de connexion à l'interface Web du portail
• il est nécessaire de mettre en place une réceptionniste en ligne.

En prime, la possibilité de recevoir des documents signés par EDS par e-mail.

Il s'agira des certificats EDS émis par le NCA RK .

Je formulerai la tâche comme suit: sur la base d'un modèle préalablement convenu, créer un document électronique dans l'interface Web, offrir la possibilité de le signer avec un EDS, le transférer pour traitement à un groupe de gestionnaires et assurer la signification juridique dans conformément à la législation de la République du Kazakhstan.

J'utiliserai:

• Vue.js pour faciliter le développement (j'essaierai de ne rien écrire de spécifique, afin que vous puissiez facilement passer à un autre);
• Bootstrap pour le style de base (presque invisible);
• axios pour simplifier le réseautage;
• 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' },
  },
);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . .

:

• générer un document électronique dans l'interface Web sur la base d'un modèle préalablement convenu - mis en œuvre sous forme de page Web statique et d'une petite quantité de code JS;
• offrir la possibilité de signer son EDS - mis en œuvre à l'aide du logiciel certifié recommandé;
• le transférer à un groupe de gestionnaires pour traitement - mis en œuvre par l'envoi de documents signés à l'adresse e-mail des gestionnaires responsables;
• garantir la signification juridique conformément à la législation de la République du Kazakhstan - mise en œuvre à l'aide de l'API du service SIGEX.