Авторизация через процессор в MODX

В этом руководстве мы рассмотрим вариант frontend авторизации пользователя с использованием встроенного процессора MODX security/login. Этот метод по сравнению с другими является наиболее простым, надежным и универсальным в реализации.

Автор материала

Артем Зернов. Веб-разработчик, создатель проекта Лектория, эксперт MODX Revolution, директор веб-студии OpenColour. Youtube-канал OpenModx.

4
8 минут на прочтение
Теги по этой теме:

В руководстве также используются сниппеты AjaxForm и FormIt (поэтому проверьте в менеджере пакетов, что они установлены).

Авторизация

Добавьте код, выводящий форму и запускающий выполнение авторизации, в поле Содержимое соответствующего ресурса.

[[!AjaxForm? 
  &snipet=`FormIt`
  &frontend_js=`assets/js/myform.js`
  &form=`loginPopupFormTpl`
  &hooks=`loginHook`
  &errtpl=`[[+error]]`
  &validate=`username:required,password:required`
  &validationErrorMesage=`Во время авторизации произошли ошибки` 
  &successMesage=`Авторизация успешно завершена`
  &submitVar=`sendLogin`
]]
Поле "содержимое" ресурса авторизации
Поле "содержимое" ресурса авторизации

Конечно, при полноценной разработке, я избегаю размещения кода вызова сниппета в содержимом ресурса и убираю это все в код шаблона или чанка, который используется в шаблоне, а поле "Содержимое" оставляю только для обычного содержимого вроде текстов и изображений, которые должны размещаться на странице. Но для демонстрации работы, такой способ вполне подойдет.

Вызов сниппета AjaxForm производится с обработчиком форм FormIt и необходимыми параметрами, которые по порядку рассмотрим ниже.

Форма авторизации

Создайте чанк loginPopupFormTpl содержащий описание формы авторизации, со следующим кодом.

<form data-redirect="[[~3]]">
	<div class="row">
		<div class="col-sm-12">
			<input type="text" placeholder="Имя пользователя" name="username"/>
			<span data-error-from="username"></span>
		</div>
		<div class="col-sm-12">
			<input type="password" placeholder="Пароль" name="password"/>
			<span data-error-from="password"></span>
		</div>
		<div class="col-sm-12">
			<button class="btn btn-primary" type="submit" name="sendLogin" value="1">
			Вход
			</button>
		</div>
	</div>
</form>

Здесь [[~3]] — это ID ресурса, куда необходимо перенаправить пользователя после успешной авторизации. Поля span предназначены для вывода ошибок в процессе авторизации. Остальной код не нуждается в комментариях.

Перенаправление при успешной авторизации

Так как, после успешной авторизации необходимо выполнить перенаправление пользователя, допустим в личный кабинет, то возложим эту задачу на JavaScript. Для этого в вызове сниппета AjaxForm укажем свой скрипт-обработчик myform.js, расположенный по адресу /assets/js/.

...
&frontend_js=`assets/js/myform.js`
...

Cоздадим его из оригинального скрипта AjaxForm. Для этого скопируйте из папки /assets/components/ajaxform/js/ файл default.js по адресу указанному в вызове сниппета и переименуйте его в myform.js. Откройте файл в редакторе и найдите код, который выполняется в случае отсутствия ошибок при успешной отправке формы.

else {
    AjaxForm.Message.success(response.message);
    form.find('.error').removeClass('error');
    form.find('[data-error-for]').html('');
    form[0].reset();
}

Перед закрывающей скобкой добавьте перенаправление на адрес, указанный в атрибуте data-redirect формы авторизации.

if(form.attr('data-redirect')){
	window.location.href = form.attr('data-redirect');
}

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

Подробнее о кастомизации AjaxForm для использования своих файлов можно узнать в этом видео.

Хук loginHook

Теперь приступим непосредственно к процессу выполнения авторизации. Создайте в сниппетах хук с именем loginHook и вставьте следующий код

<?php
	$properties = array(
		'login_context'=>'web',
		'username'=>$hook->getValue('username'),
		'password'=>$hook->getValue('password'),
		'rememberme'=>true,
	)
	
	$response=$modx->runProcessor(
		'security/login',
		$properties
	);
	
	if(!$response){
		$hook->addError('username','Системная ошибка');
		return false;
	}
	
	if($errors = $response-> getFieldErrors()){
		foreach($errors as $error){
			$hook->addError($error->getField(),$error->getMessage());
		}
		return false;
	}
	
	if($response->isError()){
		$hook->addError('username',$response->getMessage());
		return false;
	}
	return true;

Рассмотрим подробнее его логику работы.

Вначале запишем в переменную ‌$properties необходимые параметры вызова процессора. Как Вы уже поняли, функция getValue()‌ получает значение поля из формы. Обратите внимание, что имена полей формы должны совпадать с параметрами вызова этой функции.

	$properties = array(
		'login_context'=>'web',
		'username'=>$hook->getValue('username'),
		'password'=>$hook->getValue('password'),
		'rememberme'=>true,
	)

Далее находится код, запускающий процессор login с параметрами определёнными выше. В результате переменной $response будет присвоен полученный объект.

$response=$modx->runProcessor(
    'security/login',
    $properties
);

Процессоры системы MODx находятся по адресу core/model/modx/processors/. Соответственно в нашем вызове мы работаем с файлом login.class.php лежащем в core/model/modx/processors/security/.

Далее следует код, выполняющий анализ полученного ответа процессора. Если процессор не отработал по какой-либо причине (переменная $response пустая), то в поле username выведем сообщение Системная ошибка и прекратим работу нашего хука.

if(!$response){
    $hook->addError('username','Системная ошибка');
    return false;
}

Если в результате работы процессора возникли ошибки, то запишем их в соотвествующие поля и завершим работу хука.

if($errors = $response-> getFieldErrors()){
    foreach($errors as $error){
        $hook->addError($error->getField(),$error->getMessage());
    }
    return false;
}
if($response->isError()){
    $hook->addError('username',$response->getMessage());
    return false;
}

В случае отсутствия каких-либо ошибок в работе процессора, т.е. введенные логин и пароль верны, завершим выполнение хука со значением true.

return true;

Параметры AjaxForm

Разберем оставшиеся параметры вызова сниппета AjaxForm. Параметр &validate задается разделенным запятыми списком полей для проверки. Запуск с ключом username:required,password:required определяет, что поля username и password не должны быть пустыми. Задание &validationErrorMesage и &successMesage определяет выводимые сообщения в случае ошибки и успешной отправки формы соответственно. Свойство &submitVar задает имя POST-переменной для обработки формы (значение должно совпадать с именем поля submit формы авторизации).

После того, как весь код написан проверьте работу авторизации.

Где изучить подробнее?

Не так давно я создал большой курс по разработке интернет-магазинов на MODX Revolution, в котором помимо основных функций интернет-магазина я обучаю, как создавать личные кабинеты на MODX, где, как раз, мы гораздо глубже погружаемся в тему авторизации, регистрации и восстановления пароля.

Подробнее

Заключение

В этом руководстве рассмотрен способ организации процесса авторизации штатными средствами MODX, путем использования процессора login. Как видно, построение логики работы без сторонних плагинов, не представляет собой ничего сложного. Необходимо только разобраться в работе нужного процессора и запустить его, как правило, с набором необходимых параметров. На примере этого руководства не составит никакого труда написать обработчик формы на процессоре logout, который будет выполнять деавторизацию (выход или разлогинивание) пользователя.

Подробный курс по теме

Подробный курс
Артем Зернов
Профессиональная разработка интернет-магазинов на MODX
Онлайн

Другие статьи

Мы используем куки на нашем сайте. Продолжая просмотр, вы соглашаетесь с условиями пользовательского соглашения

Возникли проблемы при работе с сайтом или вы заметили ошибку?

Нажимая кнопку “Отправить”, вы даете свое согласие на обработку персональных данных
Пожалуйста, подождите. Процесс оформления заказа может занимать до 30 секунд.