В современных веб-приложениях авторизация через телефон с подтверждением одноразовым паролем (OTP) становится всё более востребованной. В этой статье мы разберём, как реализовать такую авторизацию с помощью популярного плагина Contact Form 7 в WordPress. Это позволит повысить безопасность и удобство входа для пользователей вашего сайта.
Почему стоит использовать авторизацию по телефону с OTP
Авторизация по телефону с OTP – это удобный и надёжный способ подтверждения личности пользователя без необходимости запоминать пароли. Она особенно полезна для сайтов, где важна простота и безопасность: интернет-магазинов, сервисов с персональными кабинетами, форумов и т.д.
Contact Form 7 — мощный и гибкий плагин для создания форм в WordPress, и его возможности позволяют реализовать кастомную авторизацию с отправкой OTP на номер телефона.
Основные шаги реализации авторизации через Contact Form 7 с OTP
Для реализации авторизации с подтверждением по телефону нам потребуется:
- Создать форму с полем для ввода номера телефона.
- Сгенерировать и отправить OTP на указанный номер.
- Создать форму для ввода кода OTP.
- Проверить корректность кода и авторизовать пользователя.
1. Создание формы ввода телефона
Создайте стандартную форму Contact Form 7 с полем типа tel:
[tel* cf7auth_phone placeholder "Введите номер телефона"]
[submit "Отправить код"]Обратите внимание на уникальный идентификатор поля cf7auth_phone, он понадобится для обработки данных.
2. Генерация и отправка OTP
Для отправки кода OTP на телефон можно использовать SMS-шлюзы, например, Twilio, SMS.ru, или другие провайдеры. Ниже пример функции, которая генерирует случайный 6-значный код и отправляет его через SMS (на примере SMS.ru API).
function contactform7ru_generate_and_send_otp($phone) {
$otp = rand(100000, 999999);
// Сохраняем OTP в сессию для последующей проверки
if(!session_id()) session_start();
$_SESSION['cf7_otp'] = $otp;
$_SESSION['cf7_phone'] = $phone;
// Отправка SMS через SMS.ru API (пример)
$api_id = 'ВАШ_API_ID';
$message = "Ваш код подтверждения: $otp";
$url = "https://sms.ru/sms/send?api_id=$api_id&to=$phone&msg=" . urlencode($message) . "&json=1";
$response = wp_remote_get($url);
if (is_wp_error($response)) {
return false;
}
$body = json_decode(wp_remote_retrieve_body($response), true);
return ($body['status'] === 'OK');
}Далее необходимо связать вызов этой функции с отправкой формы, используя хук wpcf7_before_send_mail:
add_action('wpcf7_before_send_mail', 'contactform7ru_cf7_handle_phone_form');
function contactform7ru_cf7_handle_phone_form($contact_form) {
$submission = WPCF7_Submission::get_instance();
if (!$submission) return;
$data = $submission->get_posted_data();
if (isset($data['cf7auth_phone'])) {
$phone = sanitize_text_field($data['cf7auth_phone']);
$sent = contactform7ru_generate_and_send_otp($phone);
if (!$sent) {
$contact_form->skip_mail = true;
$submission->set_status('validation_failed');
$submission->add_error('cf7auth_phone', 'Не удалось отправить код подтверждения. Попробуйте позже.');
} else {
// Предотвращаем отправку письма с формой ввода телефона
$contact_form->skip_mail = true;
// Можно перенаправить на страницу ввода OTP или показать форму ввода кода
wp_redirect(home_url('/vvod-otp')); // замените на реальный URL
exit;
}
}
}3. Форма для ввода кода OTP
Создайте новую форму CF7 для ввода кода, например:
[text* cf7auth_otp placeholder "Введите код из SMS"]
[submit "Подтвердить"]И добавьте обработчик проверки кода:
add_action('wpcf7_before_send_mail', 'contactform7ru_cf7_handle_otp_form');
function contactform7ru_cf7_handle_otp_form($contact_form) {
$submission = WPCF7_Submission::get_instance();
if (!$submission) return;
$data = $submission->get_posted_data();
if (isset($data['cf7auth_otp'])) {
if(!session_id()) session_start();
$input_otp = sanitize_text_field($data['cf7auth_otp']);
if (empty($_SESSION['cf7_otp']) || $input_otp !== $_SESSION['cf7_otp']) {
$contact_form->skip_mail = true;
$submission->set_status('validation_failed');
$submission->add_error('cf7auth_otp', 'Неверный код подтверждения.');
return;
}
// Здесь можно выполнить авторизацию пользователя или регистрацию
$phone = $_SESSION['cf7_phone'];
// Пример: поиск пользователя по метаполю телефона
$user = get_users([
'meta_key' => 'phone_number',
'meta_value' => $phone,
'number' => 1
]);
if (empty($user)) {
// Регистрация нового пользователя
$userdata = [
'user_login' => 'user_' . $phone,
'user_pass' => wp_generate_password(),
'meta_input' => ['phone_number' => $phone]
];
$user_id = wp_insert_user($userdata);
$user = get_user_by('ID', $user_id);
} else {
$user = $user[0];
}
wp_set_current_user($user->ID);
wp_set_auth_cookie($user->ID);
do_action('wp_login', $user->user_login, $user);
// Очистка сессии
unset($_SESSION['cf7_otp'], $_SESSION['cf7_phone']);
// Перенаправление после успешного входа
wp_redirect(home_url('/lichnyy-kabinet'));
exit;
}
}Рекомендации по безопасности и улучшению
Обратите внимание, что хранение OTP в сессии подходит для простых сценариев, но в реальных проектах стоит рассмотреть хранение с ограничением времени действия и защиты от перебора.
Для отправки SMS используйте надёжные сервисы с поддержкой регионов и протоколов безопасности.
Также можно расширить функционал, добавив повторную отправку кода, ограничение количества попыток, логирование событий и уведомления администратору.
Интеграция с WPShop и другие полезные плагины
Для расширения функционала можно использовать плагин WPGPT, который позволяет автоматизировать создание сценариев общения и интеграцию с внешними сервисами.
Для защиты от спама вместе с OTP рекомендуем использовать Clearfy Pro, который оптимизирует безопасность сайта и снижает нагрузку.
Итоги
Реализация авторизации по телефону с подтверждением OTP через Contact Form 7 — это практичный и гибкий способ добавить современную систему входа на сайт без сложных плагинов и сервисов. Используя приведённый пример, можно легко адаптировать его под свои задачи и интегрировать с другими сервисами.