eimzo-sign-vue

eimzo-sign-vue

🇬🇧 English

Ready-made E-IMZO signing dialog for Vue 2.7 / Vue 3. Elektron raqamli imzo (E-IMZO) bilan hujjat imzolash uchun tayyor modal.

Bir qator kod bilan foydalanuvchiga imzolash oynasini ko'rsatasiz, u sertifikatini tanlaydi, parolini kiritadi — sizga tayyor imzo (pkcs7_64) qaytadi.

import { useEimzoSign } from 'eimzo-sign-vue'

const { results } = await useEimzoSign().sign('Imzolanadigan matn')
// results[0].pkcs7_64  ← serverga yuboradigan imzo

Options API'dagi this.$eimzoSign(...) ham bir xil ishlaydi (pastga qarang) — lekin faqat komponent metodi ichida, chunki u thisga bog'liq. <script setup> da this yo'q, shuning uchun yuqoridagi useEimzoSign() har doim ishonchli.

• Ko'rinishi rasmiy E-IMZO oynasiga o'xshatilgan
• Bir nechta hujjatni bitta parol bilan imzolash
• 4 til: o'zbek (lotin/kiril), rus, ingliz — ilova tiliga qarab
• Modal birinchi ochilganda hech qanday sertifikat oldindan tanlanmagan — foydalanuvchi har doim o'zi tanlaydi
• Tiplashtirilgan xatolar (error.code), console ga hech narsa yozmaydi
• Vue 2.7 va Vue 3

Mundarija

• E-IMZO nima va bu paket nima qiladi
• Tez boshlash (5 daqiqa)
• Haqiqiy loyihaga ulash
• Misollar
• To'liq namuna loyihalar (GitHub)
• createEimzo sozlamalari
• Natija va xatolar
• Nega ishlamayapti? (FAQ)
• Vue 2.7

E-IMZO nima

E-IMZO — Davlat elektron raqamli imzo tizimi. Foydalanuvchi kompyuteriga o'rnatiladigan E-IMZO dasturi brauzer bilan lokal aloqa orqali ishlaydi va sertifikat (ЭРИ kalit) yordamida hujjatlarni imzolaydi.

Bu paket o'sha imzolash jarayonini Vue ilovangizga oson qo'shadi:

Siz: this.$eimzoSign(hujjat)
        │
        ▼
  ┌───────────────────────────┐
  │  E-IMZO bilan imzolash    │   ← paket ko'rsatadigan modal
  │  ─────────────────────────│
  │  ○ F.I.SH.  ...           │   ← foydalanuvchi sertifikatlari
  │  ○ "NAMUNA" MChJ  ...     │
  │  [ Imzolash ] [ Bekor ]   │
  └───────────────────────────┘
        │  (parol native oynada so'raladi)
        ▼
  results[0].pkcs7_64  ← imzo. Buni serverga yuborasiz.

Tez boshlash

Lokal kompyuterda darhol sinab ko'rish (E-IMZO dasturi ochiq bo'lsin):

1. O'rnating

npm i eimzo-sign-vue

2. main.ts (yoki main.js) ga qo'shing

import { createApp } from 'vue'
import { createEimzo } from 'eimzo-sign-vue'
import App from './App.vue'

const eimzo = createEimzo({
  // localhost uchun tayyor kalit (E-IMZO SDK bilan keladi). Faqat test uchun.
  apiKeys: [
    ['localhost', '96D0C1491615C82B9A54D9989779DF825B690748224C2B04F500F370D51827CE2644D8D4A82C18184D73AB8530BB8ED537269603F61DB0D03D2104ABF789970B'],
  ],
})

createApp(App).use(eimzo).mount('#app')

3. Istalgan komponentda

<script setup lang="ts">
import { ref } from 'vue'
import { useEimzoSign } from 'eimzo-sign-vue'

const imzo = ref('')

async function imzola() {
  try {
    const { results } = await useEimzoSign().sign('Salom dunyo')
    imzo.value = results[0].pkcs7_64
  } catch (e: any) {
    if (e.code !== 'E_CANCELLED') alert(e.message)
  }
}
</script>

<template>
  <button @click="imzola">Imzolash</button>
  <pre v-if="imzo">{{ imzo.slice(0, 80) }}…</pre>
</template>

Tugmani bosing → modal ochiladi → sertifikat tanlang → "Imzolash". Tamom.

Stil avtomatik qo'shiladi. import 'eimzo-sign-vue/style.css' shart emas.

Vue 2.7 ishlatasizmi? Yuqoridagi 2-qadam (createApp(...)) faqat Vue 3'da bor — Vue 2.7 hali ham new Vue(...) bilan ishga tushadi. To'liq, tayyor main.js namunasi — Vue 2.7 bo'limida. 3-qadam (<script setup> bilan imzolash) ikkalasida ham bir xil, o'zgarishsiz ishlaydi.

Haqiqiy loyihaga ulash

0. Talab

1. API kalit oling

E-IMZO har bir domen (app.bank.uz, hemis.uz, localhost …) uchun alohida kalit beradi. Kalitni e-imzo.uz yoki o'z tashkilotingiz orqali oling. Lokal uchun yuqoridagi localhost kaliti yetadi.

2. .env

VITE_EIMZO_DOMAIN=app.bank.uz
VITE_EIMZO_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Kalitni to'g'ridan-to'g'ri kodga yozmang.

3. Plaginni sozlang

import { createEimzo } from 'eimzo-sign-vue'

const eimzo = createEimzo({
  apiKeys: [
    ['localhost', '96D0C1491615C82B9A54D9989779DF825B690748224C2B04F500F370D51827CE2644D8D4A82C18184D73AB8530BB8ED537269603F61DB0D03D2104ABF789970B'],
    [import.meta.env.VITE_EIMZO_DOMAIN, import.meta.env.VITE_EIMZO_KEY],
  ],

  // Ixtiyoriy:
  messages: () => appLang.value,          // til (pastda batafsil)
  onAudit: (e) => auditLog.push(e),       // kuzatuv jurnali
})

app.use(eimzo)

4. Imzolang

import { useEimzoSign } from 'eimzo-sign-vue'

const { sign } = useEimzoSign()

async function submit(xml: string) {
  try {
    const { results } = await sign(xml)
    // results[0] = { id, pkcs7_64, signature_hex, signer_serial_number }
    await fetch('/api/sign', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ pkcs7: results[0].pkcs7_64 }),
    })
  } catch (e: any) {
    if (e.code === 'E_CANCELLED') return                 // foydalanuvchi bekor qildi
    if (e.code === 'E_NOT_INSTALLED') alert('E-IMZO dasturini oching')
    else alert('Imzolashda xatolik: ' + e.message)
  }
}

Options API'da this.$eimzoSign(...) — bir xil.

5. Serverda tekshiring — MAJBURIY

Bu paket faqat imzo (pkcs7_64) yasaydi, autentifikatsiya qilmaydi. Server:

• imzoning haqiqiyligini va sertifikat zanjirini,
• sertifikat bekor qilinmaganini (OCSP/CRL),
• imzolovchi (signer_serial_number / STIR / JSHSHIR) tizimga kirgan foydalanuvchiga tegishli ekanini

tekshirishi shart. O'zbekistonda buni odatda E-IMZO/DSKM backend bajaradi.

Tekshirish ro'yxati

• npm i eimzo-sign-vue
• createEimzo({ apiKeys }) + app.use(eimzo)
• domen uchun to'g'ri API kalit
• E_CANCELLED va E_NOT_INSTALLED ushlangan
• pkcs7_64 serverga boradi va serverda tekshiriladi
• E-IMZO dasturi ochiq holda sinaldi

Misollar

Bir nechta hujjatni birdan imzolash

Parol bir marta so'raladi — hammasi bitta sertifikat bilan imzolanadi.

const { results } = await sign([
  { id: 'p1', title: "To'lov topshirig'i №1", content: xml1 },
  { id: 'p2', title: "To'lov topshirig'i №2", content: xml2 },
  { id: 'p3', title: "Shartnoma ilovasi",      content: xml3 },
])

for (const r of results) {
  await api.saveSignature(r.id, r.pkcs7_64)   // { id, pkcs7_64, ... }
}

Foydalanuvchi nimani imzolayotganini ko'rsatish

preview bergan bo'lsangiz va show-documents yoqilgan bo'lsa, modalda hujjat tafsilotlari chiqadi:

await sign([{
  id: 'p1',
  title: "To'lov topshirig'i №42",
  content: xml,
  preview: [
    { label: 'Summa',           value: '1 500 000 so‘m' },
    { label: 'Qabul qiluvchi',  value: 'ACME MChJ' },
    { label: 'Hisob raqami',    value: '2020 8000 9000 1234 5678' },
  ],
}])

<EimzoSignModal show-documents ... />

Yarim imzolangan holat

Foydalanuvchi partiyada bir nechta hujjatni imzolab, o'rtada bekor qilsa — imzolangan qismini yo'qotmang:

try {
  const { results } = await sign(docs)
  await api.saveAll(results)
} catch (e: any) {
  if (e.code === 'E_CANCELLED') {
    if (e.partial) await api.saveAll(e.partial)   // imzolanganlari shu yerda
    return
  }
  throw e
}

Deklarativ komponent (imperativ o'rniga)

<script setup>
import { ref } from 'vue'
import { EimzoSignModal, useEimzoSign } from 'eimzo-sign-vue'

const show = ref(false)
const eimzo = useEimzoSign()
const docs = [{ id: 'a', title: 'Ariza', content: '<xml/>' }]

function onSigned({ results }) {
  show.value = false
  // ... results bilan ishlash
}
</script>

<template>
  <button @click="show = true">Imzolash</button>

  <EimzoSignModal
    v-if="show"
    :client="eimzo.client"
    :docs="docs"
    messages="uz-latn"
    @signed="onSigned"
    @cancelled="show = false"
  />
</template>

<EimzoSignModal> propslari va hodisalari

Beriladigan ma'lumot (props):

docs massividagi har bir element (SignRequestDoc):

content ichiga nima beriladi?

Bu — title/preview kabi faqat ko'rsatish uchun emas, E-IMZO aynan shu qatorga imzo qo'yadi:

• Matn, XML yoki JSON — eng ko'p uchraydigan holat, to'g'ridan-to'g'ri, hech qanday oldindan kodlashsiz beriladi: content: xml yoki content: JSON.stringify(obj).
• Base64 qator — hujjat ikkilik (binary) fayl bo'lsa (PDF, rasm, docx). JS satrida xom binary bo'lishi mumkin emas, shuning uchun faylni avval o'zingiz bir marta base64'ga aylantirib, o'sha satrni beradi.

Ikkala holatda ham kutubxona bu qatorni E-IMZOga yuborishdan oldin yana bir marta o'zi base64 qiladi (SDK talabi) — shuning uchun matn/XML/JSON'ni oldindan o'zingiz base64 qilib yubormang, aks holda ikki marta kodlangan bo'lib qoladi.

Serverda tekshirishda aynan shu content (imzolashga berilgan holicha) qaytadan solishtiriladi — modalga yuborilgan va serverga yuborilgan hujjat bir xil bo'lishi shart, aks holda imzo haqiqiy hisoblanmaydi.

Olinadigan ma'lumot (hodisalar):

Ikkala hodisadan keyin ham modalni o'zingiz yopishingiz kerak (masalan v-if="show" ni false qilib) — modal o'z-o'zini yopmaydi.

Til

messages ga string, alias, funksiya yoki o'z matnlaringizni berish mumkin:

// statik
createEimzo({ apiKeys, messages: 'ru' })

// dinamik — ilova tili o'zgarsa modal ham darhol o'zgaradi
createEimzo({ apiKeys, messages: () => i18n.global.locale.value })

import { uzLatn, ru, en, EimzoMessages } from 'eimzo-sign-vue' — tayyor obyektlardan biror maydonni o'zgartirib berishingiz mumkin.

Modalsiz — faqat imzolash mantig'i

Oyna kerak bo'lmasa (o'z UI'ingiz), quyi darajali paketni ishlating:

npm i eimzo-sign-core

import { EimzoClient } from 'eimzo-sign-core'

const eimzo = new EimzoClient({ apiKeys: [[domain, key]] })
await eimzo.install()
const certs = await eimzo.listCerts()             // o'z ro'yxatingizda ko'rsatasiz
const res = await eimzo.sign(certs[0], xml)       // { pkcs7_64, ... }

Batafsil: eimzo-sign-core.

To'liq namuna loyihalar

Yuqoridagi kod parchalari o'rniga to'liq, ishga tushiriladigan (npm install

• npm run dev) loyihalar kerak bo'lsa — har biri o'zining README.mdsida o'rnatish, xatolar va muammolarni bartaraf etish bo'yicha batafsil hujjat bilan keladi:

• eimzo-sign-vue3-example — Vue 3, <script setup>, TypeScript, Vite. npm paketini hech qanday qo'shimcha sozlashsiz to'g'ridan-to'g'ri ishlatadi.
• eimzo-sign-vue2-example — Vue 2.7, Options API, Vite. Jadvaldan hujjat tanlab, deklarativ <EimzoSignModal :show-documents="true"> bilan WYSIWYS imzolash oqimini ko'rsatadi.

createEimzo sozlamalari

Har sign() chaqiruvida ba'zilarini qayta yozish mumkin: sign(docs, { messages: 'ru', theme: 'dark' }).

Rangni CSS o'zgaruvchilari bilan moslang:

.eimzo-modal-root {
  --eimzo-primary: #0a7c3f;
  --eimzo-header-bg: #0a7c3f;
  --eimzo-radius: 6px;
}

Natija va xatolar

sign() natijasi

{
  results: [
    {
      id: 'p1',                     // siz bergan id (yoki bitta hujjatda 'single')
      pkcs7_64: 'MIIH…',            // imzo (base64) — SERVERGA SHUNI yuborasiz
      signature_hex: '3045…',
      signer_serial_number: '…',    // imzolagan sertifikat seriya raqami
    },
  ]
}

Xatolar — error.code ni tekshiring (matnni emas)

import { EimzoError } from 'eimzo-sign-vue'

if (EimzoError.is(e, 'E_NOT_INSTALLED')) {
  showBanner('E-IMZO dasturini ishga tushiring va sahifani yangilang')
}

Nega ishlamayapti?

Tugmani bosaman, hech narsa bo'lmayapti Konsolni oching. E_NOT_INSTALLED bo'lsa — E-IMZO dasturi ochilmagan. createEimzo chaqirilганmi va app.use(eimzo) qilinganmi tekshiring.

E_NOT_INSTALLED — dastur ochiq bo'lsa ham E-IMZO eski versiya (E_VERSION_LOW) bo'lishi mumkin. Yoki brauzer lokal wss://127.0.0.1:64443 ulanishini bloklayapti (antivirus / korporativ proksi).

E_API_KEY_REJECTED yoki sertifikatlar chiqmayapti apiKeys dagi domen sayt ochilgan domenga aynan mos kelishi kerak (localhost ≠ 127.0.0.1).

pnpm bilan eimzo-sign-core topilmayapti Undan to'g'ridan-to'g'ri import qilsangiz, npm i eimzo-sign-core ni ham qo'shing (pnpm strict transitive paketni ko'rsatmaydi).

Vue 2.7 da renderList is not defined / openBlock xatosi postinstall Vue 2 build'ni ulamagan — sababi --ignore-scripts bilan o'rnatilgan, yoki pnpm 9/10 (build skriptlarini standart bloklaydi) / Yarn Berry (PnP) ishlatilgan. Tezkor yechim: import { createEimzo } from 'eimzo-sign-vue/vue2' — aniq subpath har doim to'g'ri build'ni oladi. pnpm'da doimiy yechim: pnpm approve-builds bilan eimzo-sign-vue va vue-demini tasdiqlang. Batafsil — Vue 2.7.

CSP xatosi connect-src ga ws://127.0.0.1:64646 wss://127.0.0.1:64443 qo'shing. Inline stil man qilingan bo'lsa: createEimzo({ injectStyles: false }) + import 'eimzo-sign-vue/style.css'.

SSR (Nuxt) da import qilganda xato Modalni faqat client-side yuklang (<client-only> / onMounted).

Vue 2.7

npm i eimzo-sign-vue — hech qanday qo'shimcha sozlashsiz ishlaydi. Yagona farq — main.js da ilovani ishga tushirish (Vue 2.7 da createApp yo'q, hali ham new Vue(...) ishlatiladi):

// main.js
import Vue from 'vue'
import { createEimzo } from 'eimzo-sign-vue'
import App from './App.vue'

const eimzo = createEimzo({
  apiKeys: [
    ['localhost', '96D0C1491615C82B9A54D9989779DF825B690748224C2B04F500F370D51827CE2644D8D4A82C18184D73AB8530BB8ED537269603F61DB0D03D2104ABF789970B'],
  ],
})

Vue.use(eimzo)

new Vue({
  render: (h) => h(App),
}).$mount('#app')

Shundan keyingi hammasi — imzolash (useEimzoSign(), this.$eimzoSign(...), <script setup>, <EimzoSignModal>) Vue 3 bilan bir xil, yuqoridagi misollarning barchasi o'zgarishsiz ishlaydi.

Paket Vue 2.7 va Vue 3 uchun ikkita alohida build bilan keladi (dist/vue2/, dist/vue3/). O'rnatishda postinstall skripti o'rnatilgan Vue versiyasini aniqlab, to'g'ri build'ni ulaydi. Import bir xil:

import { createEimzo, EimzoSignModal } from 'eimzo-sign-vue'

postinstall ishlamagan holatlar — --ignore-scripts bilan o'rnatilgan, yoki pnpm 9/10 (build skriptlarini standart tarzda bloklaydi) / Yarn Berry (PnP) ishlatilgan bo'lsa — avtomatik aniqlash ishlamay qolishi mumkin va sukut bo'yicha Vue 3 build ulanadi (xato chiqmasdan, lekin Vue 2.7 loyihada ishlamaydi). Bunday holatda Vue 2.7 uchun aniq subpath'dan import qiling — bu har doim to'g'ri ishlaydi:

import { createEimzo } from 'eimzo-sign-vue/vue2'   // yoki '/vue3'

pnpm 9/10'da: pnpm approve-builds bilan eimzo-sign-vue va vue-demi uchun build skriptlarini tasdiqlang (yoki ularni loyiha package.jsondagi pnpm.onlyBuiltDependencies ro'yxatiga qo'shing) — aks holda vue-demi ning o'zi ham Vue versiyasini noto'g'ri aniqlashi mumkin.

Modalsiz, faqat holat mashinasi kerak bo'lsa: SignFlow eimzo-sign-core da (npm i eimzo-sign-core) — u Vue'ga umuman bog'liq emas.

To'liq, ishga tushiriladigan Vue 2.7 loyiha (Options API, jadvaldan hujjat tanlab WYSIWYS imzolash) — eimzo-sign-vue2-example. Vue 3 uchun bir xil misol — eimzo-sign-vue3-example.

Xavfsizlik

• Serverda tekshiring — paket imzo yasaydi, kimligini tasdiqlamaydi.
• apiKeys ni koda saqlamang — .env dan.
• Paket console ga hech narsa yozmaydi; kuzatuv onAudit orqali (faqat serial / docId, shaxsiy ma'lumotsiz).
• Ichki E-IMZO SDK SHA-256 bilan pinlangan.

Litsenziya

MIT