AJAX-авторизация в CMS NetCat

AJAX-авторизация в CMS NetCatПопулярная отечественная 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 в форме авторизации на первом шаге.


Инструкции по теме:

2 thoughts on “AJAX-авторизация в CMS NetCat”

  1. Александр:
    08.10.2014 в 12:44

    Тут вероятно ошибка:

    data:$(this).serialize() + '&isNaked=1',

Добавить комментарий