WooCommerce: решение проблем с авторизацией через телефон без плагинов

Диагностика проблем с авторизацией через телефон в WooCommerce

Авторизация через телефон — удобный способ входа для пользователей, но при самостоятельной реализации без плагинов часто возникают следующие проблемы:

• Неправильная валидация номера телефона и кода подтверждения
• Отсутствие интеграции с системой пользователей WordPress (wp_users)
• Сбои при создании новых пользователей или аутентификации существующих
• Отсутствие защиты от повторного использования кода или перебора
• Ошибки в AJAX-обработке форм и редиректах после входа

Чтобы выявить источник проблемы, проверьте консоль браузера на ошибки JavaScript, логи PHP на наличие предупреждений и ошибки, а также убедитесь, что AJAX-запросы корректно обрабатываются в WordPress.

Пошаговое решение: реализация авторизации по телефону без плагинов

1. Создание пользовательского поля для телефона

Добавьте поле ввода телефона в форму регистрации или отдельную форму входа:

<form id="phone-login-form" method="post">
  <label for="phone">Телефон:</label>
  <input type="tel" id="phone" name="phone" pattern="\+?\d{10,15}" required />
  <button type="submit">Получить код</button>
</form>

2. Отправка и проверка SMS-кода

Вам понадобится интеграция с SMS-провайдером (например, Twilio, SMS.ru) для отправки кода на номер. В functions.php зарегистрируйте AJAX-обработчик для отправки кода:

add_action('wp_ajax_nopriv_send_phone_code', 'send_phone_code_callback');
add_action('wp_ajax_send_phone_code', 'send_phone_code_callback');

function send_phone_code_callback() {
  $phone = sanitize_text_field($_POST['phone']);
  if (!preg_match('/^\+?\d{10,15}$/', $phone)) {
    wp_send_json_error('Неверный формат телефона');
  }
  $code = rand(100000, 999999);
  // Сохраняем код и телефон в сессию или transient
  set_transient('phone_code_' . md5($phone), $code, 5 * MINUTE_IN_SECONDS);
  // Отправка SMS (пример, здесь нужно реализовать вызов API провайдера)
  // send_sms($phone, "Ваш код: $code");
  wp_send_json_success('Код отправлен');
}

Замените комментарий на вызов API SMS-провайдера.

3. Обработка входа с проверкой кода

Добавьте форму ввода кода и AJAX-обработчик для авторизации:

<form id="phone-code-form" method="post">
  <input type="hidden" id="phone_hidden" name="phone_hidden" />
  <label for="code">Код из SMS:</label>
  <input type="text" id="code" name="code" pattern="\d{6}" required />
  <button type="submit">Войти</button>
</form>

add_action('wp_ajax_nopriv_check_phone_code', 'check_phone_code_callback');
add_action('wp_ajax_check_phone_code', 'check_phone_code_callback');

function check_phone_code_callback() {
  $phone = sanitize_text_field($_POST['phone']);
  $code = sanitize_text_field($_POST['code']);

  $saved_code = get_transient('phone_code_' . md5($phone));
  if (!$saved_code || $saved_code !== $code) {
    wp_send_json_error('Неверный или просроченный код');
  }

  // Проверяем есть ли пользователь с таким телефоном
  $user = get_users(array(
    'meta_key' => 'phone_number',
    'meta_value' => $phone,
    'number' => 1,
    'count_total' => false
  ));

  if (empty($user)) {
    // Создаем нового пользователя с ролью customer
    $password = wp_generate_password();
    $user_id = wp_create_user($phone, $password, "user_$phone@example.com");
    if (is_wp_error($user_id)) {
      wp_send_json_error('Ошибка создания пользователя');
    }
    update_user_meta($user_id, 'phone_number', $phone);
  } else {
    $user_id = $user[0]->ID;
  }

  wp_set_current_user($user_id);
  wp_set_auth_cookie($user_id);
  delete_transient('phone_code_' . md5($phone));
  wp_send_json_success('Вход выполнен');
}

4. JavaScript для AJAX-запросов

jQuery(document).ready(function($) {
  $('#phone-login-form').on('submit', function(e) {
    e.preventDefault();
    var phone = $('#phone').val();
    $.post(ajaxurl, { action: 'send_phone_code', phone: phone }, function(response) {
      if (response.success) {
        alert('Код отправлен на ' + phone);
        $('#phone-login-form').hide();
        $('#phone-code-form #phone_hidden').val(phone);
        $('#phone-code-form').show();
      } else {
        alert(response.data);
      }
    });
  });

  $('#phone-code-form').on('submit', function(e) {
    e.preventDefault();
    var phone = $('#phone_hidden').val();
    var code = $('#code').val();
    $.post(ajaxurl, { action: 'check_phone_code', phone: phone, code: code }, function(response) {
      if (response.success) {
        alert('Вы успешно вошли');
        location.reload();
      } else {
        alert(response.data);
      }
    });
  });

  $('#phone-code-form').hide();
});

Проверка результата

• Откройте форму входа и введите телефон в формате +71234567890
• Получите код через SMS (или в логах, если тестовая отправка)
• Введите код и убедитесь, что вход выполнен (проверка куки, смена состояния пользователя в админке)
• Проверьте, что новые пользователи создаются с мета-полем phone_number

Частые ошибки и как их исправить

• Код не отправляется или приходит с задержкой: Проверьте интеграцию с SMS провайдером и лимиты отправки.
• Код не совпадает или истекает слишком быстро: Увеличьте время хранения transient и убедитесь, что коды сохраняются корректно.
• Новые пользователи не создаются: Убедитесь в наличии уникального email (для примера можно использовать шаблон с телефоном) и проверьте ошибки wp_create_user.
• AJAX-запросы возвращают 0 или ошибки: Проверьте, что в JS правильно передан ajaxurl, и что обработчики зарегистрированы с правильными хуками.

Практические советы по безопасности и производительности

• Используйте nonce для AJAX-запросов, чтобы предотвратить CSRF-атаки.
• Ограничьте количество попыток отправки кода на один номер (например, не более 3 раз за 10 минут), чтобы избежать спама.
• Храните коды в transient с ограниченным сроком действия (5-10 минут).
• Для повышения производительности используйте объектный кеш для пользователей, чтобы минимизировать запросы к базе при поиске по мета-полям.

Сравнение вариантов реализации авторизации по телефону