Разработка системы верификации электронной подписи на сайте под ключ

Типичная ситуация: вы заключаете договор с контрагентом через электронный документооборот, но он сомневается в подлинности подписи. Или вам нужно предоставить клиентам возможность проверить подписанный документ онлайн. Мы решаем эту задачу: от интеграции простой ЭП до криптографической верификации КЭП через КриптоПро.

Какие проблемы решает система верификации?

Разные типы подписей — разная логика проверки. Простая электронная подпись (рисованная подпись, SMS-код) не несёт криптографической защиты. Единственный способ проверить её подлинность — убедиться, что документ не изменялся после подписания. Для этого мы храним хэш документа (SHA-256) в момент подписания и сравниваем его при верификации. Если хэши не совпадают — документ был изменён, подпись недействительна.

Квалифицированная электронная подпись (КЭП) требует гораздо более сложной проверки. Нужно расшифровать подпись, проверить сертификат, цепочку доверия, срок действия, статус отзыва. Это включает работу с криптопровайдерами (КриптоПро), плагинами браузера или серверными SOAP-вызовами.

Совместимость с браузерами и устройствами. Клиентская верификация КЭП требует установки Browser Plugin, что не всегда возможно (мобильные устройства, корпоративные ограничения). Поэтому мы предлагаем серверную верификацию через КриптоПро Web Service — пользователь просто загружает документ и подпись, а вся криптография выполняется на сервере. Это универсальное решение.

Безопасность и логирование. Важно не только проверить подпись, но и сохранить доказательства проверки. Мы логируем каждую попытку: IP, User-Agent, временную метку, результат. Это защищает от атак повторного воспроизведения и даёт аудиторский след.

Как мы это делаем?

Архитектура решения

• Frontend: React 18 (Next.js 14) для публичной страницы верификации, TypeScript, Tailwind.
• Backend: Laravel 11 (PHP 8.3) или Node.js (Express) для API и серверной верификации.
• База данных: PostgreSQL для хранения хэшей и логов, Redis для кэширования статусов сертификатов.
• Криптография: КриптоПро CSP (серверная верификация через SOAP) и CryptoPro Browser Plugin (клиентская).

Код клиентской верификации КЭП через плагин уже готов и используется в проектах:

async function verifyCadesSignature(documentBase64, signatureBase64) {
  const plugin = await cadesplugin;
  const signedData = await plugin.CreateObjectAsync('CAdESCOM.CadesSignedData');
  await signedData.propset_ContentEncoding(plugin.CADESCOM_BASE64_TO_BINARY);
  await signedData.propset_Content(documentBase64);
  try {
    await signedData.VerifyCades(
      signatureBase64,
      plugin.CADESCOM_CADES_BES,
      true
    );
  } catch (e) {
    return { valid: false, error: e.message };
  }
  const signers = await signedData.Signers;
  const signer = await signers.Item(1);
  const cert = await signer.Certificate;
  return {
    valid: true,
    signer: {
      name: await cert.GetInfo(plugin.CAPICOM_CERT_INFO_SUBJECT_SIMPLE_NAME),
      issuer: await cert.GetInfo(plugin.CAPICOM_CERT_INFO_ISSUER_SIMPLE_NAME),
      validFrom: await cert.ValidFromDate,
      validTo: await cert.ValidToDate,
      thumbprint: await cert.Thumbprint,
    },
    signedAt: await signer.SigningTime,
    certValid: await cert.IsValid().Result,
  };
}

Серверная верификация через КриптоПро Web Service — пример на PHP:

class CryptoProVerificationService {
    public function verifySignature(string $documentBase64, string $signatureBase64): array {
        $client = new SoapClient('https://www.cryptopro.ru/ocsp/ocsp.php?wsdl');
        $result = $client->VerifyHash([
            'Signature' => $signatureBase64,
            'Content' => $documentBase64,
            'Type' => 'CAdES-BES',
            'IsDetached' => true,
        ]);
        return [
            'valid' => $result->IsValid,
            'signerName' => $result->SignerName,
            'signedAt' => $result->SigningTime,
            'certSerial' => $result->CertSerialNumber,
        ];
    }
}

Почему серверная верификация лучше для пользователя?

Серверная верификация не требует установки плагинов, работает на любых устройствах и браузерах. Проверка занимает 2-3 секунды — в 2 раза быстрее, чем установка и настройка плагина. Это снижает количество обращений в поддержку и повышает конверсию верификации.

Как публичная страница и QR-код упрощают проверку?

Для внешних пользователей (контрагент проверяет договор) мы создаём страницу без авторизации. Пример компонента на React:

async function VerificationPage({ params }) {
  const result = await verifyDocumentSignature(params.documentId, params.signatureId);
  return (
    <div className="max-w-2xl mx-auto p-8">
      <div className={`rounded-xl p-6 ${result.valid ? 'bg-green-50' : 'bg-red-50'}`}>
        <div className="flex items-center gap-3">
          {result.valid ? <CheckCircleIcon className="text-green-600 w-8" /> : <XCircleIcon className="text-red-600 w-8" />}
          <h1 className="text-xl font-bold">
            {result.valid ? 'Подпись действительна' : 'Подпись недействительна'}
          </h1>
        </div>
        {result.valid && (
          <dl className="mt-4 grid grid-cols-2 gap-4 text-sm">
            <div><dt className="text-gray-500">Подписант</dt><dd>{result.signerName}</dd></div>
            <div><dt className="text-gray-500">Дата подписания</dt><dd>{formatDate(result.signedAt)}</dd></div>
            <div><dt className="text-gray-500">Документ не изменён</dt><dd>Да</dd></div>
            <div><dt className="text-gray-500">Сертификат</dt><dd>{result.certSerial}</dd></div>
          </dl>
        )}
      </div>
    </div>
  );
}

QR-код, размещённый на подписанном документе, ведёт на страницу верификации:

import QRCode from 'qrcode';

const verificationUrl = `${process.env.APP_URL}/verify/${documentId}/${signatureId}`;
const qrDataUrl = await QRCode.toDataURL(verificationUrl, {
  width: 100,
  margin: 1,
  errorCorrectionLevel: 'M',
});

Сравнение методов верификации

Процесс работы

1. Аналитика — выявляем типы подписей, требования к безопасности, поток пользователей.
2. Проектирование — выбираем архитектуру (клиентская/серверная верификация), стек, протоколы.
3. Разработка — реализуем API, публичную страницу, QR-код, интеграцию с вашей CRM/ERP.
4. Тестирование — проверяем на разных браузерах, с реальными сертификатами, нагрузочное тестирование.
5. Деплой — настраиваем CI/CD, мониторинг, кэширование.
6. Обучение и поддержка — передаём документацию, доступы, проводим обучение сотрудников. Предоставляем 1 месяц бесплатной поддержки.

Что входит в работу

• Исходный код системы верификации.
• Документация API (OpenAPI/Swagger).
• Инструкция по эксплуатации для администраторов.
• Доступы к репозиторию и серверу.
• 1 месяц поддержки после запуска.

Типичные ошибки при внедрении

• Не проверяется срок действия сертификата — подпись может быть создана просроченным сертификатом. Мы всегда проверяем ValidFrom/ValidTo.
• Отсутствует логирование попыток верификации — сложно доказать, что проверка была выполнена. Мы логируем каждую попытку.
• QR-код ведёт на HTTP, а не HTTPS — данные подписи передаются в открытом виде. Мы используем только HTTPS с HSTS.
• Не настроен CORS — публичная страница не загружается из-за ограничений браузера. Мы правильно конфигурируем заголовки.

Сроки

Верификация по хэшу с публичной страницей и QR-кодом — 2–3 дня. Верификация КЭП через браузерный плагин — 3–4 дня. Серверная верификация через КриптоПро Web Service — 3–5 дней. Точную оценку дадим после аудита вашего проекта.

Свяжитесь с нами, чтобы обсудить детали. Закажите разработку системы верификации подписи — оценим проект в течение одного рабочего дня.