S6 Studio

 

Ajax-авторизация на сайте под управлением 1C-Bitrix

Bitrix  Howto  JQuery  Ajax  • Евгений Задорин 13 сентября 2013 • Без комментариев

 

Да, это просто еще один скучный пост о том, как сделать красивую асинхронную авторизацию во всплывающем окошке.

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

Также придется чуть-чуть поскриптовать — одного ajax запроса с использованием jQuery будет достаточно.

Начну с того, как я реализовывал подобные вещи ранее.

Берем некий скрытый div, в который лепим форму авторизации — логин, пароль, флажок «Запомнить меня». Ловим событие submit формы, собираем данные и отправляем в какой-нибудь скрипт, вроде /ajax/auth.php, в котором ручками производим необходимые проверки и авторизуем пользователя.

Довольно долгое занятие, и бессмысленное, с учетом того, что все это сделано до нас и реализовано в стандартных компонентах.

Возможно ли решить данную задачу с использованием исключительно штатного функционала с минимальной кастомизацией шаблонов? Вполне. Объясню общий подход.

В том месте, где должен располагаться наш скрытый div с формой авторизации, поместим компонент bitrix:system.auth.form. Укажем название шаблона для всплывающей формы, пусть шаблон называется popup.

Далее нужно кастомизировать соответствущий шаблон. Копируем шаблон .default в свою папку с пользовательскими шаблонами и переименовываем в popup. Приводим его разметку к симпатичному виду в соответствии с макетом сайта. Надо сказать, что крайне желательно сохранить стандартный набор полей, если же это невозможно, то каким-либо образом передать нужные данные в скрытых input'ах. Затем необходимо создать в папке с шаблоном файл script.js, в котором пропишем всю ajax-магию. Примерное содержимое этого файла приведено ниже.

$(document).ready(function(){
	// ловим событие отправки формы
	$('form#login-form').submit(function(){
			
		// хорошим тоном будет сделать минимальную проверку формы перед отправкой
		// хотя бы на заполненность всех обязательных полей
		// в целях краткости здесь она не приводится

		var path = '/ajax/auth.php'; // объявляем путь к ajax-скрипту авторизации
		var formData = $(this).serialize(); // выдергиваем данные из формы
		
		// объявляем функцию, которая принимает данные из скрипта path
		var success = function( response ){
			if (response == 'Y')
			{
				// если авторизация успешна, по-варварски перезагрузим страницу
				window.location.href = window.location.href;
			}
			else
			{
				// в противном случае в переменной response будет текст ошибки
				// и его нужно где-то отобразить
				$('#auth-error').html( response ).show();
			}			
		};

		// явно указываем тип возвращаемых данных
		var responseType = 'html';

		// делаем ajax-запрос
		$.post( path, formData, success, responseType );

		return false; // не даем форме отправиться обычным способом
	});
});

Надеюсь по данному фрагменту кода вопросов не возникает. Интересен лишь формат возвращаемого ответа: Y в случае успеха, в остальных случаях ответ воспринимается как ошибка. Как добиться такого результата рассмотрим далее. Что должно быть написано в файле /ajax/auth.php?

Ответ прост — мы расположим там вызов этого же компонента bitrix:system.auth.form, но с другим шаблоном. Назовем его, к примеру ajax (оригинально так). Данный шаблон предназначен исключительно для вывода результата авторизации, поэтому его можно кастомизировать следующим примитивным образом:

< ?
	// подключим пролог
	if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
 
	global $USER;

	if ($USER -> IsAuthorized())
	{
		die('Y'); // если авторизация прошла успешно, возвращаем Y
	}

	// в противном случае нам нужно вернуть html с описанием ошибок
	if (isset($arResult['ERROR_MESSAGE']['MESSAGE']) && strlen($arResult['ERROR_MESSAGE']['MESSAGE']) > 0)
	{
		die($arResult['ERROR_MESSAGE']['MESSAGE']);
	}
	else
	{
		// ну а если описание ошибок отсутствует, вернем простое служебное сообщение, 
		// чтобы не держать пользователя в неведении
		die('Ошибка авторизации');
	}
? >

На этом все. Что получилось в итоге:

Ajax-авторизация с использованием стандартного компонента, двух кастомизированных шаблонов и одного js-файла. Данный рецепт проверен и внедрен на нескольких проектах, но подчеркну, что его нужно тщательно отладить для каждого конкретного случая.

<< К блогу Добавить комментарий

 

comments powered by Disqus

Самые популярные

К прочтению обязательно