Популярная отечественная CMS NetCat имеет в своём составе модуль «Личный кабинет», который, помимо прочего, позволяет организовать регистрацию и авторизацию пользователей на сайте. Авторизация нас как раз и интересует, а именно организация ajax-авторизации, без назойливой перезагрузки страницы, которая инициируется отправкой формы с данными.
Готового решения для этого у системы управления контентом NetCat пока ещё нет, но его можно легко реализовать стандартными средствами. Ниже представлена инструкция по шагам.
1. Макет дизайна и форма авторизации
На этом шаге нам нужно расширить стандартную форму авторизации. Форма может находится в настройках модуля «Личный кабинет» — «Форма авторизации», а может быть выведена непосредственно в макете дизайна. Рассмотрим ситуацию, когда форма выведена в макете.
В форму авторизации добавляется следующие строки:
<input type='hidden' name='catalogue' value='<?= $fix_catalogue ?>' /> <input type='hidden' name='sub' value='<?= $fix_sub ?>' /> <input type='hidden' name='cc' value='<?= $fix_cc ?>' /> <input type='hidden' name='NC_HTTP_REQUEST' value='1' /> <input type='hidden' name='posting' value='1' />Полный код формы:
<form id="auth-form" method="post" action="/netcat/modules/auth/"> <input type='hidden' name='AuthPhase' value='1' /> <input type='hidden' name='REQUESTED_FROM' value='<?= $_SERVER['REQUEST_URI'] ?>' /> <input type='hidden' name='REQUESTED_BY' value='POST' /> <input type='hidden' name='catalogue' value='<?= $fix_catalogue ?>' /> <input type='hidden' name='sub' value='<?= $fix_sub ?>' /> <input type='hidden' name='cc' value='<?= $fix_cc ?>' /> <input type='hidden' name='NC_HTTP_REQUEST' value='1' /> <input type='hidden' name='posting' value='1' /> <input placeholder="Логин" type="text" name="AUTH_USER" value="<?= htmlspecialchars($AUTH_USER, ENT_QUOTES) ?>" /> <input placeholder="Пароль" type="password" name="AUTH_PW" /> <? if ($ADMIN_AUTHTYPE == "manual" && $AUTHORIZATION_TYPE == "cookie") : ?> <input type="checkbox" name="loginsave" /> Запомнить <? endif; ?> <button href="/netcat/modules/auth/password_recovery.php">Забыли пароль</button> <button>Войти</button> </form>$fix_catalogue — идентификатор сайта;
$fix_sub — идентификатор раздела авторизации (будет создан ниже);
$fix_cc — идентификатор инфоблока в разделе авторизации (будет создан ниже);А ниже прописывается следующий блок кода, который отвечает за сабмит формы и отправку ajax-данных (предполагается что у формы атрибут id=»auth-form»):
<script> // отправка данных $('#auth-form').submit(function() { $.ajax({ type: "post", url:"/netcat/add.php", data:$(this).serialize() + '&isNaked=1', dataType:"json", success:responseAuth, error:responseAuthError }); $('#auth-form').find('input').each(function() { $(this).attr('disabled', 'disabled'); }); return false; }); // ошибка function responseAuthError (resp) { $('#auth-form').find('input').each(function() { $(this).removeAttr('disabled'); $(this).css('backgroundColor', '#f9c5c5'); }); return false; } // ответ // использовать jQuery.parseJSON(resp) не нужно function responseAuth (resp) { $('#auth-form').find('input').each(function() { $(this).removeAttr('disabled'); }); if (resp.status == 'ok') { // записываем результат ответа в нужный html-блок $('#auth-block').html(resp.text); } else { responseAuthError(null); } return false; } </script>В приведённом выше блоке кода есть две JavaScript-функции — responseAuth() и responseAuthError(), которые вызываются при успешном запросе или при ошибке. Эти функции можно значительно улучшить исходя из поставленных задач. Так же в коде использован функционал блокирования полей формы авторизации, чтобы исключить коллизии.
2. Компонент ответа
Для ответа на попытку авторизации нам нужно создать компонент, который будет передавать нужные json-данные в случае успешной авторизации. Чуть позже мы прикрепим компонент к специальному разделу, ну а пока просто создадим его «с нуля»:
Сам компонент пустой. В шаблонах действий поле «Условия добавления объекта» содержит код:
<? if (!$AUTH_USER_ID): ?> {'status' : 'error'} <? exit; ?> <? endif; ?>Этот код можно не писать, но тогда нужно будет установить права на добавление «Зарегистрированные» в инфоблоке, который будет создан ниже.
Поле «Действие после добавления» компонента соджержит код:
<? $text = "Здравствуйте, " . $current_user['Login']; $response_arr = array('status' => 'ok', 'text' => $text); echo json_encode($response_arr); ?>Последний блок кода отвечает за ответные данные в момент авторизации. В нём можно генерировать html-блок аторизированного пользователя для макета дизайна и передавать его посредствам json_encode(), чтобы избежать ошибок JavaScript.
3. Структура сайта
Теперь нужно создать скрытый раздел «AJAX-авторизация», к которому будет прикреплен компонент для вывода обратной информации в формате JSON. Ответный JSON будет генерироваться в момент попытки добавления пользователем объекта через созданный выше компонент.
В настройка инфоблока, после добавления компонента к разделу, нужно отметить чекбокс «Не использовать макет дизайна». Там же нужно установить права на отображение «Уполномоченные», а на добавление «Все» (если в компоненте есть код в поле «Условия добавления объекта», см. выше), или «Зарегистрированные» (если этого кода нет).
При доступе на добавление зарегистрированным пользователям, при попытке добавления любого объекта через этот инфоблок будет затребована авторизация. В том же запросе на добавление объекта будут переданны и авторизационные данные из формы. Данные авторизации будут учтены и в том случае, если авторизации затребовано не было.
После создания раздела и инфоблока следует обновить идентификаторы $fix_sub и $fix_cc в форме авторизации на первом шаге.
Инструкции по теме:
Тут вероятно ошибка:
data:$(this).serialize() + '&isNaked=1',
нет, все поля формы в строку через амперсанд собираются, вот пример http://api.jquery.com/serialize/