WooCommerce: как реализовать авторизацию через AJAX с поддержкой безопасности

Диагностика проблемы: зачем использовать AJAX для авторизации в WooCommerce

Стандартная форма входа WooCommerce перезагружает страницу при отправке данных, что ухудшает пользовательский опыт, особенно на мобильных устройствах и при кастомных темах. AJAX-авторизация позволяет сделать процесс входа быстрее и удобнее, но при этом важно соблюдать меры безопасности, чтобы избежать уязвимостей.

Пошаговое решение: реализация AJAX-авторизации для WooCommerce

1. Добавляем AJAX-обработчик в functions.php или плагин

Создадим функцию для обработки AJAX-запроса на авторизацию. Используем стандартные функции WordPress и WooCommerce для аутентификации.

add_action('wp_ajax_nopriv_custom_ajax_login', 'custom_ajax_login_handler');
function custom_ajax_login_handler() {
    check_ajax_referer('custom_ajax_login_nonce', 'security');

    $info = array();
    $info['user_login'] = sanitize_text_field($_POST['username']);
    $info['user_password'] = $_POST['password'];
    $info['remember'] = isset($_POST['remember']) && $_POST['remember'] === 'true';

    $user_signon = wp_signon($info, false);

    if (is_wp_error($user_signon)) {
        wp_send_json_error(array('message' => __('Неверное имя пользователя или пароль.')));
    } else {
        wp_set_current_user($user_signon->ID);
        wp_set_auth_cookie($user_signon->ID, $info['remember']);
        wp_send_json_success(array('redirect' => wc_get_page_permalink('myaccount')));
    }
}

2. Добавляем nonce и форму с AJAX-запросом в шаблон

Вставляем форму входа с полями и скрытым полем nonce для защиты. Подключаем JS для отправки данных.

<form id="ajax-login-form" method="post">
    <input type="text" name="username" placeholder="Имя пользователя" required>
    <input type="password" name="password" placeholder="Пароль" required>
    <label><input type="checkbox" name="remember"> Запомнить меня</label>
    <input type="hidden" name="security" value="<?php echo wp_create_nonce('custom_ajax_login_nonce'); ?>">
    <button type="submit">Войти</button>
    <div id="login-message"></div>
</form>

<script>
jQuery(document).ready(function($){
    $('#ajax-login-form').on('submit', function(e){
        e.preventDefault();
        var data = {
            action: 'custom_ajax_login',
            username: $('input[name="username"]').val(),
            password: $('input[name="password"]').val(),
            remember: $('input[name="remember"]').is(':checked'),
            security: $('input[name="security"]').val()
        };
        $.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function(response){
            if(response.success){
                window.location.href = response.data.redirect;
            } else {
                $('#login-message').text(response.data.message).css('color', 'red');
            }
        });
    });
});
</script>

3. Обработка ошибок и сообщения для пользователя

В AJAX-ответе мы передаем либо ошибку с текстом, либо успешный редирект. В JS отображаем сообщение об ошибке под формой без перезагрузки.

Проверка результата после внедрения

• Откройте страницу с формой входа и попробуйте авторизоваться с корректными и некорректными данными.
• При успешном входе должна происходить редирекция без перезагрузки страницы.
• При ошибке должно отображаться сообщение об ошибке без перезагрузки.
• Проверьте в админке WooCommerce, что пользователь действительно вошел в систему.

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

• Ошибка 400 или 403 при отправке AJAX-запроса – чаще всего из-за неправильного nonce или отсутствия check_ajax_referer. Проверьте корректность создания и передачи nonce.
• Пользователь не сохраняется как авторизованный после wp_signon – убедитесь, что вызывается wp_set_current_user и wp_set_auth_cookie.
• Редирект не срабатывает или страница обновляется – проверьте, что в форме нет стандартного сабмита, и событие e.preventDefault() вызывается в JS.
• AJAX-обработчик не вызывается – проверьте правильность action (wp_ajax_nopriv_custom_ajax_login) и URL admin-ajax.php.

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

• Обязательно используйте nonce для защиты от CSRF-атак.
• Санитизируйте все входящие данные, особенно имя пользователя, с помощью sanitize_text_field.
• Используйте HTTPS, чтобы данные пароля не передавались в открытом виде.
• Ограничьте количество попыток входа, чтобы избежать brute-force атак (можно использовать плагины типа Limit Login Attempts).
• Кэширование страниц с авторизацией отключайте или исключайте форму из кэша, иначе AJAX-запросы могут работать некорректно.

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