Реализация электронной подписи (рисование подписи) в мобильном приложении

Реализация электронной подписи (рисование подписи) в мобильном приложении

Рукописная подпись на экране смартфона — это не просто «красивая картинка». Для юридической значимости она должна быть привязана к личности подписанта, к конкретному документу и к моменту подписания. Иначе это просто PNG с каракулями, которое ничего не доказывает.

Захват рукописной подписи

Сбор траектории касания — основа. Нужны не просто координаты touchMove, а весь поток событий с давлением, скоростью и временными метками. Это позволяет воспроизвести подпись анимированно и собрать биометрические метаданные.

Android — низкоуровневый ввод:

override fun onTouchEvent(event: MotionEvent): Boolean {
    val x = event.x
    val y = event.y
    val pressure = event.pressure  // 0.0 - 1.0
    val timestamp = event.eventTime

    when (event.action) {
        MotionEvent.ACTION_DOWN -> startStroke(x, y, pressure, timestamp)
        MotionEvent.ACTION_MOVE -> {
            // getHistorical* для промежуточных точек между событиями
            for (i in 0 until event.historySize) {
                addHistoricalPoint(
                    event.getHistoricalX(i),
                    event.getHistoricalY(i),
                    event.getHistoricalPressure(i),
                    event.getHistoricalEventTime(i)
                )
            }
            addPoint(x, y, pressure, timestamp)
        }
        MotionEvent.ACTION_UP -> endStroke(x, y, pressure, timestamp)
    }
    return true
}

event.historySize критично — между двумя ACTION_MOVE событиями система батчит промежуточные точки. Игнорирование исторических точек даёт угловатые штрихи вместо плавных кривых.

iOS — UIBezierPath с Bezier-сглаживанием:

func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    guard let touch = touches.first else { return }
    let currentPoint = touch.location(in: self)
    let previousPoint = touch.previousLocation(in: self)
    let force = touch.force / touch.maximumPossibleForce // 3D Touch / Pencil

    // Quadratic bezier для сглаживания
    let midPoint = CGPoint(
        x: (currentPoint.x + previousPoint.x) / 2,
        y: (currentPoint.y + previousPoint.y) / 2
    )
    path.addQuadCurve(to: midPoint, controlPoint: previousPoint)
    setNeedsDisplay()
}

Для Apple Pencil — predictedTouches(for:) даёт предсказанные точки для снижения задержки рисования. Без предиктивных касаний визуальный отклик Pencil воспринимается как запаздывающий даже при 120 Hz.

Переменная толщина линии

Профессиональная подпись выглядит естественно когда толщина штриха меняется с давлением и скоростью. Математика проста: width = baseWidth + pressure * maxExtraWidth. При высокой скорости (расстояние между точками большое) — тонкая линия, при медленном движении — толстая.

fun calculateStrokeWidth(pressure: Float, velocity: Float): Float {
    val pressureComponent = pressure * MAX_PRESSURE_WIDTH
    val velocityComponent = (1f - velocity.coerceIn(0f, 1f)) * MAX_VELOCITY_WIDTH
    return BASE_WIDTH + pressureComponent * 0.6f + velocityComponent * 0.4f
}

Биометрические метаданные

Для усиления юридической силы — собираем метаданные процесса подписания:

• Временные метки каждого штриха
• Скорость движения по участкам
• Нажим (если устройство поддерживает)
• Длительность каждого штриха и паузы между ними
• Общее время подписания

Эти данные не отображаются пользователю, но хранятся в базе данных и могут быть использованы при судебном оспаривании подлинности подписи — поведенческая биометрия.

Привязка к документу

Рисунок подписи сам по себе бесполезен. Нужно:

1. Зафиксировать хэш документа до подписания (SHA-256 PDF или текстового содержимого)
2. Прикрепить подпись (PNG + метаданные траектории) к этому хэшу
3. Сохранить на сервере с timestamp и идентификатором подписанта
4. Опционально: встроить подпись в PDF через iText (Java/Android) или PDFKit (iOS)

Серверная запись:

{
  "document_hash": "sha256:abc123...",
  "signer_id": "user-uuid",
  "signed_at": "2025-03-26T14:22:00Z",
  "ip_address": "1.2.3.4",
  "device_fingerprint": "...",
  "signature_image_url": "...",
  "stroke_data_encrypted": "...",
  "session_metadata": {
    "duration_ms": 4200,
    "stroke_count": 5,
    "avg_pressure": 0.72
  }
}

PDF интеграция

На iOS: PDFKit + CGContext для рисования подписи поверх страницы PDF. Для профессионального встраивания с AcroForm полями — сторонняя библиотека PSPDFKit или серверный iText через API.

На Android: PdfRenderer для отображения, встраивание — через iText Android или Apache PDFBox.

Важный момент: визуальное встраивание подписи в PDF ≠ цифровая подпись PDF (которая создаётся через PKI). Это разные вещи. Для юридически значимого PDF-документа нужна именно PKI-подпись — рукописная подпись добавляется как дополнительный визуальный элемент.

Готовые SDK vs кастомная реализация

Готовые: SignaturePad (Android, iOS), react-native-signature-canvas, signature_pad (Flutter). Дают базовую функциональность быстро. Не дают: биометрические метаданные, переменную толщину с давлением, интеграцию с PKI.

Если требуется только визуальная подпись для простой ПЭП — готовый SDK оправдан. Для полноценной НЭП с аудит-треком — кастомная реализация.

Сроки: кастомный компонент рисования с давлением, сглаживанием, экспортом в PNG + серверная привязка к документу + встраивание в PDF — 2–3 дня на платформу.