Если у вас возникли какие либо вопросы которые вы не смогли решить по нашим публикациям самостоятельно,
то ждем ваше обращение в нашей службе тех поддержки.
Итак, задача - сделать красивую форму авторизации на AJAX, которая бы без перезагрузки страницы проверяла валидность логина/пароля, выводила ошибки, и авторизовывала.
Сначала я думал оформить это как решение, но в итоге бы получился очередной лисапед - я не встречал еще ни одного проекта, где такого рода компоненты вставали без кастомизации. Поэтому, посидел, подумал, и представляю, на мой взгляд, красивый подход к решению задачи.
За основу берем стандартный шаблон компонента system.auth.form, который я переделал на выпадашку (было даже в каком-то это дело).
Правим под свой стиль, кастомизируем как угодно. Чтобы работало. Теперь пришло время вешать аякс. Разумеется, сначала подключаем jquery (я до сих пор не люблю jquery из коробки, так как наши спохватились поздно, и каждый проект уже оброс своими библиотеками jquery, а винегрет из них я не хочу).
Я не вносил никаких изменений в стандартную форму, кроме как окружил ее дивом login-area. Ели она у вас уже кастомизирована, то проверьте наличие атрибута action. Да и по сути все.
Иду по порядку так, как рождалась идея. Итак, сначала я накидал js-код
Что делает код (небольшой урок по jquery заодно, так сказать):
1. Слушаем сабмит формы, и если он происходит, вклиниваемся в него.
2. Создаем переменные для удобства. Об ajax_key я расскажу ниже.
3. Бежим по всем input, и кидаем их в массив для отправки.
4. Собственно, отправляем данные, ответ принимаем как json. Получаем ответ и обрабатываем его. Если ошибки - выводим их, если все ок - рефрешимся сами на себя (мне этого хватило, но вы можете, например, вывести сообщение об успешно авторизации и скрыть форму)
Код написан, но вот как поулчать ответ без лисапедов, лишних скриптов и прочего? Решение пришлось легко и красиво.
Мы шифруем лицензионный ключ и передаем его в форме. И в этом же шаблоне формы авторизации, проверяем этот ключ, и если он есть и верен, то отдаем данные в формате json. Проверка на ключ нужна по одной причине - чтобы "злоумышленник" не получил лишний раз пустую страницу, передав какой-нибудь ?ajax=Y
Здесь тоже небольшой ликбез:
1. RestartBuffer - так как страница уже начала выполняться (форма же у вас в шаблоне), то надо сбросить буфер.
2. PUBLIC_AJAX_MODE на всякий случай уберем лишний мусор (такой как "отладка страницы" и прочее).
3. Если форма сработала с ошибкой, то отдаем ошибку как json-объект, иначе говорим, что все ок.
4. Выходим.
Есть одна недоработка, которую я не сделал, так как мне не требовалось - не учитывается защищенная авторизация и пароль передается в открытом виде. Я даже не смотрел как это реализуется, поэтому, если кто-то дополнит код на этот случай, включу в пост.
Естественно, по аналогии вы можете реализовать любую форму - регистрации, восстановления пароля, и прочие.
PS: Убирайте лишние пробелы в коде, вставленные парсером.
Назад в раздел
то ждем ваше обращение в нашей службе тех поддержки.
Форма авторизации на AJAX
В данном посте опишу не столько решение (хотя, оно довольно востребованное), сколько подход к использованию того что есть и без лишних лисапедов.Итак, задача - сделать красивую форму авторизации на AJAX, которая бы без перезагрузки страницы проверяла валидность логина/пароля, выводила ошибки, и авторизовывала.
Сначала я думал оформить это как решение, но в итоге бы получился очередной лисапед - я не встречал еще ни одного проекта, где такого рода компоненты вставали без кастомизации. Поэтому, посидел, подумал, и представляю, на мой взгляд, красивый подход к решению задачи.
За основу берем стандартный шаблон компонента system.auth.form, который я переделал на выпадашку (было даже в каком-то это дело).
Правим под свой стиль, кастомизируем как угодно. Чтобы работало. Теперь пришло время вешать аякс. Разумеется, сначала подключаем jquery (я до сих пор не люблю jquery из коробки, так как наши спохватились поздно, и каждый проект уже оброс своими библиотеками jquery, а винегрет из них я не хочу).
Я не вносил никаких изменений в стандартную форму, кроме как окружил ее дивом login-area. Ели она у вас уже кастомизирована, то проверьте наличие атрибута action. Да и по сути все.
Иду по порядку так, как рождалась идея. Итак, сначала я накидал js-код
<sc ript type="text/javascript">
$(docu ment).on('ready', f unction(){
$('#login-area form').submit(f unction(){
var $this = $(this);
var $form = {
action: $this.attr('action'),
post: {'ajax_key':'<?= md5('ajax_'.LICENSE_KEY)?>'}
};
$.each($('input', $this), f unction(){
if ($(this).attr('name').length) {
$form.post[$(this).attr('name')] = $(this).val();
}
});
$.post($form.action, $form.post, f unction(data){
$('input', $this).removeAttr('disabled');
if (data.type == 'error') {
a lert(data.message);
} else {
window.location = wind ow.location;
}
}, 'json');
return false;
});
})
</sc ript> |
Что делает код (небольшой урок по jquery заодно, так сказать):
1. Слушаем сабмит формы, и если он происходит, вклиниваемся в него.
2. Создаем переменные для удобства. Об ajax_key я расскажу ниже.
3. Бежим по всем input, и кидаем их в массив для отправки.
4. Собственно, отправляем данные, ответ принимаем как json. Получаем ответ и обрабатываем его. Если ошибки - выводим их, если все ок - рефрешимся сами на себя (мне этого хватило, но вы можете, например, вывести сообщение об успешно авторизации и скрыть форму)
Код написан, но вот как поулчать ответ без лисапедов, лишних скриптов и прочего? Решение пришлось легко и красиво.
Мы шифруем лицензионный ключ и передаем его в форме. И в этом же шаблоне формы авторизации, проверяем этот ключ, и если он есть и верен, то отдаем данные в формате json. Проверка на ключ нужна по одной причине - чтобы "злоумышленник" не получил лишний раз пустую страницу, передав какой-нибудь ?ajax=Y
<?
if (strlen($_POST['ajax_key']) && $_POST['ajax_key']==md5('ajax_'.LICENSE_KEY)) {
$APPLICATION->RestartBuffer();
if (!defined('PUBLIC_AJAX_MODE')) {
define('PUBLIC_AJAX_MODE', true);
}
header('Content-type: application/json');
if ($arResult['ERROR']) {
echo json_encode(array(
'type' => 'error',
'message' => strip_tags($arResult['ERROR_MESSAGE']['MESSAGE']),
));
} else {
echo json_encode(array('type' => 'ok'));
}
require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/epilog_after.php');
die();
}
?> |
Здесь тоже небольшой ликбез:
1. RestartBuffer - так как страница уже начала выполняться (форма же у вас в шаблоне), то надо сбросить буфер.
2. PUBLIC_AJAX_MODE на всякий случай уберем лишний мусор (такой как "отладка страницы" и прочее).
3. Если форма сработала с ошибкой, то отдаем ошибку как json-объект, иначе говорим, что все ок.
4. Выходим.
Есть одна недоработка, которую я не сделал, так как мне не требовалось - не учитывается защищенная авторизация и пароль передается в открытом виде. Я даже не смотрел как это реализуется, поэтому, если кто-то дополнит код на этот случай, включу в пост.
Естественно, по аналогии вы можете реализовать любую форму - регистрации, восстановления пароля, и прочие.
PS: Убирайте лишние пробелы в коде, вставленные парсером.
Назад в раздел
Подписаться на новые материалы раздела:
