На сайте требовалось реализовать современную, удобную и безопасную систему входа/регистрации. Заказчик предоставил дизайн в Figma. Ключевые требования:
Два способа входа: по номеру телефона (с подтверждением через SMS) и по классическому email+пароль.
Единая форма с переключением между способами входа (табы).
Кастомный дизайн — точное соответствие макету Figma.
Безопасность: защита от перебора, ограничение на количество запросов SMS, капча при подозрительной активности.
Сохранение стандартной логики Битрикс (чтобы не ломать существующих пользователей).
Интеграция с SMS-шлюзом для отправки кодов подтверждения.
1. Анализ и проектирование архитектуры
- Стандартный компонент Битрикс bitrix:system.auth.form не поддерживает вход по телефону с SMS "из коробки". Поэтому я разработал кастомный компонент, который:
Расширяет стандартную логику аутентификации,
Добавляет поддержку входа по телефону через временные коды,
Сохраняет обратную совместимость с существующими пользователями (email/логин).
2. Создание кастомного компонента (D7)
Структура компонента:
text
/local/components/custom/auth.phone.email/
├── class.php # Основная логика (наследование от CBitrixComponent)
├── .parameters.php # Параметры компонента
├── templates/
│ └── figma/
│ ├── template.php # HTML-шаблон (верстка по Figma)
│ ├── script.js # JS-логика (переключение табов, отправка SMS)
│ ├── style.css # Стили под макет
│ └── result_modifier.php
Ключевые методы в class.php:
onPrepareComponentParams() — подготовка параметров
executeComponent() — основная логика
processPhoneAuth() — обработка авторизации по телефону
sendSmsCode() — отправка SMS-кода
verifySmsCode() — проверка введенного кода
3. Реализация мультиспособов авторизации
Реализовал единое поле ввода с автоопределением типа.
Доступные сценарии входа:
Email + пароль (для существующих пользователей)
Телефон + пароль (если телефон уже привязан)
Телефон + SMS-код (без пароля — удобно и безопасно)
Авторегистрация при первом входе по SMS (опционально)
4. Интеграция с SMS-шлюзом
Выбрал и интегрировал SMS-сервис для отправки кодов подтверждения. Реализовал два подхода:
Вариант А: Кастомная интеграция через API
- Написал класс-обработчик для конкретного SMS-провайдера (например, SMS.RU, SMSC.RU).
- Использовал стандартную систему событий Битрикс для отправки .
Вариант Б: Интеграция через модуль СМС Оповещений
- Подключил готовый модуль bxmaker.smsnotice .
- Настроил отправку через 70+ поддерживаемых сервисов.
Логика отправки кода:
- Пользователь вводит телефон → проверка формата
- Генерация 4 значного кода
- Сохранение кода в сессии/БД с временем жизни (5-10 минут)
- Отправка SMS через выбранный шлюз
- Ограничение на повторную отправку (не чаще 1 раза в 60 сек)
- Pixel Perfect — точное соответствие макету
- Адаптивность — форма одинаково хорошо выглядит на десктопе, планшете и мобильных
- Табы для переключения между способами входа (по телефону / по email)
- AJAX-отправка — форма работает без перезагрузки страницы
- Валидация на стороне клиента (JS) и сервера
6. Безопасность и защита
- Реализовал многоуровневую защиту от злоупотреблений .
✅ Разработан кастомный компонент авторизации/регистрации с поддержкой 2 способов входа
✅ Pixel Perfect верстка по макету Figma
✅ Интеграция с SMS-шлюзом (название сервиса)
✅ Полная адаптивность под все устройства
✅ Многоуровневая защита от ботов и перебора
Пожаловаться
