Пример реализации формы входа на сайт

Пример реализации формы входа на сайт

20.03.2013 35743 51

День добрый , уважаемые читатели! Занимаюсь сейчас редизайном блога и хочу, чтобы у авторизованных пользователей были привелегии, по сравнению с неавторизованными (например профиль пользователя на отдельной странице блога + открытая для индексации ссылка на проект пользователя), что-то я отвлекся от темы хехе. Короче, мне понадобилась Ajax авторизация на блоге WordPress. Оказалось это не сверхъестественная штука, а все достаточно просто. Поехали!

Форма авторизации для работы с Ajax

Выводим форму входа в шаблоне

Первым делом нам нужно создать форму авторизации и естественно написать условия в каких случаях показывать форму входа, а когда данные пользователя. Для этого открываем любой файл шаблона (я открываю header.php — мне форма входа там нужна) а Вы можете открыть файл sidebar.php, теперь вставим в него следующий кусок кода:

<div class="login_box"> <?php global $user_ID, $user_identity, $user_level; ?> <?php if (is_user_logged_in()) { ?> <?php echo get_avatar( $user_ID, 50 ); ?> <div class="user_aside"> <span class="user_name">Привет, <strong><em><?php echo $user_identity; ?></em></strong></span> <a class="login_button" href="<?php bloginfo('url'); ?>/wp-admin/">Консоль</a> <a class="login_button" href="<?php bloginfo('url'); ?>/wp-admin/profile.php">Профиль</a> <a class="logout_button" href="<?php echo wp_logout_url( $_SERVER['REQUEST_URI'] ); ?>">Выйти</a> </div> <?php } else { ?> <form id="login" action="login" method="post"> <p class="status_login"></p> <div class="line"> <i class="icon-user"></i> <input id="username" class="input_text" type="text" placeholder="Ваш логин" name="username" /> </div> <div class="line"> <i class="icon-key"></i> <input id="password" class="input_text" type="password" placeholder="Ваш пароль" name="password" /> </div> <div class="line" style="display: none;"> <input name="rememberme" type="checkbox" id="my-rememberme" checked="checked" value="forever" /> </div> <div class="line cf"> <input class="submit_button" type="submit" value="Войти" name="submit"> <div class="login_link"> <a class="reg_link" href="<?php bloginfo('url'); ?>/wp-login.php?action=register">Регистрация</a> / <a class="lost_pass_link" href="<?php bloginfo('url'); ?>/wp-login.php?action=lostpassword">Забыли пароль?</a> </div> </div> <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?> </form> <?php } ?> </div>

Чуток поясню, хоть код и достаточно прозрачный

Сначала определяем глобальные переменные $user_ID, $user_identity и $user_level. Далее условием определяем авторизован ли пользователь на блоге с помощью функции is_user_logged_in(), если вошел то отображаем его аватар, ник и ссылки на панель управления, профиль и выход. Для вывода и задания аватаров я использую плагин User Avatar.

Пользователь вошел на сайт с помощью Ajax

В случае когда пользователь не авторизован, то выводим форму входа. Форма входа содержит:

  • контейнер .status_login — в нем будем выводить информацию о ходе авторизации
  • для иконок в полях формы я использую сервис fontello (погуглите %), кстати их я позиционирую абсолютно поэтому Вы видете, что поле формы и иконка обернуты контейнером .line
  • чекбокс ‘запомнить данные пользователя’ я скрываю и по умолчанию осталяю его включенным checked="checked" — по сути пользователю видеть его не надо, да и в дизайн он вписывается слабовато
  • кнопка ‘Войти’ и ссылки на регистрацию и потеряли пароль. Кстати не забудьте на странице настроек WordPress установить галочку ‘любой может зарегистрироваться’
  • и самый важный момент это безопасность, поэтому обязательно пишем строку wp_nonce_field( 'ajax-login-nonce', 'security' );

Думаю тут все понятно, поэтому двигаемся дальше и добавим немного стилей для формы (я вырезал со своего файла стилей, Вы свои напишете):

.login_box { float: right; width: 580px; margin: 0 20px 0 0; background-color: #e1e1e1; } / Form / #login{ padding: 40px 10px 25px 10px; width: 345px; position: relative; } .status_login { display: none; position: absolute; top: 15px; left: 0px; width: 100%; text-align: center; font-size: 12px; color: #666; } .line { position: relative; } .line i { position: absolute; left: 10px; top: 5px; color: #999999; font-size: 18px; } .line .input_text { display: block; width: 300px; height: 30px; margin: 0 0 10px; font-size: 15px; padding-left: 45px; box-shadow: 0 1px rgba(255,255,255,1); border: 1px solid #ccc; background-color: rgb(255,255,255); } .line .input_text:focus { outline: none; border-color: #ff9900; } #login input:-webkit-autofill { background-color: rgb(255,255,255) !important; -webkit-box-shadow:0 0 0 50px white inset; } .submit_button { display: block; width: 100px; height: 30px; float: left; margin: 0 30px 0 0; position: relative; border: none; background-color: #1688CA; border-bottom: 1px solid #fff; border-top: 1px solid #0071AD; background-image: -moz-linear-gradient(top, #3382AF, #1688CA); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3382AF), to(#1688CA)); background-image: -webkit-linear-gradient(top, #3382AF, #1688CA); background-image: -o-linear-gradient(top, #3382AF, #1688CA); background-image: linear-gradient(top, #3382AF, #1688CA); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3382AF', endColorstr='#ff1688CA', GradientType=0); cursor: pointer; font-size: 14px; color: #f6f6f6; } / User Login / .login_link { float: right; display: block; font-size: 13px; margin: 5px 0 0; text-shadow: 0 1px white; } .login_link a { padding: 0 5px; } .login_box img { float: left; margin: 65px 15px 0px 20px; } .login_box .user_aside { float: left; margin: 65px 0 0 0; } .user_aside .user_name { font-size: 15px; display: block; padding: 3px 0; } .user_aside .user_name strong { text-shadow: 0 1px white; } .user_aside a { text-shadow: 0 1px white; font-size: 13px; } .user_aside a:hover, .login_link a:hover { text-decoration: underline; }

Со стилями разобрались, давайте теперь окунемся в функции WordPress.

Корректируем файл functions.php

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

  • wp_enque_script + wp_localize script
  • wp_nonce_field + check_ajax_referer
  • is_user_logged_in + wp_signon

Итак, открываем файл functions.php и вставляем туда следующий код:

<?php // Ajax Login function ajax_login_init(){ / Подключаем скрипт для авторизации / wp_register_script('ajax-login-script', get_template_directory_uri() . '/js/ajax-login-script.js', array('jquery') ); wp_enqueue_script('ajax-login-script'); / Локализуем параметры скрипта / wp_localize_script( 'ajax-login-script', 'ajax_login_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'redirecturl' => $_SERVER['REQUEST_URI'], 'loadingmessage' => __('Проверяются данные, секундочку...') )); // Разрешаем запускать функцию ajax_login() пользователям без привелегий add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' ); } // Выполняем авторизацию только если пользователь не вошел if (!is_user_logged_in()) { add_action('init', 'ajax_login_init'); } function ajax_login(){ // Первым делом проверяем параметр безопасности check_ajax_referer( 'ajax-login-nonce', 'security' ); // Получаем данные из полей формы и проверяем их $info = array(); $info['user_login'] = $_POST['username']; $info['user_password'] = $_POST['password']; $info['remember'] = true; $user_signon = wp_signon( $info, false ); if ( is_wp_error($user_signon) ){ echo json_encode(array('loggedin'=>false, 'message'=>__('Неправильный логин или пароль!'))); } else { echo json_encode(array('loggedin'=>true, 'message'=>__('Отлично! Идет перенаправление...'))); } die(); } ?>

Все объяснения я вынес в условные комментарии в коде, что тут можно добавить, так это ссылку на использование Ajax в кодексе WordPress

До сих пор все было достаточно прозрачно, и скажу что самое сложное уже позади, но помните мы в functions.php подключили скрипт ajax-login-script.js и без него ничего не заработает. Поэтому напишем его.

jQuery Ajax Script

В папке с темой создаем папку js а в ней создадим пока пустой файл ajax-login-script.js, откроем его и внесем следующий код:

jQuery(document).ready(function($) { $('.login_box #login').on('submit', function(e){ $('.login_box .status_login').show().text(ajax_login_object.loadingmessage); $.ajax({ type: 'POST', dataType: 'json', url: ajax_login_object.ajaxurl, data: { 'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin 'username': $('.login_box #username').val(), 'password': $('.login_box #password').val(), 'security': $('.login_box #security').val() }, success: function(data){ $('.login_box .status_login').text(data.message); if (data.loggedin == true){ document.location.href = ajax_login_object.redirecturl; } } }); e.preventDefault(); }); });

Что здесь происходит? При событии отправки формы:

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

Заключение

Все! Теперь Ваша форма входа аяксимизирована (крутое слово), кстати напомню Вам что это лучший способ сделать Ajax авторизацию на блоге, как говорится с использованием лучших практик 20-го века. Да и вдохновился я у Natko.

Благдарности, пожелания, нарекания оставляйте в комментариях. И пожалуйста поделитесь статьей в социальных сетях, ведь все должны все знать! Спасибо за внимание!

Еще почитать:

Отправляем форму Ajax’ом и сохраняем письма в админке WordPress

Сегодня рассмотрим как в WordPress отправлять формы c помощью ajax'a и сохранять отправленные письма в админке, Вы удивитесь, как на самом деле все просто

WordPress 5033 3

3 способа задать сброс цикла WordPress

Правильно сбрасываем цикл WordPress, приводим в чувство шаблоны страниц при изменении стандартного цикла и при использовании нескольких дополнительных циклов WordPress

WordPress 6608 2

4 способа задать цикл loop WordPress

Сегодня продолжим пополянть копилку разработчика WordPress и познакомимся с четырьмя способами задания цикла с помощью функций query_posts, WP_Query, get_posts

WordPress 15229 7

Пишем статью. Функции и хаки Volume#2

В этом выпуске Вы узнаете как заменить стандартный placeholder заголовка "Введите заголовок" на свой текст, установить максимальную длину заголовка, устанавить редактор по умолчанию, расширить окно полноэкранного редактора, изменить шрифт HTML

WordPress 8325 7

Низкий старт. WordPress – с чего начать

Волнующий вопрос: "Как создать сайт?". Из этой статьи Вы узнаете как установить локальный сервер и создать новый проект(сайт), как создать базу данных и пользователя, и как установить систему управления контентом WordPress

WordPress 11182 20

Работаем с изображениями на блоге. Функции и хаки Volume#1

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

WordPress 11313 13

Добавить новую запись WordPress

Вот решил написать о том как пользоваться таким элементном панели управления как «Добавить новую запись». Возможностей WordPress предлагает предостаточно и прочитанный материал окажется Вам очень полезным

WordPress 28033 9

Как сделать демонстрацию урока в WordPress

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

WordPress 11150 29

Выводим любой RSS поток в несколько колонок на страницах WordPress

Наткнулся на очередной трюк WordPress. Раньше сам про такое не думал что можно в конце статьи выводить свой или чужой RSS поток, и не просто так списком выводить как все, а по хитрому в несколько колонок, причем на разных страницах можно

WordPress 5718 2

Полноценно используем условие if

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

WordPress 12828 22

© 2018 Howtomake/

Пример реализации формы входа на сайт 3
Как сделать кастомную регистрацию и логин форму
Пример реализации формы входа на сайт 19
22 лучших формы входа и регистрации на сайте в HTML
Пример реализации формы входа на сайт 65
Создание регистрации пользователей на сайте
Пример реализации формы входа на сайт 48
Ajax форма входа, Ajax авторизация на блоге WordPress
Пример реализации формы входа на сайт 7
HTML Формы - Как создать HTML форму - Выпадающий
Пример реализации формы входа на сайт 47
Формы входа для сайта » Скрипты для сайтов
Пример реализации формы входа на сайт 70
Форма входа wordpress. Разместить форму входа
Пример реализации формы входа на сайт 78
Создание форм в HTML
Пример реализации формы входа на сайт 59
Redmouse : VPN 070
Пример реализации формы входа на сайт 65
Асинхронный электродвигатель в качестве генератора Полезное
Пример реализации формы входа на сайт 26
Пример реализации формы входа на сайт 79
Пример реализации формы входа на сайт 62
Пример реализации формы входа на сайт 71
Пример реализации формы входа на сайт 72
Пример реализации формы входа на сайт 23
Пример реализации формы входа на сайт 40
Пример реализации формы входа на сайт 54