WooCommerce: авторизация и регистрация без перезагрузки страницы (AJAX)

Почему нужна AJAX-авторизация и регистрация в WooCommerce?

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

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

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

Если вы хотите улучшить UX и повысить конверсию, переход на AJAX-авторизацию и регистрацию — правильный шаг.

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

1. Подключение скрипта и локализация переменных

function wpdirect_enqueue_ajax_auth_scripts() {
    wp_enqueue_script('wpdirect-ajax-auth', get_stylesheet_directory_uri() . '/js/ajax-auth.js', array('jquery'), '1.0', true);
    wp_localize_script('wpdirect-ajax-auth', 'wpdirect_ajax_auth', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'redirect_url' => wc_get_page_permalink('myaccount'),
        'nonce' => wp_create_nonce('wpdirect_ajax_auth_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpdirect_enqueue_ajax_auth_scripts');

2. Создание AJAX обработчиков для входа и регистрации

function wpdirect_ajax_login() {
    check_ajax_referer('wpdirect_ajax_auth_nonce', 'nonce');

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

    $user = wp_signon($info, false);

    if (is_wp_error($user)) {
        wp_send_json_error(array('message' => $user->get_error_message()));
    } else {
        wp_send_json_success(array('redirect' => wc_get_page_permalink('myaccount')));
    }
}
add_action('wp_ajax_nopriv_wpdirect_ajax_login', 'wpdirect_ajax_login');

function wpdirect_ajax_register() {
    check_ajax_referer('wpdirect_ajax_auth_nonce', 'nonce');

    $username = sanitize_user($_POST['username']);
    $email = sanitize_email($_POST['email']);
    $password = $_POST['password'];

    if (!username_exists($username) && !email_exists($email)) {
        $user_id = wc_create_new_customer($email, $username, $password);
        if (is_wp_error($user_id)) {
            wp_send_json_error(array('message' => $user_id->get_error_message()));
        } else {
            wp_signon(array('user_login' => $username, 'user_password' => $password), false);
            wp_send_json_success(array('redirect' => wc_get_page_permalink('myaccount')));
        }
    } else {
        wp_send_json_error(array('message' => 'Пользователь с таким именем или email уже существует.'));
    }
}
add_action('wp_ajax_nopriv_wpdirect_ajax_register', 'wpdirect_ajax_register');

3. JavaScript для отправки AJAX-запросов

jQuery(document).ready(function($) {
    $('#wpdirect-login-form').on('submit', function(e) {
        e.preventDefault();
        var data = {
            action: 'wpdirect_ajax_login',
            nonce: wpdirect_ajax_auth.nonce,
            username: $('#wpdirect-login-username').val(),
            password: $('#wpdirect-login-password').val(),
            remember: $('#wpdirect-login-remember').is(':checked')
        };
        $.post(wpdirect_ajax_auth.ajax_url, data, function(response) {
            if (response.success) {
                window.location.href = response.data.redirect;
            } else {
                $('#wpdirect-login-error').text(response.data.message).show();
            }
        });
    });

    $('#wpdirect-register-form').on('submit', function(e) {
        e.preventDefault();
        var data = {
            action: 'wpdirect_ajax_register',
            nonce: wpdirect_ajax_auth.nonce,
            username: $('#wpdirect-register-username').val(),
            email: $('#wpdirect-register-email').val(),
            password: $('#wpdirect-register-password').val()
        };
        $.post(wpdirect_ajax_auth.ajax_url, data, function(response) {
            if (response.success) {
                window.location.href = response.data.redirect;
            } else {
                $('#wpdirect-register-error').text(response.data.message).show();
            }
        });
    });
});

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

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

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

• Ошибка 400 или 403 при AJAX-запросах — проверьте nonce и его передачу в запросе; nonce должен совпадать с тем, что генерируется в PHP.
• Пользователь не сохраняется при регистрации — убедитесь, что используете wc_create_new_customer() и передаете корректные данные.
• После входа пользователь не авторизуется — проверьте, что вызов wp_signon() корректен и не возвращает ошибок.
• Формы не отправляют данные или не реагируют — проверьте подключение и загрузку JS-скриптов, отсутствие конфликтов с другими библиотеками.

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

• Всегда используйте check_ajax_referer() для защиты от CSRF.
• Санитизируйте все входящие данные с помощью sanitize_text_field(), sanitize_email() и sanitize_user().
• Кэшируйте скрипты и используйте минификацию для уменьшения нагрузки.
• Ограничьте частоту AJAX-запросов с помощью JavaScript или серверных проверок, чтобы избежать атак перебора.
• Для регистрации используйте функции WooCommerce, чтобы сохранить совместимость с системой и плагинами.

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