Эта статья продолжение первой части Аякс форма авторизации и регистрации Битрикс на 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 вашего сайта.
Вот так будут выглядеть формы
Структура файлов авторизации и их подключение в шаблоне сайта Битрикс
Я прикрепил к статье архив со всеми файлами, структура архива
/ajax/auth.php- к этому файлу будут все обращения из джаваскрипта, он и будет возвращать html всех форм/components/- тут шаблоны компонентовsystem.auth.form, main.register, system.auth.forgotpasswd/css/auth.css- тут все необходимые стили для форм/js/auth.js- тут все джаваскрипты для форм/uikit/- тут все необходимые файлы для Uikitreadme.txt- краткая инструкция по подключению файлов
Все это дело вы можете скопировать в шаблон сайта, который используется, все имена файлов вроде как уникальные, но все же могут совпасть, поэтому, будьте осторожны, при копировании не перезапишите файлы сайта, чтобы не было больно.
В архиве я все положил в дефолтный шаблон Битрикс, но вот у меня на сайте шаблон называется 2014, значит все файлы буду копировать сюда:
/bitrix/templates/2014/
Итак, все файлы у нас есть, остается все это дело как-то запустить, придать этому всему ума)
1. Скопировать все можете в дефолтный шаблон, можете в шаблон сайта, но если подключить джаваскрипты в шаблоне сайта, то надо в файле /js/auth.js изменить значение переменной auth_url до файла /ajax/auth.php
Сам файл auth.php можете на сайте хранить вообще где угодно, главное прописать в джаваскрипте путь до него.
2. Подключаем в /bitrix/templates/шаблон_сайта/header.php джаваскрипты и стили из папок /css/, /js/, /uikit/, например так:
<?
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/uikit/uikit.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/uikit/form-password.gradient.min.css');
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH .'/css/auth.css');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/auth.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/uikit/uikit.min.js');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/uikit/form-password.min.js');
?>
3. В файле /bitrix/templates/шаблон_сайта/footer.php достаточно разместить верстку модального окна Uikit c id="auth-modal"
В эту верстку будут подгружаться формы авторизации, регистрации, восстановления пароля кликом по ссылке/кнопке "Личный кабинет" и кликом по всем ссылкам в формах типа "Вспомнить пароль", "Зарегистрироваться", "Авторизация"
<!--auth-modal-->
<div id="auth-modal" class="uk-modal">
<div class="uk-modal-dialog uk-modal-dialog-slide">
<a class="uk-modal-close uk-close"></a>
<div class="uk-modal-header"><h4>Вход в интернет-магазин</h4></div>
<div class="uk-modal-content">
<div class="ajaxloader" style="display: none;"></div>
</div>
</div>
</div>
<!--//auth-modal-->
4. Где-нибудь на сайте надо вот такую ссылку/кнопку вставить в шаблоне сайта, кликом по которой будут формы открываться в модальном окне
<a data-uk-modal="" href="#auth-modal" id="auth-link">Личный кабинет</a>
В целом все, если все подключили правильно, путь до файла auth.php прописали в файле auth.js (по умолчанию дефолтный шаблон прописан), то формы будут работать.
Пример работы форм можете на моем сайте посмотреть, все сделано точно также, но со временем могут изменяться, т.к. через какое-то время я еще что-нибудь придумаю, поэтому пишу мануал на память вам.
Почтовые шаблоны авторизации Битрикс
В нашем случае три формы и три текстовых почтовых шаблона, я их все изменил под, скажем так, современный и эстетичный вид.
Нам потребуются следующие почтовые шаблоны, пользуясь фильтром вы можете их запросто найти:
USER_INFO - Регистрационная информация
USER_PASS_CHANGED - Смена пароля
USER_PASS_REQUES - Восстановление пароля
NEW_USER_CONFIRM - Подтверждение регистрации нового пользователя
Кстати, в моем случае отключено подтверждение регистрации по e-mail.
Содержимое шаблона "Регистрационная информация" (USER_INFO)
Тут обратите внимание, на почту приходит пароль и логин в виде e-mail, все это генерируется в файле /ajax/auth.php
#NAME#, вы успешно зарегистрированы на сайте #SITE_NAME#
Ваши регистрационные данные:
ФИО: #NAME# #LAST_NAME#
E-mail / Логин: #EMAIL#
Пароль: #PASSWORD#
Пароль при необходимости можете изменить в личном кабинете.
--
C уважением
#SITE_NAME#
Содержимое шаблона "Смена пароля" (USER_PASS_CHANGED)
#NAME#, здравствуйте!
#MESSAGE#
Ваши регистрационные данные:
Имя и фамилия: #NAME# #LAST_NAME#
Эл.почта (логин): #EMAIL#
Пароль: введен вами в форме
p.s. Если вы не выполняли эту операцию, пожалуйста, свяжитесь с нами.
--
C уважением
#SITE_NAME#
Содержимое шаблона "Восстановление пароля" (USER_PASS_REQUES)
#NAME#, здравствуйте!
Для смены пароля перейдите по следующей ссылке
http://#SERVER_NAME#/auth/?change_password=yes&lang=ru&USER_CHECKWORD=#CHECKWORD#
--
C уважением
#SITE_NAME#
Содержимое шаблона "Подтверждение регистрации нового пользователя" (NEW_USER_CONFIRM)
Информационное сообщение сайта #SITE_NAME#
------------------------------------------
#NAME#, здравствуйте!
Вы получили это сообщение, так как ваш адрес был использован при регистрации
в интернет-магазине #SITE_NAME#
Ваши регистрационные данные:
Имя и фамилия: #NAME# #LAST_NAME#
Эл.почта (логин): #EMAIL#
Пароль: #PASSWORD#
Для подтверждения регистрации осталось перейти по ссылке:
http://#SERVER_NAME#/personal/?confirm_registration=yes&confirm_user_id=#USER_ID#&confirm_code=#CONF...#
Вы также можете вручную ввести код: #CONFIRM_CODE# для подтверждения регистрации на странице:
http://#SERVER_NAME#/personal/?confirm_registration=yes&confirm_user_id=#USER_ID#
Обратите внимание!
Ваш профиль не будет активным, пока вы не подтвердите свою регистрацию.
Благодарим Вас за регистрацию и желаем приятных покупок!
--
C уважением
#SITE_NAME#
С почтовыми шаблонами в Битрикс разобрались.
Пояснения по файлу auth.php
В файле есть много комментариев, но про самое интересное и кое-что новое здесь расскажу.1. Добавлена переменная
$bHideLogin = true; которая управляет показом системных полей "Логин, пароль, подтверждение пароля", при значении true поля будут спрятаны, а иначе будут выводиться.
На моем сайте они сейчас скрыты, а вот еще чтобы не выводились ошибки типа: "логин, пароль, подтверждение пароля не может быть пустым" я их генерирую двумя функциями в файле auth.php
Если переменной задать false, то эти поля появятся в форме и автоматическая генерация отключится, т.е. все будет работать как обычно.
За отображение полей я добавил в настройки компонента регистрации опцию "HIDE_LOGIN" => $bHideLogin, которая обрабатывается в файле result_modifier.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, проверено на родственниках)
Теперь у всех компонентов шаблон называется modal
Также обратите внимание на шаблон errors компонента system.auth.form , в прошлой статье я про это писал, этот шаблон сделан чисто для вывода ошибок над компонентами bitrix:system.auth.forgotpasswd, bitrix:main.register, т.к. эти два компонента в ручном режиме не выводят ошибки, а вот когда настроена системная авторизация, тогда выводят ошибки из ядра, такой вот есть нюанс в авторизации Битрикс.
7. Отсылаем сообщение о регистрации с логином и паролем
Когда я писал статью сообщение о регистрации пользователю отправлялось, что случилось сейчас не знаю, но перестало отправляться, решаем проблему в init.php
Регистрируем в системе событие OnAfterUserRegister() которое сработает после регистрации пользователя и отправит на почту все данные, в том числе сгенерированный пароль.
AddEventHandler("main", "OnAfterUserRegister", "OnAfterUserRegisterHandler");
function OnAfterUserRegisterHandler(&$arFields)
{
//Отправим письмо пользователю после регистрации со всеми данными
$arUserFields = array(
"USER_ID" => $arFields["USER_ID"],
"STATUS" => ($arFields["ACTIVE"] == "Y" ? 'Активен' : 'Не активен'),
"MESSAGE" => '',
"LOGIN" => $arFields["LOGIN"],
"PASSWORD" => $arFields["PASSWORD"],
"URL_LOGIN" => urlencode($arFields["LOGIN"]),
"CHECKWORD" => $arFields["CHECKWORD"],
"NAME" => $arFields["NAME"],
"LAST_NAME" => $arFields["LAST_NAME"],
"EMAIL" => $arFields["EMAIL"],
);
//CEvent::Send('USER_INFO', SITE_ID, $arFields, 'N');
CEvent::SendImmediate('USER_INFO', SITE_ID, $arUserFields, 'N');
//Отправим стандартную информацию пользователю, но без пароля,
//тогда отправку выше CEvent::SendImmediate(0 надо закомментить
//CUser::SendUserInfo($USER->GetID(), SITE_ID, 'Вы успешно зарегистрированы.', true);
}
Это пока все, что я хотел сказать, оставляйте комментарии, если что-то непонятно, в следующей части скорее всего буду рассказывать про готовый модуль авторизации и регистрации Битрикс, продолжение следует...