Розробка Pattern Lock для iOS та Android: безпека та юзабіліті

Реалізація графічного ключа для входу в мобільний додаток

Графічний ключ — патерн з 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).

Кастомна реалізація 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 на обох платформах?

1. Проектуємо UX-патерн: мінімальна довжина, таймери, анімації.
2. Реалізуємо кастомне View (Compose/SwiftUI) з обробкою жестів.
3. Вбудовуємо криптографічний захист: PBKDF2, зберігання в захищеному контейнері.
4. Інтегруємо з біометрією та fallback-логіном.
5. Документуємо код та описуємо схему.
6. Тестуємо на реальних пристроях (мінімум 5 моделей).
7. Забезпечуємо підтримку після впровадження (2 тижні).

Порівняння реалізації на iOS та Android

Порівняння патерну та PIN-коду

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.