1С-Битрикс Разработчикам - Академия 1С-Битрикс выпускников

Пользователь 11948 -> Всем, Примеры частных решений, Академия 1С-Битрикс выпускников

28 Декабрь, 2012 8:56

В данном посте опишу не столько решение (хотя, оно довольно востребованное), сколько подход к использованию того что есть и без лишних лисапедов.
[spoiler]
Итак, задача - сделать красивую форму авторизации на 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: Убирайте лишние пробелы в коде, вставленные парсером.

20 Комментировать

Комментарии: 32 12 20

Ещё 1406

Предыдущие комментарии 29

Докукин Вячеслав

Пользователь 1064429 11 Июль, 2019 19:23

Спасибо помог ваш пост! (на дворе 2019 год, а до сих пор в "коробке" нет AJAX компонента авторизации...7лет однако, печаль...)

JS по проще для отправки формы, да и если кастомим компонент то лучше кнопки сделать type="button" и сабмитить форму после всех проверок!

$.ajax({
type: "POST",
url: $('#itserw_system_auth_form').attr('action'),
data: $('#itserw_system_auth_form').serialize()+'&ajax_key=Y',
dataType: "json",
success: function(data)
{
if (data.type == 'error') {
alert(data.message);
} else {
alert('Вы авторизовались!');
$('.popup-window-close-icon').click();
$('#bx-simple-order-form').submit();
}
}
});

ну и в самом шаблоне компонента template.php уже так:

<?
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();
}
?>

Кстати как там можно использовать bitrix_sessid_post(); из формы, как его проверить в template.php компонента, что то подзабыл..

1 Ещё

Пачковский Роман

Пользователь 5082944 7 марта 23:44

Не подскажите может информация уже устарела? Пробую сделать в компоненте main.register но не срабатывает.

Фото:

Академия 1С-Битрикс выпускников

Академия 1С-Битрикс выпускников

Продукты

Решения

Внедрение