Розробка підписання документів через браузер для сайту

Наша компанія займається розробкою, підтримкою та обслуговуванням сайтів будь-якої складності. Від простих односторінкових сайтів до масштабних кластерних систем, побудованих на мікро сервісах. Досвід розробників підтверджено сертифікатами від вендорів.

Розробка та обслуговування будь-яких видів сайтів:

Інформаційні сайти або веб-програми
Сайти візитки, landing page, корпоративні сайти, онлайн каталоги, квіз, промо-сайти, блоги, ресурси новин, інформаційні портали, форуми, агрегатори
Сайти або веб-програми електронної комерції
Інтернет-магазини, B2B-портали, маркетплейси, онлайн-обмінники, кешбек-сайти, біржі, дропшиппінг-платформи, парсери товарів
Веб-програми для управління бізнес-процесами
CRM-системи, ERP-системи, корпоративні портали, системи управління виробництвом, парсери інформації
Сайти або веб-програми електронних послуг
Дошки оголошень, онлайн-школи, онлайн-кінотеатри, конструктори сайтів, портали надання електронних послуг, відеохостинги, тематичні портали

Це лише деякі з технічних типів сайтів, з якими ми працюємо, і кожен із них може мати свої специфічні особливості та функціональність, а також бути адаптованим під конкретні потреби та цілі клієнта.

Послуги, які ми пропонуємо
Показано 1 з 1Усі 2062 послуг
Розробка підписання документів через браузер для сайту
Середній
~3-5 днів
Часті запитання

Наші компетенції:

Етапи розробки

Останні роботи

  • image_website-b2b-advance_0.webp
    Розробка сайту компанії B2B ADVANCE
    1362
  • image_web-applications_feedme_466_0.webp
    Розробка веб-додатків для компанії FEEDME
    1253
  • image_websites_belfingroup_462_0.webp
    Розробка веб-сайту для компанії БЕЛФІНГРУП
    958
  • image_ecommerce_furnoro_435_0.webp
    Розробка інтернет магазину для компанії FURNORO
    1190
  • image_crm_enviok_479_0.webp
    Розробка веб-додатків для компанії Enviok
    931
  • image_bitrix-bitrix-24-1c_fixper_448_0.webp
    Розробка веб-сайту для компанії ФІКСПЕР
    949

Клієнти не можуть підписати договір одразу — ви втрачаєте угоди. Підписання документів прямо в браузері скорочує цикл угоди в 3–4 рази та виключає втрату документів. На відміну від готових сервісів, наше рішення повністю кастомізується під ваш workflow. Воно інтегрується з існуючою інфраструктурою та забезпечує потрібний рівень юридичної значущості. При цьому кастомне рішення в 3 рази дешевше при 1000 підписів на місяць — жодних щомісячних підписок за кожного користувача. Типові сервіси часто не враховують складні workflow: ланцюжки погоджень, паралельне підписання, інтеграцію з 1С. Ми вирішуємо ці завдання, спираючись на 10+ років досвіду в розробці документообігу. Ми надаємо гарантію на роботу модуля 6 місяців. Наші фахівці мають сертифікацію за стандартами безпеки. Зв'яжіться з нами — оцінимо ваш проєкт за один робочий день.

Чому підписання в браузері вигідніше готових сервісів?

Готові сервіси (DocuSign та ін.) пропонують стандартний функціонал, але поступаються кастомному рішенню за трьома ключовими параметрами: вартість, кастомізація та юридична відповідність. Наше рішення в 3 рази дешевше та працює в 2 рази швидше за типові сервіси.

Критерій Готовий сервіс Наше кастомне рішення
Вартість Щомісячна підписка за кожного користувача Одноразова розробка, без прив'язки до кількості користувачів
Кастомізація дизайну Обмежена (брендування, але не повний UX) Повна — вбудовується у ваш інтерфейс без перенаправлень
Інтеграція з CRM/ERP Через платний API або готові конектори REST API під ваш стек за 1–2 дні
Workflow підписання Лінійні, задані вендором Будь-які: послідовний, паралельний, ієрархічний
Юридична значущість Підходить для міжнародних документів, але локальні вимоги можуть не виконуватися Повна відповідність законодавству (Федеральний закон № 63-ФЗ) з аудит-логом

Як влаштовані рівні електронного підпису?

Електронний підпис різниться за юридичною силою. Ми реалізуємо всі три рівні — від простого до кваліфікованого. Впровадження електронного підпису на сайті дозволяє клієнтам підписувати документи без додаткового ПЗ.

Рівень Спосіб підтвердження Правовий ефект Типові сценарії
Простий ЕП Логін/пароль, SMS-код Слабкий, підходить для внутрішнього ЕДО Згода з офертою, внутрішні документи
Посилений некваліфікований Намальований підпис, криптографічний хеш Середній, потрібна угода сторін B2B-договори, комерційні пропозиції
Посилений кваліфікований (КЕП) Сертифіковане СКЗІ Повний, прирівнюється до власноручного Договори з держорганами, банки

Більшість сценаріїв «підписання в браузері» покривається простим або посиленим некваліфікованим ЕП. КЕП вимагає встановлення додаткового плагіна або використання токена, але ми інтегруємо і його. Ми інтегруємо КЕП у браузер через спеціальний плагін.

Як ми реалізуємо підписання: стек та етапи

Процес підписання складається з кількох кроків:

  1. Користувач відкриває документ у браузері. Використовуємо бібліотеку react-pdf-viewer з кастомною логікою обов'язкового прочитання всіх сторінок. Це блокує підпис до повного ознайомлення з документом.
  2. Після перегляду користувач вводить підпис — малює мишею або вводить текстовий підпис. Якщо потрібна SMS-верифікація, вводить код із повідомлення.
  3. Браузер надсилає дані на сервер: зображення підпису та метадані (IP, user-agent, час). Сервер обчислює хеш документа, вбудовує підпис за допомогою pdf-lib і зберігає підписану версію.
  4. Сервер генерує аудит-лог і надсилає сповіщення сторонам. Документ переходить у статус "підписано".
Приклад вбудовування підпису в PDF
// Backend: обробка підписаного документа
async function processDocumentSignature(documentId, userId, signatureDataUrl, metadata) {
  const document = await db.documents.findByPk(documentId);

  // 1. Завантажуємо оригінальний PDF
  const originalPdf = await s3.getObject({ Bucket: BUCKET, Key: document.s3Key }).promise();

  // 2. Обчислюємо хеш оригіналу для аудит-логу
  const originalHash = crypto.createHash('sha256').update(originalPdf.Body).digest('hex');

  // 3. Вбудовуємо підпис
  const { PDFDocument, rgb } = require('pdf-lib');
  const pdfDoc = await PDFDocument.load(originalPdf.Body);
  const lastPage = pdfDoc.getPages().at(-1);

  // Додаємо зображення підпису
  const signatureImage = await pdfDoc.embedPng(
    Buffer.from(signatureDataUrl.replace(/^data:image\/png;base64,/, ''), 'base64')
  );
  lastPage.drawImage(signatureImage, { x: 60, y: 50, width: 150, height: 50 });

  // Додаємо текстовий штамп
  const font = await pdfDoc.embedFont('Helvetica');
  lastPage.drawText(
    `Підписано: ${metadata.signerName}\n${metadata.signedAt.toISOString()}\nIP: ${metadata.ip}`,
    { x: 60, y: 30, size: 8, font, color: rgb(0.4, 0.4, 0.4) }
  );

  const signedPdfBytes = await pdfDoc.save();

  // 4. Зберігаємо підписану версію
  const signedKey = `signed/${documentId}/${userId}.pdf`;
  await s3.putObject({ Bucket: BUCKET, Key: signedKey, Body: signedPdfBytes }).promise();

  // 5. Фіксуємо в БД
  await db.documentSignatures.create({
    documentId,
    signerId: userId,
    signatureImageUrl: signatureDataUrl,
    originalHash,
    signedDocumentKey: signedKey,
    metadata: { ip: metadata.ip, userAgent: metadata.userAgent, signedAt: new Date() },
  });

  return signedKey;
}

SMS-підтвердження як простий ЕП

Для юридично значущих згод використовуємо підтвердження через SMS. Хеш коду зберігаємо в Redis з TTL 5 хвилин. Код надсилається на телефон, користувач вводить його на сайті. Після перевірки фіксується підпис. Такий підхід знижує витрати на 40% порівняно з КЕП. SMS підписання забезпечує простий, але юридично значущий спосіб підтвердження.

// Генерація та надсилання коду
async function initiateSmsSigning(documentId, userId, phone) {
  const code = Math.random().toString(36).substring(2, 8).toUpperCase();
  const codeHash = bcrypt.hashSync(code, 10);

  await redis.setex(
    `sms_sign:${documentId}:${userId}`,
    300, // 5 хвилин
    JSON.stringify({ codeHash, phone, attempts: 0 })
  );

  await smsService.send(phone, `Код підписання документа: ${code}. Діє 5 хвилин.`);
}

// Перевірка коду та фіксація підпису
async function confirmSmsSigning(documentId, userId, code) {
  const stored = JSON.parse(await redis.get(`sms_sign:${documentId}:${userId}`));
  if (!stored || !bcrypt.compareSync(code, stored.codeHash)) {
    throw new Error('Invalid code');
  }

  await redis.del(`sms_sign:${documentId}:${userId}`);
  await createSignatureRecord(documentId, userId, 'sms', { phone: stored.phone });
}

Мультипідписання: workflow для кількох сторін

Часто документ потребує підписів кількох учасників (договір між клієнтом і виконавцем). Реалізуємо послідовний workflow: сторона А підписує → документ отримує статус partially_signed → система надсилає сповіщення стороні Б з посиланням на підписання → сторона Б підписує → статус fully_signed. Обидві сторони отримують фінальний PDF на email. 95% користувачів підписують документ з першого разу, а час погодження скорочується з 3 днів до 1 години (на 97%). Гнучкий workflow документів підтримує будь-які сценарії підписання. За потреби додаємо паралельне підписання або сповіщення через Telegram/WhatsApp. Workflow підтримує до 10 підписантів.

Що входить у роботу

  • Аналіз вашого бізнес-процесу та юридичних вимог
  • Проектування workflow підписання (одиночне, мульти, ієрархічне)
  • Розробка frontend-компонентів (перегляд PDF, введення підпису)
  • Backend-логіка (вбудовування підпису, генерація аудит-логу, зберігання)
  • Інтеграція з SMS-шлюзом або СКЗІ (за потреби)
  • Інтеграція з вашою CRM/ERP через REST API
  • Документація з API та адміністрування
  • Тестування (навантажувальне, юридичне)
  • Деплой та підтримка протягом місяця після запуску

Строки та як замовити

Орієнтовні строки:

  • Базова реалізація (перегляд + намальований підпис) — від 5 робочих днів.
  • SMS-підтвердження — додатково 1–2 дні.
  • Мультипідписання з workflow — 3–4 дні.

Економія на підписках — до 200 000 грн на рік при 500 підписах. Окупність розробки — 3 місяці. Інтеграція підписання з вашою CRM відбувається через REST API. Тепер ваші клієнти можуть виконувати підписання договорів онлайн, не виходячи з дому. Отримайте консультацію — ми підберемо оптимальну архітектуру для вашого проєкту. Замовте впровадження підписання документів уже сьогодні.

Фронтенд-розробка React: від аудиту до production

Бандл виріс до 3.1 MB gzip — це реальна цифра з проєкту, який прийшов до нас на аудит. Причина: moment.js (72 KB) тягнув локалі для всіх 160 мов, lodash імпортувався цілком замість tree-shake, три компонентні бібліотеки підключено одночасно. TTFB відмінний, але TTI (Time to Interactive) на мобільному — 14 секунд. Користувачі йшли, конверсія впала на 40%. Ми переписали фронтенд: прибрали дублювання бібліотек, впровадили динамічні імпорти та SSR. Результат — бандл зменшився до 850 KB gzip, TTI — 2.1 секунди, LCP — 1.8 с.

Frontend — це не «намалювати красиво». Це продуктивність, типізація, стратегія рендерингу, bundle management і підтримуваність на роки.

Чому Next.js — стандартний вибір для SEO?

React — наш основний UI-фреймворк для складних інтерфейсів. Next.js — стандартний вибір для проєктів з SEO-вимогами або SSR. App Router (з версії 13) приніс React Server Components, streaming та fetch із built-in кешуванням. Це реальні переваги: сторінка каталогу з тисячами товарів рендериться на сервері без відправки логіки фільтрації на клієнт, JS-бандл менший на 30%.

Але App Router — інший спосіб мислення. "use client" потрібно ставити свідомо. Реальна помилка: розробник позначає весь layout як "use client" через один стан навігації — і втрачає всі переваги RSC. Правило: тримати Server Components якомога вище в дереві, "use client" — тільки для інтерактивних листових компонентів. ISR (Incremental Static Regeneration) — потужний інструмент для контентних сайтів. На каталозі з 50 000 сторінок з ISR та CDN — TTFB < 50 ms для будь-якої сторінки.

Як TypeScript запобігає багам у продакшені?

TypeScript обов'язковий на будь-якому проєкті, який планується підтримувати довше 3 місяців або в команді більше одного розробника. Аргумент «пишемо швидко без типів» працює лише перші 2 тижні. Після — баги, пов'язані з невизначеними значеннями, виникають щотижня.

Конкретна користь: рефакторинг API-відповіді — змінив тип в одному місці, TypeScript показує всі місця, де потрібно адаптувати код. Без типів — баг у продакшені через тиждень. strict: true в tsconfig.json — обов'язково. noImplicitAny, strictNullChecks, strictFunctionTypes. Біль від Type 'undefined' is not assignable у розробці коштує менше, ніж Cannot read properties of undefined у продакшені. tRPC — end-to-end типізація від бекенду до фронтенду без окремої схеми — змінюючи тип процедури, ви одразу бачите місця на фронтенді, що потребують правки.

Vue 3 + Nuxt 3 — альтернативний стек для SSR

Vue 3 з Composition API — інший стиль розробки, ближчий до React Hooks. <script setup> та composables роблять код більш перевикористовуваним. Nuxt 3 — фреймворк для Vue з SSR/SSG, аналогічний Next.js. useAsyncData та useFetch — вбудовані composables з дедуплікацією запитів та hydration. Auto-imports зручні, але можуть заплутувати при debug. Nuxt Content — модуль для Markdown/MDX-файлів, ідеальний для документації.

Hydration mismatch — специфічний біль SSR на Vue та React. Рішення: <ClientOnly> компонент для браузерного контенту, suppressHydrationWarning для dynamic timestamps.

Продуктивність: метрики та інструменти

Bundle analysis — стартова точка. @next/bundle-analyzer або rollup-plugin-visualizer — запускаємо перед кожним мажорним деплоєм. Мета: жодна сторінка не повинна вимагати > 200 KB JS gzip для first paint.

Динамічні імпорти для важких компонентів:

const RichEditor = dynamic(() => import('@/components/RichEditor'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

Редактор (Tiptap, Quill, CodeMirror) — типові кандидати на dynamic import. Без цього вони потрапляють в основний бандл. React DevTools Profiler — для пошуку зайвих ре-рендерів. React.memo, useMemo, useCallback — точкові інструменти. Передчасна мемоізація всього підряд додає overhead без користі. Профілюйте спочатку, оптимізуйте потім.

Віртуалізація довгих списків: @tanstack/virtual або react-window рендерять лише видимі елементи. Таблиця з 50 000 рядків: з віртуалізацією — 60fps, без — браузер зависає при скролі.

State management: без овериніжирингу

Для більшості додатків достатньо:

  • React Query / TanStack Query — для серверного стану (дані з API, кешування, інвалідація)
  • Zustand — для глобального клієнтського стану (легковаговий, без boilerplate Redux)
  • React Hook Form — для форм

Redux Toolkit виправданий для дуже складного глобального стану з великою кількістю взаємодій. Для більшості задач — це overkill. Recoil, Jotai — атомарні підходи для незалежних шматків стану.

CSS та дизайн-система

Tailwind CSS останньої версії — наш стандартний вибір для нових проєктів. Utility-first, відмінна інтеграція з компонентними бібліотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива, коли потрібна більш явна ізоляція стилів. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненти з повним контролем над стилями. Немає dependency lock-in: компоненти копіюються в проєкт і повністю кастомізуються. Storybook — для документування компонентної бібліотеки. React DevTools Profiler — офіційний інструмент від команди React.

Тестування

Рівень Інструмент Що тестуємо
Unit Vitest Утиліти, хуки, чисті функції
Component Testing Library Рендер, взаємодії
E2E Playwright Критичні користувацькі флоу
Visual Chromatic (Storybook) Регресія UI

E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.

Орієнтири за термінами та складом робіт

Задача Термін
SPA (дашборд, CRM-інтерфейс) 8–16 тижнів
Next.js сайт з SSR/ISR 6–14 тижнів
Frontend для існуючого API 4–10 тижнів
Компонентна бібліотека 6–12 тижнів

Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.

Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.

У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.

Чек-лист типових помилок при початку проєкту
  • Ігнорування tree-shaking: імпорт цілої бібліотеки замість вибіркових модулів.
  • Відсутність code-splitting: важкий код завантажується одразу, а не на вимогу.
  • Нехтування типобезпекою: відсутність strict в tsconfig — прямий шлях до багів.
  • Надмірна мемоізація: useMemo та useCallback там, де вони не потрібні.
  • Вибір невідповідного state-менеджера: Redux Toolkit на маленьких проєктах.

Який стек обрати для фронтенд-розробки React?

Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.

Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.