Как создать авторизацию через собственную форму в WordPress

Зачем создавать собственную форму авторизации в WordPress

Стандартная форма входа WordPress на странице wp-login.php не всегда подходит под дизайн сайта или бизнес-логику проекта. Часто возникает необходимость интегрировать авторизацию в кастомные страницы, добавить дополнительные поля или обработать вход более гибко. В таких случаях удобнее создать собственную форму авторизации, полностью контролируя процесс и внешний вид.

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

В этой статье мы рассмотрим, как создать простую, но полноценную форму входа, которая работает на любой странице WordPress, с примерами кода и объяснениями.

Создание формы авторизации: базовый пример

Начнем с минимальной формы, которая принимает логин и пароль и вызывает стандартную функцию WordPress для авторизации.

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

function wpboard_login_form_shortcode() {
    if ( is_user_logged_in() ) {
        return 'Вы уже авторизованы.';
    }

    $output = '';
    if ( isset( $_POST['wpboard_login_nonce'] ) && wp_verify_nonce( $_POST['wpboard_login_nonce'], 'wpboard_login_action' ) ) {
        $creds = array();
        $creds['user_login'] = sanitize_text_field( $_POST['username'] );
        $creds['user_password'] = $_POST['password'];
        $creds['remember'] = isset( $_POST['remember'] );

        $user = wp_signon( $creds, false );

        if ( is_wp_error( $user ) ) {
            $output .= '<p style="color:red;">' . esc_html( $user->get_error_message() ) . '</p>';
        } else {
            wp_redirect( home_url() );
            exit;
        }
    }

    $output .= '<form method="post" action="">';
    $output .= '<p><label>Логин: <input type="text" name="username" required /></label></p>';
    $output .= '<p><label>Пароль: <input type="password" name="password" required /></label></p>';
    $output .= '<p><label><input type="checkbox" name="remember" /> Запомнить меня</label></p>';
    $output .= wp_nonce_field( 'wpboard_login_action', 'wpboard_login_nonce', true, false );
    $output .= '<p><input type="submit" value="Войти" /></p>';
    $output .= '</form>';

    return $output;
}
add_shortcode( 'wpboard_login_form', 'wpboard_login_form_shortcode' );

Этот код создает шорткод [wpboard_login_form], который выводит форму. При отправке данные проверяются и вызывается wp_signon для авторизации. В случае ошибки выводится текст ошибки.

Обработка ошибок и безопасность формы авторизации

Очень важно использовать wp_nonce_field для защиты от CSRF-атак. В нашем примере nonce проверяется на сервере перед авторизацией.

Также для безопасности нельзя выводить прямые ошибки, которые могут помочь злоумышленнику — лучше использовать общие формулировки или логи для разработчика.

Для улучшения UX можно добавить обработку ошибок через AJAX, чтобы форма не перезагружала страницу. Но это требует более сложного JavaScript и обработки AJAX-запросов на сервере.

Пример обработки ошибок через AJAX

Приведем пример базовой реализации AJAX-формы авторизации.

function wpboard_enqueue_scripts() {
    wp_enqueue_script( 'wpboard-login', get_template_directory_uri() . '/js/wpboard-login.js', array( 'jquery' ), null, true );
    wp_localize_script( 'wpboard-login', 'wpboardLogin', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'nonce' => wp_create_nonce( 'wpboard_login_nonce' )
    ) );
}
add_action( 'wp_enqueue_scripts', 'wpboard_enqueue_scripts' );

function wpboard_ajax_login() {
    check_ajax_referer( 'wpboard_login_nonce', 'nonce' );

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

    $user = wp_signon( $creds, false );

    if ( is_wp_error( $user ) ) {
        wp_send_json_error( $user->get_error_message() );
    } else {
        wp_send_json_success( home_url() );
    }
}
add_action( 'wp_ajax_nopriv_wpboard_ajax_login', 'wpboard_ajax_login' );

В файле wpboard-login.js можно написать:

jQuery(document).ready(function($) {
    $('#wpboard-login-form').on('submit', function(e) {
        e.preventDefault();
        var data = {
            action: 'wpboard_ajax_login',
            nonce: wpboardLogin.nonce,
            username: $('#wpboard-login-form [name="username"]').val(),
            password: $('#wpboard-login-form [name="password"]').val(),
            remember: $('#wpboard-login-form [name="remember"]').is(':checked')
        };
        $.post(wpboardLogin.ajaxurl, data, function(response) {
            if (response.success) {
                window.location.href = response.data;
            } else {
                $('#wpboard-login-error').text(response.data).show();
            }
        });
    });
});

Это позволит пользователю входить без перезагрузки страницы, а ошибки выводить прямо под формой.

Добавление редиректа после успешного входа

Иногда нужно перенаправлять пользователя не на главную страницу, а на определенную страницу или в личный кабинет.

Для этого в функции авторизации можно задать параметр redirect_to. В нашем первом примере с шорткодом можно добавить скрытое поле:

<input type="hidden" name="redirect_to" value="/lichnyy-kabinet" />

А затем в обработчике использовать:

$redirect_to = ! empty( $_POST['redirect_to'] ) ? esc_url_raw( $_POST['redirect_to'] ) : home_url();
wp_redirect( $redirect_to );

Так пользователь попадет туда, куда нужно, после входа.

Примеры плагинов для кастомной авторизации

Если хочется использовать готовое решение, есть несколько популярных плагинов с расширенными возможностями:

• Theme My Login — простой плагин для создания пользовательских страниц регистрации и входа с полным контролем шаблонов.
• WPForms — конструктор форм с возможностью создания формы логина и регистрации с проверкой и защитой.
• LoginPress — плагин для кастомизации страницы логина, включая стили, лого и поля.

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

Частые ошибки при создании собственной формы авторизации

При разработке стоит учитывать несколько важных моментов:

• Не забывайте использовать wp_nonce_field и проверять nonce для безопасности.
• Санитизируйте все входящие данные с помощью sanitize_text_field и других функций.
• Используйте wp_signon для авторизации, а не прямую проверку пароля.
• Обрабатывайте ошибки корректно и не раскрывайте детали, которые могут помочь злоумышленнику.
• Не выводите форму входа для уже авторизованных пользователей — лучше показать сообщение или ссылку выхода.

Соблюдение этих правил поможет избежать проблем с безопасностью и ошибками в работе сайта.

Итоги

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