Создание кастомной формы авторизации в WordPress через REST API

В этой статье я покажу, как создать собственную форму входа на сайт WordPress с использованием REST API. Это решение обеспечит лучшую производительность, безопасность и контроль над процессом авторизации.

Преимущества кастомной формы авторизации

  • Полный контроль над дизайном и функционалом
  • Работа без перезагрузки страницы
  • Гибкая система обработки ошибок
  • Можно интегрировать с React/Vue
  • Отсутствие зависимости от стандартных решений WordPress

Шаг 1: Подготовка HTML-формы

Разместите этот код там, где должна отображаться форма — в шаблоне страницы, виджете или через шорткод:

<form id="custom-login-form">
    <input type="hidden" name="redirect_to" value="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>">
    <input type="hidden" name="security" value="<?php echo wp_create_nonce('custom-login-nonce'); ?>">

    <div class="form-group">
        <label for="username">E-mail или логин</label>
        <input type="text" name="username" id="username" required>
    </div>

    <div class="form-group">
        <label for="password">Пароль</label>
        <input type="password" name="password" id="password" required>
    </div>

    <button type="submit">Войти</button>

    <div id="login-message" class="message"></div>
</form>

Что важно:

  • security – защита от CSRF-атак
  • redirect_to – вернёт пользователя на текущую страницу после входа

Шаг 2: Добавление JavaScript обработчика

Создайте файл /js/custom-login.js:

window.addEventListener('load', function() {
    const form = document.getElementById('custom-login-form');
    const messageEl = document.getElementById('login-message');

    if (!form) return;

    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        // Очистка предыдущих сообщений
        messageEl.textContent = '';
        messageEl.className = 'message';
        
        // Валидация полей
        const username = form.username.value.trim();
        const password = form.password.value.trim();
        
        if (!username || !password) {
            showMessage('Пожалуйста, заполните все поля', 'error');
            return;
        }
        
        // Подготовка данных
        const data = {
            username: username,
            password: password,
            security: form.security.value,
            redirect_to: form.redirect_to.value
        };
        
        try {
            const response = await fetch(customVars.rest_url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-WP-Nonce': customVars.rest_nonce
                },
                body: JSON.stringify(data)
            });
            
            const result = await response.json();
            
            if (result.success) {
                // Успешная авторизация
                window.location.href = result.redirect;
            } else {
                // Ошибка авторизации
                showMessage(result.message, 'error');
                
                // Дополнительная логика по типу ошибки
                if (result.type === 'security') {
                    console.warn('Security issue detected');
                }
            }
        } catch (error) {
            // Только реальные сетевые/парсинговые ошибки
            showMessage('Ошибка соединения', 'error');
            console.error('Network error:', error);
        }
    });
    
    function showMessage(text, type) {
        messageEl.innerHTML = text;
        messageEl.classList.add(type);
    }
});

Шаг 3: Регистрация скриптов и REST API

Добавьте в functions.php вашей темы:

// Регистрация и подключение скриптов
function enqueue_login_scripts() {
    wp_enqueue_script(
        'custom-login',
        get_template_directory_uri() . '/js/custom-login.js',
        array(),
        filemtime(get_template_directory() . '/js/custom-login.js'),
        true
    );
    
    wp_localize_script('custom-login', 'customVars', [
        'rest_url' => rest_url('wp/v2/custom-login'),
        'rest_nonce' => wp_create_nonce('wp_rest')
    ]);
}
add_action('wp_enqueue_scripts', 'enqueue_login_scripts');

// Регистрация REST API endpoint
add_action('rest_api_init', function () {
    register_rest_route('wp/v2', '/custom-login', [
        'methods'  => 'POST',
        'callback' => 'handle_custom_login',
        'permission_callback' => '__return_true',
    ]);
});

// Обработчик авторизации
function handle_custom_login(WP_REST_Request $request) {
    // Проверка nonce
    if (!wp_verify_nonce($request['security'], 'custom-login-nonce')) {
        return new WP_REST_Response([
            'success' => false,
            'message' => 'Ошибка безопасности',
            'type' => 'security'
        ], 200);
    }

    $credentials = [
        'user_login'    => sanitize_user($request['username']),
        'user_password' => $request['password'],
        'remember'      => true,
    ];

    $user = wp_signon($credentials, false);

    if (is_wp_error($user)) {
        return new WP_REST_Response([
            'success' => false,
            'message' => $user->get_error_message(),
            'type' => 'auth'
        ], 200);
    }

    return new WP_REST_Response([
        'success' => true,
        'redirect' => $request['redirect_to']
    ], 200);
}

Шаг 4: Стилизация формы

Добавьте в style.css вашей темы:

#custom-login-form {
    max-width: 400px;
    margin: 20px auto;
    padding: 25px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.form-group input:focus {
    border-color: #2271b1;
    outline: none;
}

button[type="submit"] {
    width: 100%;
    padding: 12px;
    background: #2271b1;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

button[type="submit"]:hover {
    background: #135e96;
}

.message {
    margin-top: 20px;
    padding: 12px;
    border-radius: 4px;
    text-align: center;
}

.message.error {
    color: #d63638;
    background: #f8ebea;
    border: 1px solid #d63638;
}

.message.success {
    color: #00a32a;
    background: #edfaef;
    border: 1px solid #00a32a;
}

Шаг 5: Тестирование и отладка

  1. Проверьте, что все файлы подключены правильно
  2. Протестируйте следующие сценарии:
    • Вход с правильными данными
    • Вход с неверными данными
    • Попытка входа с пустыми полями

Дополнительные улучшения

  1. Капча: Добавьте Google reCAPTCHA для защиты от ботов или создайте свою капчу
  2. Социальные сети: Интегрируйте вход через соцсети
  3. Восстановление пароля: Добавьте ссылку на восстановление

Представленное решение дает полный контроль над процессом авторизации в WordPress. Оно безопасно, производительно и легко настраивается под любые требования дизайна.

Главные преимущества:

  • Современный подход с использованием REST API
  • Гибкая система обработки ошибок
  • Полная интеграция с WordPress
  • Возможность дальнейшего расширения функционала

Теперь вы можете легко интегрировать эту форму в любой шаблон WordPress и настроить её внешний вид согласно дизайну вашего сайта.

Мой телеграм канал: wordpress_by

Больше записей