Реалізація QR-коду для авторизації на іншому пристрої

Реалізація QR-коду для авторизації на іншому пристрої

QR-авторизація — це коли користувач уже залогінен у мобільному додатку, відкриває веб-сайт або планшет, та замість введення пароля сканує QR-код телефоном. Telegram Web, WhatsApp Web, Steam реалізують саме цю механіку. Зручно та безпечно: credentials не вводяться на другому пристрої.

Протокол авторизації

Схема працює через тимчасовий challenge:

1. Друге пристрій (веб/планшет) запитує у backend одноразовий session_token та qr_id.
2. Відображає QR-код з вмістом: yourapp://qr-auth?token={session_token}.
3. Веб починає polling або підписується на WebSocket-подію по qr_id.
4. Користувач сканує QR телефоном — додаток декодує session_token.
5. Телефон відправляє на backend: "Користувач X авторизує сесію session_token".
6. Backend перевіряє, що session_token існує та не закінчився, створює сесію для другого пристрою.
7. Друге пристрій отримує access_token через WebSocket або наступний polling-запит.

session_token живе 2–5 хвилин. Після використання — негайно інвалідується. Повторне використання неможливе.

Реалізація на мобільному

Телефон сканує QR та підтверджує авторизацію:

class QRAuthViewModel(
    private val qrAuthRepository: QRAuthRepository,
    private val cameraManager: CameraManager
) : ViewModel() {

    fun onQRScanned(qrContent: String) {
        val token = parseQRToken(qrContent) ?: run {
            _state.value = QRAuthState.InvalidQR
            return
        }
        // Показуємо екран підтвердження до відправки запиту
        _state.value = QRAuthState.ConfirmationRequired(token)
    }

    fun confirmAuthorization(token: String, deviceInfo: DeviceInfo) {
        viewModelScope.launch {
            _state.value = QRAuthState.Loading
            qrAuthRepository.authorizeQRSession(
                sessionToken = token,
                deviceName = deviceInfo.name,
                deviceType = deviceInfo.type
            ).fold(
                onSuccess = { _state.value = QRAuthState.Authorized },
                onFailure = { e ->
                    _state.value = when (e) {
                        is TokenExpiredException -> QRAuthState.QRExpired
                        is AlreadyUsedException -> QRAuthState.QRAlreadyUsed
                        else -> QRAuthState.Error(e.message)
                    }
                }
            )
        }
    }
}

Екран підтвердження — обов'язковий. Користувач повинен явно торкнути "Увійти", прежде чем сесія буде авторизована. Без цього кроку — риск випадкового сканування чужого QR.

Генерація та відображення QR на другому пристрої

На веб QR обновляється за закінченням — новий запит до backend за свіжим session_token. Анімований таймер показує, скільки лишилося. По WebSocket: { event: "qr_authorized", accessToken: "..." } — миттєва авторизація без перезагрузки сторінки.

На планшеті (мобільне друге пристрій) — та ж логіка, лише QR відображається через нативну бібліотеку. На Android: zxing, на iOS: CIFilter.qrCodeGenerator.

Безпека

QR-код містить лише тимчасовий токен — не credentials. Навіть якщо хтось сфотографував QR — токен закінчиться протягом хвилин або вже використаний. HTTPS обов'язковий для всіх запитів. Backend перевіряє, що session_token створений для того ж user_id, що підтверджує телефон.

Реалізація QR-авторизації (мобільний сканер + backend protocol + веб-сторона): 2–3 тижні. Вартість розраховується індивідуально.