Реализация графического ключа для входа в мобильное приложение
Графический ключ — паттерн из Android, в iOS встречается реже (нет системного аналога). Принцип тот же, что и у PIN: локальная разблокировка хранилища без отправки секрета на сервер. Но у паттерна есть специфические проблемы безопасности, которые надо понимать до начала реализации. Наш опыт работы с мобильной аутентификацией (более 20 проектов) показывает: грамотная реализация с правильным криптостеком делает паттерн удобным и достаточно безопасным для большинства сценариев.
Почему графический ключ уязвим для shoulder surfing?
На экране телефона остаются следы от пальца. Исследование Авраама и коллег (2010) показало: большинство пользователей рисуют L-, Z- или S-образные паттерны — 12 наиболее популярных паттернов покрывают ~20% пользовательской базы. Паттерн из 9 точек восстанавливается визуально с расстояния 1–2 метра под правильным углом освещения. В нашей практике мы применяем таймер скрытия линий и анимацию затухания, чтобы минимизировать утечку.
Как кодируется паттерн и защищается криптографией?
Стандартная сетка 3×3 — 9 точек с индексами 0–8. Паттерн — последовательность индексов. Минимальная длина — 4 точки (требование Android). Из 9 точек с минимальной длиной 4 возможных паттернов ~389 112 — существенно меньше, чем у 6-значного PIN (1 000 000 комбинаций). PIN-код надёжнее графического ключа в 2.5 раза по числу комбинаций.
Кодируем паттерн в строку индексов: [0,1,2,5,8] → "01258". Эту строку используем как input для деривации ключа — та же схема PBKDF2, что и для PIN. Паттерн в plaintext никогда не сохраняем. Для хранения производного ключа используем Keychain (iOS) или EncryptedSharedPreferences (Android).
Подробнее о криптографической схеме
PBKDF2 с солью и 100 000 итераций — минимальный порог. На Android дополнительно применяем шифрование с помощью Android Keystore, на iOS — Secure Enclave. Это обеспечивает защиту даже при компрометации устройства.Кастомная реализация View на Jetpack Compose
На Android можно взять com.github.itsxtt:pattern-lock или аналогичные open-source библиотеки — базовую логику рисования линий. Но в enterprise-проектах мы пишем сами: полный контроль над визуалом, криптографической частью, и нет зависимости от неподдерживаемой библиотеки.
@Composable fun PatternLockView( onPatternComplete: (List<Int>) -> Unit ) { val selectedDots = remember { mutableStateListOf<Int>() } var currentPosition by remember { mutableStateOf(Offset.Zero) } Canvas( modifier = Modifier .fillMaxSize() .pointerInput(Unit) { detectDragGestures( onDragStart = { offset -> /* найти ближайшую точку */ }, onDrag = { change, _ -> currentPosition = change.position // добавить точку если касание в радиусе }, onDragEnd = { if (selectedDots.size >= 4) onPatternComplete(selectedDots.toList()) selectedDots.clear() } ) } ) { // рисуем точки и линии между selectedDots + линию до currentPosition } } Ключевые детали: точку можно посетить только один раз; линия, пересекающая незатронутую точку, автоматически её добавляет (стандартное поведение Android Pattern Lock); минимальное расстояние касания до точки — ~24dp. Скрываем паттерн через 500–800мс после завершения ввода — линии исчезают, точки остаются. Это предотвращает shoulder surfing.
iOS: кастомная реализация через SwiftUI
В iOS нет системного Pattern Lock. Реализуем через SwiftUI Canvas + DragGesture. Логика аналогичная, визуал адаптируем под iOS Human Interface Guidelines. На iOS паттерн встречается реже — обычно это специфический запрос клиента (например, детские приложения или специализированные enterprise-инструменты). Гарантируем бесшовную интеграцию с биометрией (Face ID / Touch ID) и, при необходимости, с кастомной UI-анимацией.
Как реализовать Pattern Lock на обеих платформах?
- Проектируем UX-паттерн: минимальная длина, таймеры, анимации.
- Реализуем кастомное View (Compose/SwiftUI) с обработкой жестов.
- Встраиваем криптографическую защиту: PBKDF2, хранение в защищённом контейнере.
- Интегрируем с биометрией и fallback-логином.
- Документируем код и описываем схему.
- Тестируем на реальных устройствах (минимум 5 моделей).
- Обеспечиваем поддержку после внедрения (2 недели).
Сравнение реализации на iOS и Android
| Параметр | iOS | Android |
|---|---|---|
| Язык | Swift 5.9+, UIKit/SwiftUI | Kotlin, Jetpack Compose |
| Хранение | Keychain, Secure Enclave | EncryptedSharedPreferences, Android Keystore |
| Stealth-режим | Таймер 500мс, анимация затухания | Таймер 800мс, анимация затухания |
| Биометрия | Face ID / Touch ID | BiometricPrompt |
| Сроки | 5–8 дней | 5–8 дней |
Сравнение паттерна и PIN-кода
| Критерий | Графический ключ (3×3) | PIN-код (6 цифр) |
|---|---|---|
| Число комбинаций | ~389 112 (мин. 4 точки) | 1 000 000 |
| Стойкость к shoulder surfing | Уязвим, нужна защита | Умеренная |
| Удобство ввода | Высокое, интуитивно | Среднее |
| Рекомендация | Для приложений с низкими требованиями | Для банков, мед.данных |
Fallback и счётчик ошибок
После 5 неудачных попыток — требуем полный логин через credentials. Счётчик в Keychain (iOS) или EncryptedSharedPreferences (Android). После успешного логина сбрасываем счётчик и предлагаем перерисовать паттерн — важно предупредить пользователя, что старый паттерн сброшен. Этот механизм обязателен для защиты от брутфорса и экономит ресурсы поддержки.
Когда не стоит использовать
Паттерн — слабее PIN при равном числе символов. Для банковских приложений, медицинских данных или корпоративного доступа — рекомендуем PIN 6+ цифр с PBKDF2 или биометрию. Паттерн уместен в приложениях, где удобство важнее максимальной безопасности: трекеры, органайзеры, приложения для детей.
Что входит в работу
- Проектирование UX-паттерна: выбор минимальной длины, таймеры, анимации.
- Реализация кастомного View (Compose/SwiftUI).
- Криптографическая защита: PBKDF2, хранение в защищённом контейнере.
- Интеграция с биометрией и fallback-логином.
- Документация кода и описание схемы.
- Тестирование на реальных устройствах (как минимум 5 моделей).
- Поддержка после внедрения (2 недели).
Сроки ориентировочно
Кастомная реализация Pattern Lock с правильной криптографической схемой на одной платформе — 5–8 рабочих дней. На обеих платформах — 10–14 дней (с адаптацией UX под каждую ОС). Стоимость рассчитывается индивидуально. Оцениваем проект бесплатно — свяжитесь с нами, чтобы обсудить детали. Получите консультацию: наши инженеры имеют более 5 лет опыта в мобильной разработке и сертификации Apple / Google.