Реалізація графічного ключа для входу в мобільний додаток
Графічний ключ — патерн з 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.