Clever Geek Handbook

サーバーコードのないWebフォームからの法的に重要な電子文書（RK用）

この記事では、バックエンドを変更せずに、法的に重要な電子ドキュメントの作成をWebインターフェイスに実装する方法を示します。これは、たとえば、次のタスクに直面し、リソースと時間が限られている人にとって興味深いかもしれません。







  • 会社のウェブサイトに公式の申請書または上訴を提出する機能を追加する必要があります。
  • ポータルのWebインターフェイスに接続契約に署名する機能を追加する必要があります
  • オンライン受付を実施する必要があります。


素晴らしいボーナスとして-EDSによって署名されたドキュメントを電子メールで受信する機能。







それはによって発行されたEDS証明書についてのだろうNCA RK。







タスクを次のように定式化します。事前に合意したテンプレートに基づいて、Webインターフェイスで電子ドキュメントを作成し、EDSで署名する機会を提供し、処理のためにマネージャーのグループに転送し、カザフスタン共和国の法律に従って。







私が使用します：









:







  • , , ;
  • ;
  • 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' },
  },
);


, . .









:







  • 事前に合意されたテンプレートに基づいて、Webインターフェイスで電子ドキュメントを生成します-静的なWebページと少量のJSコードとして実装されます。
  • 彼のEDSに署名する機会を提供します-推奨される認定ソフトウェアを使用して実装されます。
  • 処理のためにマネージャーのグループに転送します-責任のあるマネージャーの電子メールアドレスに署名されたドキュメントを送信することによって実装されます。
  • カザフスタン共和国の法律に従って法的重要性を確保します-SIGEXサービスのAPIを使用して実装されます。


More articles:


All Articles