S6 Studio
Ajax-авторизация на сайте под управлением 1C-Bitrix
Да, это просто еще один скучный пост о том, как сделать красивую асинхронную авторизацию во всплывающем окошке.
Оговорюсь сразу, реализация пойдет под конкретно взятую CMS Bitrix, с использованием стандартных компонентов и кастомизацией их шаблонов.
Также придется чуть-чуть поскриптовать — одного ajax запроса с использованием jQuery будет достаточно.
Начну с того, как я реализовывал подобные вещи ранее.
Берем некий скрытый div, в который лепим форму авторизации — логин, пароль, флажок «Запомнить меня». Ловим событие submit формы, собираем данные и отправляем в какой-нибудь скрипт, вроде /ajax/auth.php, в котором ручками производим необходимые проверки и авторизуем пользователя.
Довольно долгое занятие, и бессмысленное, с учетом того, что все это сделано до нас и реализовано в стандартных компонентах.
Возможно ли решить данную задачу с использованием исключительно штатного функционала с минимальной кастомизацией шаблонов? Вполне. Объясню общий подход.
В том месте, где должен располагаться наш скрытый div с формой авторизации, поместим компонент bitrix:system.auth.form. Укажем название шаблона для всплывающей формы, пусть шаблон называется popup.
Далее нужно кастомизировать соответствущий шаблон. Копируем шаблон .default в свою папку с пользовательскими шаблонами и переименовываем в popup. Приводим его разметку к симпатичному виду в соответствии с макетом сайта. Надо сказать, что крайне желательно сохранить стандартный набор полей, если же это невозможно, то каким-либо образом передать нужные данные в скрытых input’ах. Затем необходимо создать в папке с шаблоном файл script.js, в котором пропишем всю ajax-магию. Примерное содержимое этого файла приведено ниже.
Надеюсь по данному фрагменту кода вопросов не возникает. Интересен лишь формат возвращаемого ответа: Y в случае успеха, в остальных случаях ответ воспринимается как ошибка. Как добиться такого результата рассмотрим далее. Что должно быть написано в файле /ajax/auth.php?
Ответ прост — мы расположим там вызов этого же компонента bitrix:system.auth.form, но с другим шаблоном. Назовем его, к примеру ajax (оригинально так). Данный шаблон предназначен исключительно для вывода результата авторизации, поэтому его можно кастомизировать следующим примитивным образом:
На этом все. Что получилось в итоге:
Ajax-авторизация с использованием стандартного компонента, двух кастомизированных шаблонов и одного js-файла. Данный рецепт проверен и внедрен на нескольких проектах, но подчеркну, что его нужно тщательно отладить для каждого конкретного случая.
Ajax форма авторизации битрикс
#Аякс форма авторизации и регистрации Битрикс на jQuery Ajax
Сегодня научимся делать формы авторизации, регистрации и восстановления пароля на стандартных шаблонах Битрикс с помощью jQuery Ajax, которые без перезагрузки страницы будут проверять валидность логина и пароля, выводить ошибки, авторизовывать, регистрировать и отправлять информацию о восстановлении пароля.
Если вы еще не изучили метод jQuery.ajax(), обязательно изучите, без него ни один проект не полноценен.
Модальные окна у меня работают на css-фреймворке Uikit, как и весь сайт, поэтому у Вас вызов модальных окон не будет работать, придется самим модальные окна сделать.
Также имейте ввиду, что регистрация в этом примере обычная, с полями по умолчанию, компонент настраиваемой регистрации необходимо настроить под себя самому.
Вместо компонента system.auth.form Вы можете попробовать компонент system.auth.authorize, у каждого свои плюсы и минусы, зависит от задачи, у меня все максимально стандартно получилось.
Для регистрации можно использовать один из двух компонентов, самый простой из них bitrix:system.auth.registration закомментирован, а используется компонент Настраиваемая регистрация__(bitrix:main.register)
Если настраиваете компонент bitrix:main.register в файле footer.php, то в файле auth.php также необходимо сделать его настройку, иначе после нажатия на кнопку Регистрация будут выводиться другие поля в форме после ajax-ответа.
С помощью jQuery подменяем атрибуты «href» ссылок для вызова модальных окон.
Атрибут «action» у всех форм от текущей открытой страницы сайта, иначе подставится путь до файла вот такой «/bitrix/templates/.default/ajax/auth.php» и не будет работать форма корректно.
Также заменяем значение скрытого инпута «backurl», который будет возвращать нас после перезагрузки страницы туда, откуда пришли, т.е. на текущую страницу.
Ошибки ajax я не оформлял для этого примера, попробуйте сами оформить, как захочется в методе error: function(request,error)
В методе success: function(data) ajax вернет HTML-код формы, здесь надо опять подменить все «href» атрибуты у ссылок и атрибут «action» у формы.
Код для показа всех форм по ссылкам в архиве в файле fn.js, его нужно подключить к шаблону вашего сайта, там в принице все готово, нужно только как-то вызывать форму авторизации по кнопке.
Дорогой GetFullName();?>!
Вы зарегистрированы и успешно вошли на сайт!
Сейчас страница автоматически перезагрузится и Вы сможете продолжить
работу под своим именем.
Дорогой GetFullName();?>!
Вы зарегистрированы и успешно вошли на сайт!
Сейчас страница автоматически перезагрузится и Вы сможете продолжить
работу под своим именем.
Вот этот файл будет обрабатывать данные, которые присылает jQuery.ajax() по действию посетителя и вернет html-код формы с ошибками.
Файл у меня расположен по этому пути «/bitrix/templates/.default/ajax/auth.php» и в коде jQuery прописаны эти пути, но если Вам такой подход не нравится, можете в корне сайта в папке «/ajax/» разместить этот файл и переписать в коде jQuery соответствующие пути, должно работать, тогда желательно закрыть от индексации эту папку в файле «robots.txt«, если в корне сайта разместите.
В PHP-обработчике обратите внимание на компонент bitrix:system.auth.form с шаблоном «errors» над регистрацией и восстановлением пароля.
Дело в том, что компоненты регистрации и восстановления пароля по отдельности не выводят ошибки, ошибки выводятся Битриксом при стандартном вызове форм с помощью константы define(«NEED_AUTH», true); перед «header.php«, а когда делаешь регистрацию и восстановление пароля на компонентах, то они ошибок не выводят, для этого я делаю отдельный шаблон «errors» только для вывода ошибок компонентом bitrix:system.auth.form, он выводит ошибки.
Содержимое шаблона «errors» компонента bitrix:system.auth.form для вывода ошибок.
Это по сути все, весь необходимый код, но!
Если бы не было подобного куска кода «javascript» в шаблонах этих компонентов
то при данном способе даже копировать шаблоны компонентов не пришлось бы, а так они после ajax-запроса возвращают ошибку, ее в консоли браузера можно увидеть, придется еще удалять этот javascript.
Но все равно это придется сделать, т.к. в 9 случаях из 10 при разработке сайта приходится копировать шаблоны компонентов, на сайтах клиентов не получается обойтись стандартными средствами и применением только стилей.
Итак, копируем шаблоны этих компонентов и удаляем джаваскрипт, который мешает:
bitrix:system.auth.form
В шаблоне этого компонента ошибок у меня нет, но в Вашей версии Битрикс может быть.
bitrix:system.auth.registration (не используется)
Тут есть ошибка, находим и удаляем вот этот скрипт:
Вот это уже все!
Если все сделали правильно, формы должны работать как на моем сайте.
На стандартных шаблонах формы выглядят почти так: 
Если считаете, что все сделали правильно и не работает, оставляйте комментарии, может я чего упустил при написании статьи, все исходники я прикрепил, проще скачать архив и попробовать на готовых файлах, там убрано все лишнее и 100% рабочее, делая по статье велика вероятность ошибиться.
Рекомендую еще ознакомиться с аналогичной статьей Антона Долганина Форма авторизации на AJAX, другой интересный подход к реализации.
В компоненты регистрации встроен Антибот, но как сделать, чтобы он заработал в Битрикс читайте в статье Антибот регистрации на сайте
Аякс форма авторизации и регистрации на jQuery Ajax. Часть 3
Продолжаем совершенствовать авторизацию сайтов на 1С Битрикс в модальном окне css-фреймворка Uikit с помощью jQuery.ajax()
В этой статье опишу все заново, чтобы было как можно меньше непонятных моментов и соответственно вопросов.
По Вашим многочисленным просьбам я переделал скрипт вызова модального окна, т.к. предыдущий мой вариант статьи Форма авторизации и регистрации Битрикс на jQuery.ajax(). Часть 2 оказался не очень гибким для многих.
Что нового
Формы авторизации
Почтовые уведомления
Вот такие будут приходить почтовые уведомления.
Само оформление письма делает мой модуль Умные статусы и письма заказов, а тексты будут у вас точно такие.
Краткая инструкция по структуре архива
Общая структура архива, в теории всю папку можно смело копировать в папку /bitrix/, но можно что-то покалечить, поэтому, все в ручном режиме.
1. Если у вас этот файл уже есть, тогда в самый конец вашего init.php добавьте содержимое этого файла, а если нет, просто скопируйте его.
В этой папке будет две подпапки auth и components
Здесь все файлы авторизации (стили, скрипты, картинки, аякс-обработчик, uikit-компоненты)
Здесь шаблоны компонентов авторизации Битрикс, которые формы выводят
Инструкция по установке и настройке
1) Скачиваем архив и распаковываем в шаблоне сайта .default папку auth и components, про php_interface расскажу ниже, путь получится таким:
Вот такая будет в папке auth структура 
2) Теперь будем все содержимое этой папки auth подключать в текущем видимом шаблоне сайта, а папку components трогать не будем, все шаблоны компонентов Битрикс сам будет подключать, он про это знает, поэтому я все решил для удобства хранить в дефолтном шаблоне, особенно если у вас несколько сайтов, удобно будет авторизацию из шаблона по умолчанию подключить в обоих сайтах.
Например, у меня шаблон сайта 2014, в этом шаблоне я буду подключать необходимые скрипты из шаблона .default, у вас рабочий шаблон может называться совсем иначе, например eshop_bootstrap_blue
3) Все скрипты и стили подключаем в шаблоне текущего сайта в файле header.php
Подключаем именно в таком порядке, соблюдаем порядок.
Если вы не понимаете, есть трудности с выводом этих стилей и скриптов + сама jQuery, то вот весь необходимый код для подключения и вывода.
Сначала подключаете и выводите стили, потом подключаете jQuery, потом остальные скрипты. jQuery всегда должна быть самой первой, это избавит вас от большинства проблем с модулями из маркетплейс.
4) Далее разберем подробно каждый подключенный файл
На момент написания статьи версия фреймворка была Uikit 2.27.2 + тема gradient
Я специально разделил стили на файлы, чтобы тем, у кого сайт полностью сделан на Uikit, можно было отключить уже подключенные на самом сайте компоненты и стили, а у кого сайт на чем-то другом, например, готовое решение, то скорее всего надо все файлы подключить, но не факт.
Например, на моем сайте подключено всего два обязательных файла авторизации, все остальное уже в шаблоне сайта подключено.
Все, вот эти все файлы должны быть подключены у кого сайт не на Uikit, у кого сайт на Uikit смотрите сами, что уже подключено, не подключайте, возможно также как у меня всего два файла подключите.
Да, чуть не забыл, среди этих файлов компонентом Uikit является только form.password, все остальное уже есть в общих файлах uikit.min.js + uikit.min.css, т.е. если у вас подключены вот эти файлы, то модалку, формы и кнопки подключать не надо, только form.password
5) Далее в файле footer.php текущего шаблона
необходимо добавить верстку модального окна, в которую будут подгружаться аяксом все модалки, где-нибудь в самом конце перед закрывающим тегом
Создание простой ajax формы логина
Еще пол года назад я не вникал в то, как функционирует ajax в битриксе, компоненты с его поддержкой работали нормально, а те которые не поддерживали можно было кастомизировать с нужным функционалом не сложно. Вариантов как в конечном итоге реализовывать было несколько.
В один момент, мне всё же захотелось реализовать, используя подход самой цмс, и я начал использовать различные битриксовые функции. Не скажу, что от использования этого функционала я получал удовольствие, но оно работало и главное не вносило дополнительных зависимостей и это хорошо.
На днях мне в очередной раз стало необходимо сделать форму логина в отдельном окошке и соответственно это должно работать без перезагрузки. Кастомизировать компонент очень не хотелось, использовать дополнительную страницу, которая бы была контролером для ajax-запросов так же не хотелось. Про дополнительные шаблоны создавать для таких целей по мойму моветон. Поэтому по привычке стал почитывать код битрикса.
Решение оказалось очень простым.
Первое, что для меня оказалось новым – компонент принял параметры не объявленные в параметрах AJAX_MODE и AJAX_OPTION_JUMP. И приняв эти параметры – обернул компонент в дополнительный блок div с уникальным атрибутом id. Но по определенным причинам, к форме внутри этого блока не применился скрипт.
Поэтому, вторым шагом было добавления ajax.js в скрипты сайта, это делается вызовом функции CAjax::Init();
В конце, надо добавить в форму еще поле:
»/>
После этих правок, форма уже будет работать.
Вот собственно и всё – 5 строчек не сложного кода и работающий стандартный компонент без каких-либо зависимостей.
Форма авторизации и регистрации на jQuery.ajax(). Часть 2
Эта статья продолжение первой части Аякс форма авторизации и регистрации Битрикс на jQuery Ajax, формы авторизации, регистрации и восстановления пароля на стандартных шаблонах Битрикс с помощью jQuery Ajax, в которой были некоторые неудобства, да и ошибки я там допустил с шаблонами, в этот раз будет что-то новое, современное, более удобное решение.
Сегодня сделаем три веб формы Битрикс (авторизации, регистрации и восстановления пароля) на jQuery-аякс в модальных окнах Uikit для Битрикс, с возможностью автоматического генерирования пароля и e-mail вместо логина, а также поправим все почтовые шаблоны авторизации, регистрации и восстановления пароля. Теперь с авторизацией и регистрацией на сайте все будет красиво.
Да, вы не ослышались, это решение будет чисто для Uikit, я с ним работаю уже второй год и мне он очень нравится + коллеги попросили написать статью именно для него, но адаптировать скрипт для других css-фреймворков и плагинов модальных окон не составит труда при наличии определенных знаний, в самом конце я расскажу, что нужно сделать в вашем случае.
В форме авторизации я сделал возможность менять аяксом код подтверждения (капчу)
В форме регистрации я скрыл поля Логин, Пароль и Подтверждение пароля, пароль будет генерироваться автоматически, а логин будет состоять из e-mail, но вы можете вернуть все обратно, об этом я напишу в самом низу статьи.
Также, в форме регистрации сделал сортировку полей в том порядке, в котором они заданы в настройках компонента bitrix:main.register в файле /ajax/auth.php, об этом тоже в самом конце напишу подробней.
Также, в форме регистрации встроен мой Антибот регистраций на сайте Битрикс, чтобы он заработал, нужно найти в архиве файл init.php.txt в папке /bitrix/php_interface/ и в случае, если на вашем сайте нет такого файла init.php в той же папке, то просто переименуйте его в init.php, а если есть такой файл, то нужно содержимое файла init.php.txt из архива добавить где-нибудь в конце init.php вашего сайта.
Вот так будут выглядеть формы
Структура файлов авторизации и их подключение в шаблоне сайта Битрикс
Я прикрепил к статье архив со всеми файлами, структура архива
Все это дело вы можете скопировать в шаблон сайта, который используется, все имена файлов вроде как уникальные, но все же могут совпасть, поэтому, будьте осторожны, при копировании не перезапишите файлы сайта, чтобы не было больно.
В архиве я все положил в дефолтный шаблон Битрикс, но вот у меня на сайте шаблон называется 2014, значит все файлы буду копировать сюда:
/bitrix/templates/2014/
Итак, все файлы у нас есть, остается все это дело как-то запустить, придать этому всему ума)
1. Скопировать все можете в дефолтный шаблон, можете в шаблон сайта, но если подключить джаваскрипты в шаблоне сайта, то надо в файле /js/auth.js изменить значение переменной auth_url до файла /ajax/auth.php
Сам файл auth.php можете на сайте хранить вообще где угодно, главное прописать в джаваскрипте путь до него.
3. В файле /bitrix/templates/шаблон_сайта/footer.php достаточно разместить верстку модального окна Uikit c id=»auth-modal»
В эту верстку будут подгружаться формы авторизации, регистрации, восстановления пароля кликом по ссылке/кнопке «Личный кабинет» и кликом по всем ссылкам в формах типа «Вспомнить пароль», «Зарегистрироваться», «Авторизация»
Вход в интернет-магазин
4. Где-нибудь на сайте надо вот такую ссылку/кнопку вставить в шаблоне сайта, кликом по которой будут формы открываться в модальном окне
В целом все, если все подключили правильно, путь до файла auth.php прописали в файле auth.js (по умолчанию дефолтный шаблон прописан), то формы будут работать.
Пример работы форм можете на моем сайте посмотреть, все сделано точно также, но со временем могут изменяться, т.к. через какое-то время я еще что-нибудь придумаю, поэтому пишу мануал на память вам.
Почтовые шаблоны авторизации Битрикс
В нашем случае три формы и три текстовых почтовых шаблона, я их все изменил под, скажем так, современный и эстетичный вид.
Кстати, в моем случае отключено подтверждение регистрации по e-mail.
Содержимое шаблона «Регистрационная информация» (USER_INFO)
Тут обратите внимание, на почту приходит пароль и логин в виде e-mail, все это генерируется в файле /ajax/auth.php
#NAME#, вы успешно зарегистрированы на сайте #SITE_NAME#
Ваши регистрационные данные:
ФИО: #NAME# #LAST_NAME#
E-mail / Логин: #EMAIL#
Пароль: #PASSWORD#
Пароль при необходимости можете изменить в личном кабинете.
Ваши регистрационные данные:
Имя и фамилия: #NAME# #LAST_NAME#
Эл.почта (логин): #EMAIL#
Пароль: введен вами в форме
p.s. Если вы не выполняли эту операцию, пожалуйста, свяжитесь с нами.
Вы получили это сообщение, так как ваш адрес был использован при регистрации
в интернет-магазине #SITE_NAME#
Ваши регистрационные данные:
Имя и фамилия: #NAME# #LAST_NAME#
Эл.почта (логин): #EMAIL#
Пароль: #PASSWORD#
Вы также можете вручную ввести код: #CONFIRM_CODE# для подтверждения регистрации на странице:
http://#SERVER_NAME#/personal/?confirm_registration=yes&confirm_user_id=#USER_ID#
Обратите внимание!
Ваш профиль не будет активным, пока вы не подтвердите свою регистрацию.
Благодарим Вас за регистрацию и желаем приятных покупок!
—
C уважением
#SITE_NAME#
С почтовыми шаблонами в Битрикс разобрались.
Пояснения по файлу auth.php
В файле есть много комментариев, но про самое интересное и кое-что новое здесь расскажу.
Зачем я это сделал? Ну, когда вы часто где-то регистрируетесь просто надоедает постоянно помнить пароль и логин.
— Да, мы разработчики конечно это все храним в какой-нибудь программе или файле, но обычные пользователи это все пытаются помнить.
— Да, было бы конечно здорово, когда на всех сайтах твой любимый логин Devil_May_Cry был свободен, но реально это встречается редко, поэтому, приходится хранить десятки логинов к сайтам, да и пароли часто встречаются разного формата, на каких сайтах запрещены спецсимволы, на каких наоборот без них никак, одни словом, бардак!
Реально, у многих обычных пользователей ПК регистрация и восстановление пароля занимает 10-20 мин., а может и даже больше времени, а так, вместо логина будет e-mail, пароль пользователю сгенерируется автоматически, ему достаточно помнить свои Имя, Фамилия, E-mail, все остальное форма сделает за него и скинет ему все на почту, просто и удобно, не надо помнить ничего лишнего.
2. Добавлена смена капчи аяксом при авторизации и регистрации 
Выглядит это так, капча выводится в зависимости от настроек групп пользователей, у меня после трех неправильных попыток + есть кнопка обновления капчи аяксом. 
3. Исправлена сортировка полей заданных в настройках компонента регистрации.
Кто работал со стандартными компонентами, тот заметил, что в компоненте регистрации bitrix:main.register всегда первыми и в одном порядке выводятся поля: логин, пароль, подтверждение пароля, e-mail.
C полями логин, пароль, подтверждение пароля мне как-то пофик, пусть выводятся первыми, а вот когда e-mail выводится перед полями «имя и фамилия» мне как-то не нравится, поэтому решил сделать сортировку полей заданных именно в настройках компонента регистрации, в файле auth.php выглядит это вот так:
Вот в каком порядке здесь поля, в таком порядке и в форме они будут выводиться, также очень удобно.
4. Предусмотрена авторизация и регистрация через соц. сети в компоненте авторизации Битрикс
Чтобы социалки появились в форме необходимо:
а) Установленный модуль Битрикс Социальные сервисы 
б) В настройках главного модуля Разрешить авторизацию через внешние сервисы
в) В настройках модуля Социальные сервисы включить необходимые и настроить ниже каждый сервис. 
После всех настроек в форме авторизации появится авторизация через социальные сервисы Битрикс
Но тут есть проблема, т.к. мы форму получаем аяксом, компонент социальных сервисов будет без стилей, т.е. иконок социальных сетей нет, поэтому я сделал такие иконки для примера на том же Uikit с использованием встроенных в него иконок шрифта FontAwesome.
5. В форму авторизации встроен компонент Form password фреймворка Uikit, который дает возможность пользователю увидеть пароль, который пишет в форме.
Обязательно делайте такую возможность на своих сайтах, для обычных пользователей скрытое поле с паролем доставит уйму проблем, например: он не видит, что пишет, не видит в какой раскладке, а если установлена программа Punto Switcher от Яндекс, которая автоматически переключает раскладку, пользователь вашего сайта может вообще не авторизоваться, даже восстановление пароля не поможет, это мы умеем пользоваться буфером операционной системы по Ctrl + C, Ctrl + V, а обычный пользователь ПК про это не знает, продолжает набирать восстановленный пароль из почты вручную и вот тут-то опять попадается на автоматическую смену раскладки программой Punto Switcher, проверено на родственниках)
6. Все шаблоны компонентов авторизации, регистрации и восстановления пароля не пересекаются с дефолтными.
7. Отсылаем сообщение о регистрации с логином и паролем
Когда я писал статью сообщение о регистрации пользователю отправлялось, что случилось сейчас не знаю, но перестало отправляться, решаем проблему в init.php
Регистрируем в системе событие OnAfterUserRegister() которое сработает после регистрации пользователя и отправит на почту все данные, в том числе сгенерированный пароль.
//Отправим стандартную информацию пользователю, но без пароля,
//тогда отправку выше CEvent::SendImmediate(0 надо закомментить
//CUser::SendUserInfo($USER->GetID(), SITE_ID, ‘Вы успешно зарегистрированы.’, true);
>
Это пока все, что я хотел сказать, оставляйте комментарии, если что-то непонятно, в следующей части скорее всего буду рассказывать про готовый модуль авторизации и регистрации Битрикс, продолжение следует.