GitHub – ASDAFF/bx-ajax-auth-register-send_password_2: Форма авторизации и регистрации Битрикс на jQuery.ajax(). Часть 2

Почтовые шаблоны авторизации битрикс

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

Почтовые уведомления

Вот такие будут приходить почтовые уведомления.Само оформление письма делает мой модуль Умные статусы и письма заказов, а тексты будут у вас точно такие.

Что нового

1. Теперь форму авторизации и регистрации можно вызывать хоть по разным ссылкам, хоть по одной (как было в предыдущей статье).

2. Для входа на сайт по e-mail необходимо установить модуль из маркетплейса Авторизация по e-mail

3. Добавил переключение заголовка модального окна в зависимости от запрашиваемой формы (авторизации, регистрации, восстановления пароля).

4. Добавил иконки авторизации через соцсети из стандартного компонента.

5. Добавил оформление компонента восстановления пароля

6. Переделал подключение стилей и скриптов

7. Изменились все почтовые шаблоны

8. Исправлены все найденные ошибки

Db.php

Create database or import the database included from files then create a connection using PDO.

Index.php

This will be your route logic but since this is not a full mvc concept but we will called this a route 🙂

Login folder

in login folder you will see the login index, login.php and logout since is not a mvc concept we have separated folder called login in login folder we have index.php
logout.php and login.php this are your login sript you can modify or make oop class to make it one file only.

Login.js

in assets/js we will find the login.js this is our jquery ajax script with json response

$(document).ready(function(){$("#username").on("keyup",function(){$("#msg").hide();});$("#password").on("keyup",function(){$("#msg").hide();});functionloader(){$("#msg").html('<br/><br/><br/><br/><img src="ajax-loader.gif" width="40px" height="40px;"/> &nbsp;<font size="6">Welcome...</font><br/><br/>');}functionhideField(){$("#username").hide();$("#password").hide();$("#uname").hide();$("#upass").hide();$("#login_button").hide();$("#question").hide();$("#msg").hide();}$("#loginForm").on("submit",function(){varloginData=$(this).serialize();$.ajax({type:'POST',url:'login.php',dataType:'json',data: loginData,beforeSend:function(data){},success:function(data){if(data.response=="Success"){if(data.User=="SUPERUSER"){alert("SUPERUSER");hideField();$("#msg").fadeIn(function(){loader()});setTimeout(' window.location.href = "../?pg=superuser"; ',5000);}elseif(data.User=="SYSADMIN"){alert("SYSADMIN");hideField();$("#msg").fadeIn(function(){loader()});setTimeout(' window.location.href = "../?pg=sysadmin"; ',5000);}elseif(data.User=="HR"){alert("HR");hideField();$("#msg").fadeIn(function(){loader()});setTimeout(' window.location.href = "../?pg=hr"; ',5000);}elseif(data.User=="USER"){alert("USER");hideField();$("#msg").fadeIn(function(){loader()});setTimeout(' window.location.href = "../?pg=user"; ',5000);}}elseif(data.response=="Lock"){$("#msg").fadeIn(1000,function(){$("#msg").html('<div class="alert alert-danger"> <span class="fa fa-warning"></span> &nbsp; Your account is Temporarily Lock please contact &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbspAdministrator for this Assistant !</div>');});}else{$("#msg").fadeIn(1000,function(){$("#msg").html('<div class="alert alert-danger"> <span class="fa fa-warning"></span> &nbsp; Usrname or Password is Invalid !</div>');});}},error:function(xhr,status){alert(status.error);}});returnfalse;});});

Steps4: now create login form html

Now we will create login form HTML with Bootstarp.

Steps7: html for members page

We will display members page by calling welcome.php when login successful.

Дополнительно по просьбам трудящихся

**1) Как сделать переключение ссылок авторизации на личный кабинет, когда пользователь вошел на сайт?**В хедере (header.php) шаблона сайта добавьте такое условие

2) Как можно реализовать появление модального окна, если пользователь заходит по прямой ссылке, например на страницу личного кабинета?

а) В архиве есть шаблон .default компонента system.auth.authorize, в нем сделал пример, когда можно открыть форму по кнопке, этот шаблон будет применяться ко всем формам системной авторизации, если не нужен, обязательно удалите этот шаблон полностью.

б) Чтобы автоматически окно появлялось, добавил в этом же шаблоне скрипт, если пользователь открывает страницу с этим скриптом, на какой-бы странице он его не открыл, форма авторизации на всех страницах существует, скрипт откроет форму по событию click по кнопке/ссылке.Если кнопку нужно будет убрать, а запуск окна оставить, то спрячте кнопку с помощью style=”display:none”

Инструкция по установке и настройке

1. Скачиваем архив и распаковываем в шаблоне сайта .default папку auth и components, про php_interface расскажу ниже, путь получится таким:

/bitrix/templates/.default/auth  
/bitrix/templates/.default/components  

Вот такая будет в папке auth структура

2. Теперь будем все содержимое этой папки auth подключать в текущем видимом шаблоне сайта, а папку components трогать не будем, все шаблоны компонентов Битрикс сам будет подключать, он про это знает, поэтому я все решил для удобства хранить в дефолтном шаблоне, особенно если у вас несколько сайтов, удобно будет авторизацию из шаблона по умолчанию подключить в обоих сайтах.
   Например, у меня шаблон сайта 2022, в этом шаблоне я буду подключать необходимые скрипты из шаблона .default, у вас рабочий шаблон может называться совсем иначе, например eshop_bootstrap_blue

/bitrix/templates/2022

3. Все скрипты и стили подключаем в шаблоне текущего сайта в файле header.php

/bitrix/templates/2022/header.php  

Подключаем именно в таком порядке, соблюдаем порядок.

Если вы не понимаете, есть трудности с выводом этих стилей и скриптов сама jQuery, то вот весь необходимый код для подключения и вывода.Сначала подключаете и выводите стили, потом подключаете jQuery, потом остальные скрипты. jQuery всегда должна быть самой первой, это избавит вас от большинства проблем с модулями из маркетплейс.

4. Далее разберем подробно каждый подключенный файл

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

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

**modal.min.css** – стили модального окна Uikitform.min.css – стили форм Uikitform.password.min.css – стили кнопки показа пароля Uikitbutton.min.css – стили кнопок Uikitauth.css – стили авторизации *

core.min.js – основное ядро Uikitmodal.min.js – скрипт модального окна Uikitform.password.min.js – скрипт показа пароля Uikitauth.js – скрипт авторизации *

/images – тут иконки соцсетей и прелоадэр процесса загрузки форм

Все, вот эти все файлы должны быть подключены у кого сайт не на Uikit, у кого сайт на Uikit смотрите сами, что уже подключено, не подключайте, возможно также как у меня всего два файла подключите.Да, чуть не забыл, среди этих файлов компонентом Uikit является только form.password, все остальное уже есть в общих файлах uikit.min.js uikit.min.css, т.е. если у вас подключены вот эти файлы, то модалку, формы и кнопки подключать не надо, только form.password

5. Далее в файле footer.php текущего шаблона

/bitrix/templates/2022/footer.php

необходимо добавить верстку модального окна, в которую будут подгружаться аяксом все модалки, где-нибудь в самом конце перед закрывающим тегом

6. Далее в шаблоне сайта в том же файле header.php вам надо где-то в нужном месте разместить одну или обе ссылки вызова окна авторизации и регистрации.

.auth-link – просит аяксом у файла auth.php форму авторизации.reg-link – просит аяксом у файла auth.php форму регистрации

По аналогии вы можете сделать вызов любой формы, достаточно дописать немного файл **auth.js**Все, публичная часть полностью готова!

6. Далее оформим все почтовые шаблоны Битрикс, приведем их к единому виду, а также добавим поле с паролем, чтобы пользователь изменив пароль получал его на почту, увы, но это так, часть людей либо не запоминает, что вводит, либо с раскладкой мучается, а так он сможет скопировать пароль и вставить, очень удобно!

Все почтовые шаблоны хранятся здесь:

Настройки - Настройки продукта - Почтовые события - Почтовые шаблоны

Для поиска шаблона письма используем фильтр по полю Тип почтового события

Типы почтовых событий Битрикс для регистрации:

Клиентская авторизация

С клиентской авторизацией действительно нет ничего сложного.

Согласно

, достаточно асинхронно загрузить

и, «повесить»

VK.init({appid: YOUR_APP_ID})

на событие

window.vkAsyncInit

, после чего уже можно вызвать функцию

VK.Auth.login(authInfo, YOUR_APP_PERMISSIONS)

, которая и выполнит авторизацию пользователя.

var vk = {
 data: {},
 api: "//vk.com/js/api/openapi.js",
 appID: YOUR_APP_ID,
 appPermissions: YOUR_APP_PERMISSIONS,
 init: function(){
  $.js(vk.api);
  window.vkAsyncInit = function(){
   VK.init({apiId: vk.appID});
   load();
  }

  function load(){
   VK.Auth.login(authInfo, vk.appPermissions);

   function authInfo(response){
    if(response.session){ // Авторизация успешна
     vk.data.user = response.session.user;
     vk.getFriends();
    }else alert("Авторизоваться не удалось!");
   }
  }
 },
 getFriends: function(){
  VK.Api.call('friends.get', {fields: ['uid', 'first_name', 'last_name'], order: 'name'}, function(r){
   if(r.response){
    r = r.response;
    var ol = $('#clientApi').add('ol');
    for(var i = 0; i < r.length;   i){
     var li = ol.add('li').html(r[i].first_name ' ' r[i].last_name ' (' r[i].uid ')')
    }
   }else alert("Не удалось получить список ваших друзей");
  })
 }
}

$.ready(vk.init);

По-сути, этот код делает следующее:

По готовности документа загружается API ВКонтакте, и, после его инициализации, вызывается метод

VK.Auth.login()

, который показывает всплывающее окно,

которое успешно «блочится» любой баннерорезкой

, в котором пользователь должен подтвердить своё согласие предоставить данные клиентскому приложению.

Функция

authInfo

вызывается после согласия или несогласия пользователя, и, в случае успешной авторизации, запрашивает список друзей.

Клиентскую часть таким образом можно считать законченной, однако, стоит как-то предупреждать пользователей о возможности блокировки их браузером окна подтверждения.

Краткая инструкция по структуре архива

Общая структура архива, в теории всю папку можно смело копировать в папку /bitrix/, но можно что-то покалечить, поэтому, все в ручном режиме.

/bitrix/php_interface  
/bitrix/templates/.default  

1. Если у вас этот файл уже есть, тогда в самый конец вашего init.php добавьте содержимое этого файла, а если нет, просто скопируйте его.

/bitrix/php_interface/init.php

2. Содержимое этой папки копируйте в шаблон сайта по умолчанию .default, если там уже что-то есть, сделайте резервную копию и перезаписывайте.

/bitrix/templates/.default

В этой папке будет две подпапки auth и **components**

/bitrix/templates/.default/auth  
/bitrix/templates/.default/components  

Здесь все файлы авторизации (стили, скрипты, картинки, аякс-обработчик, uikit-компоненты)

/bitrix/templates/.default/auth

Здесь шаблоны компонентов авторизации Битрикс, которые формы выводят

/bitrix/templates/.default/components

• system.auth.form – форма авторизации
• main.register – форма настраиваемой регистрации в файле auth.php
• system.auth.forgotpasswd – форма запроса восстановления пароля
• system.auth.changepasswd – форма смены пароля (не модальное)
• system.auth.authorize – форма системной авторизации, где автоматом будет запускаться модальное окно авторизации

Настройки локальной системы авторизации

Разрешить авторизацию через внешние сервисы – чтобы выводилась авторизация и регистрация через соцсети необходимо включить эту настройку.

Шаблон системных компонентов авторизации – необходимо оставить пустым, иначе совсем другие шаблоны будут подключаться, например, flat, а в статье modal

Передавать пароль в зашифрованном виде – необходимо отключить, иначе аяксом будет возвращаться js-ошибка

Позволять ли пользователям регистрироваться самостоятельно – конечно разрешить, иначе никто не сможет зарегистрироваться на сайте

Пояснения по файлу auth.php

В файле есть много комментариев, но про самое интересное и кое-что новое здесь расскажу.

Серверная авторизация

Серверная авторизация гораздо веселее. Механизм серверной авторизации для доступа к ВКонтакте API с стороннего сайта создан на базе протокола OAuth 2.0.

Процесс авторизации происходит следующим образом:

1. Необходимо в браузере пользователя показать страницу, где он разрешит приложению доступ к своим данным;
2. После успешной авторизации приложения браузер пользователя будет перенаправлен по адресу REDIRECT_URI, указанному при открытии диалога авторизации. При этом в GET-параметре будет передан код для получения ключа доступа;
3. Необходимо выполнить запрос с передачей кода и секретных данных приложения на специальный адрес, в ответ мы получим ключ доступа access_token, необходимый нам для совершения запросов к API.

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

К тому же, открытие дополнительного окна опять-таки связано с опасностью, что оно будет заблокировано.

К счастью, если мы знаем ссылку, по которой нужно открыть окно, есть много хороших способов открыть его так, чтобы оно не было заблокировано. Например, старый добрый тег iframe всё ещё в строю стандарта HTML, и он как нельзя лучше подходит для нашей задачи.

Во-первых, раз мы знаем адрес, то мы можем и открыть фрейм и показать пользователю ссылку, где можно всё проделать вручню.

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

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

Реализацию класса доступа к VK API по OAuth на PHP можно легко найти на гитхабе, что я и сделал (PHP >= 5.4).(Совершенно случайно оказалось, что этот класс, скорее всего, написан хабрапользователем vladkens, за что ему огромное спасибо)

Теперь перейдём к самому интересному.

<?php
 require_once('vk.php');
 session_start();
 
 function getPostStr($data, $default = false){ // возврачает строку - значение $_POST[$data]
  if(!isset($_POST[$data])) return $default;
  $data = $_POST[$data];
  $data = htmlspecialchars(strip_tags(trim($data)));
  return ($data != "" ? $data : $default);
 }
 function error($code, $text, $params = Array()){
  $result = Array('error' => Array('code' => $code, 'message' => $text));
  if(count($params) > 0) foreach($params as $key => $value) $result['error'][$key] = $value;
  die(json_encode($result));
 }
 
 $vkConf = Array(
  'appID'       => YOUR_APP_ID,
  'apiSecret'   => YOUR_API_SECRET,
  'callbackUrl' => YOUR_DOMAIN . '/auth.php',
  'apiSettings' => YOUR_APP_PERMISSIONS
 );
 
 $vk = (isset($_SESSION['accessToken']))
        ? new VK($vkConf['appID'], $vkConf['apiSecret'], $_SESSION['accessToken']) : null;
 
 function userIn($vk, $vkConf){ // Авторизация пользователя
  unset($_SESSION['accessToken']);
  $vk = new VK($vkConf['appID'], $vkConf['apiSecret']);
  $authorizeUrl = $vk -> getAuthorizeURL($vkConf['apiSettings'], $vkConf['callbackUrl']);
  error(-1, "Необходима авторизация ВКонтакте!", Array('url' => $authorizeUrl));
 }
 function getFriends($fields, $order, $vk){ // Получение списка друзей пользователя
  $userFriends = $vk -> api('friends.get', array('fields' => $fields, 'order' => $order));
  $result = Array();
  foreach($userFriends['response'] as $key => $value){
   $result[] = Array('firstName' => $value['first_name'], 'lastName' => $value['last_name'], 'uid' => $value['uid']);
  }
  echo json_encode($result);
 }

 $method = strtolower($api -> getStr("method"));

 switch($method){
  case "user.in"     : userIn($vk, $vkConf); break;
  case "friends.get" : getFriends(getPostStr("fields"), getPostStr("order"), $vk); break;
  default: Api::error(0, "Неверный запрос к Api");
 }
?>

Запросы на эту страницу мы будем посылать методом POST, где параметр

method

содержит название метода, который мы хотим выполнить на сервере.