Авторизация на сайте через номер телефона - это быстрый и удобный способ входа, например, в личный кабинет. Вам не нужно запоминать сложные пароли и логины, а также ждать отправки кода или ссылки на почту. Достаточно ввести свой номер и получить код подтверждения на него. Изи!
Плюсы:
- Повышаем вероятность регистрации, ведь ввести номер удобнее, чем писать почту и пароль.
- Можно совместить авторизацию и регистрацию в одном месте.
- Безопасность! Вместо пароля присылают одноразовый код.
- Без Captcha. Больше они не будут никого бесить.
- Авторизация или регистрация требуют минимум действий.
- Можно хранить номер телефона в кэше, чтобы ускорить процесс авторизации.
Что нужно учитывать при проектировании авторизации через телефон
За и против кода страны в поле ввода номера телефона.
Простой интерфейс, правда? Но есть много нюансов, например:
Если поставить +7 вначале, то мы вроде как, помогаем избежать лишних нажатий. Но! Пользователь помнит и пишет свой номер на автомате, используя + и код страны.
Есть решение! Включить автоматическое форматирование номера, чтобы он сам подстраивался по нужный формат.
Ограничения поля ввода
- Оградите пользоватля количеством вводимих чисел, в зависимости от кода страны.
- На мобильной версии включаем числовую раскладку по умолчанию; также можно включить запрет на переключение на символьную клавиатуру
- Кнопка "Отправить" не активна, пока номер не введён
Оформляем номер правильно!
У телефонных номеров есть свои правила оформления, и их нужно учитывать.
Номер ввели. Код отправили. Что дальше?
- Отображайте, на какой номер был выслан код
- Дайте пользователю вернуться назад, вдруг он ввёл не тот номер телефона
- Пишите код в начале СМС-сообщения
- Если в коде есть ограничения по количеству символов, то лучше оформить в виде слотов. Телефоны давно научились сами вставлять код из СМС, но и мы не забываем ставить фокус ввода на первый слот.
- При вводе числа переносим фокус на следующий слот; при нажатии кнопки "назад" на клавиатуре удаляем число и возвращаем на предыдущий слот.
- Подсвечивайте активный слот.
- Если код не пришёл, то добавляем кнопку "Отправить снова". Чтобы не было спама, нужно выставить таймаут на отправку, например, 30-60-90 секунд.
- Ограничения на количество попыток ввода? Да, это плюс к безопасности! Трёх попыток будет достаточно, чтобы вернуть пользователя обратно на экран ввода телефона.
- Отображайте что новый код отправлен
- Бывает так, что сеть тормозит и код может долго идти, или вобще не дойти, напишите краткий гайд по этой теме.
- Очистка слотов при ошибке, обязательно! Не бесите пользователя.
- Проверяем правильность ввода на лету, без использования кнопок "Отправить" или "Подтвердить".
- Код введен неверно, и тут пользователь лезет в СМС и вводит код еще раз или запрашивает новый код. 🤷🏻♂️
- Код введён верно, а значит, нам не нужно подтверждение. Авторизация считается успешной, и пользователя перекидывает на страницу личного кабинета, корзины и т.д.
Альтернативные способы входа
Можно сделать ещё удобней, например чекать устройство и браузер и добавлять альтернативный варианты входа, например по Apple ID, VK ID, Yandex или Госуслуги
Читайте больше в телеграм-канале https://t.me/to_product_me
