ФОРМА авторизации и регистрации

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

Вкратце что разберем:

• Верстку сделаем с использованием FlexBox .
• Пробежимся, как вставлять шрифтовые иконки
• Научимся делать вкладки, к тому же не просто научимся, а по этап но разберем, как этот механизм работает на CSS и на JS .
• Реализуем с вами плавающий текст. До этого в одном из уроков я показывал, как это делать при помощи JS, а тут рассмотрим как это сделать при помощи CSS.
• Познакомимся по ближе с псевдоэелемтами ::before и ::after , и на базе этих знаний сделаем анимацию у кнопки, далее создадим свой анимированный чекбокс.
• В заключительном уроке создадим круговую анимированную обводку у социальных иконок.

По истечению этих уроков вы определенно приобретете знания, которые в дальнейшем вам пригодятся. Обязательно практикуйтесь и внедряйте то что узнали, ведь теория это просто слова, подкрепляйте это все своими действиями и вы научитесь понимать как CSS так и JS.

Предварительная подготовка файлов

Делаем общею разметку, а далее оформляем блоки при помощи CSS.

Сделаем index файл и прописываем в нем DOCTYPE.

Вставляем заголовок «Форма для авторизации», мета тег viewport оставим можно не прописывать но лишним не будет. Подключаем jquery , при помощи его покажу как реализовать ряд эффектов как на нем, так и сравним его с CSS . Ниже подключаем иконки через bootstrapcdn , и далее файл стилей, который позже создадим.

В самой структуре расположен блок с классом dws-wrapper , в нем буду описывать html разметку , а затем при помощи данного класса все выровним посередине экрана. Я его использую для удобства записи и просмотра текущего видео урока. Так что сам класс этот не обязательный, и в своих примерах можете его не прописывать.

         
Тут описываем весь код формы
   

Далее создаем файл стилей style.css , в нем подключаем шрифт Roboto , сбрасываю отступы у body и центрую блок с классом dws-wrapper посередине экрана.

/* —— google Font ——*/ @import url(‘https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700’); body < margin: 0; padding: 0; font-family: Roboto, sans-serif; >.dws-wrapper

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

Для этого объявляем flex-контейнер, задаем высоту область окна 100vh , а затем его элементы выравниваем по горизонтали и вертикали.

/* —— Выравнивание по середине ——*/ .dws-wrapper

Переходим в index файл и создаем в нутрии блок с классом dws-form , он будет являться основным контейнером обертки форм.

Мы сделаем две формы, они будут состоять из двух переключателей и двух контейнеров, это форма Авторизации и форма Регистрации. Логика работы следующая, по нажатию на переключатель мы активируем один из контейнеров, который будет к нему привязан в то же время, второй блок мы автоматически скрываем, а начинаем все описывать с переключателей.

Описываем Переключатели

Переключатели сделаем при помощи label , в нутрии располагаем заголовок (Вкладка 1, Вкладка 2) и соответственно названия полей.

 
Авторизация Регистрация 
 

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

Описываем структуры для Авторизации

Открываем, тег form , присваиваем для него класс tab-form , что бы к ней было проще обращаться при оформлении.

В нутрии формы вкладываем input для ввода Email, прописываем название данного поля при помощи placeholder .

Дублированием текущий input , и модифицируем его под ввод пароля.

Ниже располагаем ссылку, которая будет кнопкой для отправки формы.

Ниже создаем блок с социальными иконками.

Блок с иконками оформим в виде списков, в нутрии каждого списка помещаем ссылку, а в ней уже размещаем иконку.

Иконки отбираю через статью Работа со шрифтовыми иконками. Вы так же можете перейти по ссылке, отобрать те иконки, которые вам нужны, и прописать соответствующий класс в теге (i) внутри ссылки.

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

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

Далее, ниже блока с иконками, размещаем ссылку на восстановление пароля.

 
  Войти Я забыл свой E-mail или пароль 
 

На этом, первый блок разметки мы заканчиваем и приступаем к разметки второго блока для Регистрации.

Описываем структуры для Регистрации

Так как второй блок особо не чем не отличается, я скопирую предыдущую форму и немного ее модифицирую.

Первое поле так и остается для ввода Email, хотя можно дописать в нем placeholder «Введите E-mail адрес», что бы чем-то оно отличалось.

Далее пойдет аналогичное поле для ввода имени только с другим атрибутом type и placeholder . Ниже ссылка, меняем в ней название на «Регистрация».

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

В нем располагаем input с type checkbox , а ниже его label с ссылкой на соглашение.

 
   Регистрация 
 Ознакомлен(-а) и принимаю условия регистрации 
 
 

Вот мы с вами описали первичную структуру текущих форм, и вероятней всего к ней еще вернемся, а сейчас переходим в файл стилей и приступим к их оформлению.

Оформляем блоки с формами в CSS

Добавим для body задний фон, для этого я подготовил изображение, копирую его в основную директорию и подключаю на странице в теге body.

Саму картинку можете скачать поданной ссылке (фоновое изображение).

Начинаем как всегда оформление с основного родителя. Это в нашем случае блок с классом dws-form . Задаем для него белый фон и что бы, содержимое формы не прилипало к стенкам контейнера, устанавливаем внутренние отступы по бокам в 10 пик.

Затем оформим общие элементы, такие как ссылки, списки и input . Зададим для ссылок плавную анимацию, их поведение при наведении и т.д.

Я специально описываю общие элементы через класс dws-form , что бы вы могли вставить данный код на свою страницу, и она не пересекалась бы с вашими стилями.

.dws-form < background: #ffffff; padding: 10px; width: 330px; >.dws-form a < text-decoration: none; transition: 0.5s; color: #298cad; >.dws-form a:hover < color: #36d2ff; >.dws-form ul < list-style: none; padding: 0; margin: 0; >.dws-form input

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

В данном случае это форма Регистрации, пока она нам не нужна и ее временно скроем.

Оформляем вкладки

Когда описали стили общей структуры, можно приступать к оформлению отдельно взятых элементов. Первые по ДОМ структуре идут вкладки, и рассмотрим логику, как они будут работать.

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

В принципе тут все довольно просто, это все можно показать при помощи визуального оформления.

Для этого сделаем фон формы прозрачным на 20%, и этот фон будет как бы внешней его частью, а самой форме зададим белый цвет, для этого классу dws-form добавляем соответствующий background, а белого цвета.

.dws-form

Затем, нам нужно показать, как будет выгладить активная и неактивная вкладка.

Наипростейший вариант, это для вкладок label задать отдельный класс tab , который по другому можно оформить.

Добавляем его и в CSS сразу опишем его стили.

Авторизация Регистрация 

Я для удобства что бы видеть границы элементов, с которыми работаю, добавляю для них временно outline обводку. По этому на это внимание не обращайте.

Текст задаем белым, немного сделаем пожирнее. Добавляем внутренние отступы в 15 пик., и что бы вкладки не наезжали на форму при помощи свойства display делаем их строчными элементами.

label.tab

Затем оформляем вкладку, которая является активной.

Наипростейший способ это добавить какой ни будь класс, и далее его оформить. Для этого добавляем одному label класс active и для него описываем стили.

Задаем задний фон как у формы белого цвета, а текст делаем, темно синим.

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

label.tab.active < background: #fff; color: #1b5f75; >label.tab

В конечном итоге визуально оформили вкладки, а в следующем уроке реализуем логику их переключения как на JS так и покажу как это сделать при помощи CSS.

Урок подготовил Горелов Денис.

Авторизация. Запомнить меня. Как это делается?

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

Почему так устроено?

Все дело в том, что понять, что с этого компьютера вошли именно вы – достаточно проблематично. Сервер может отследить ваш IP и по нему назначить вам сессию, но хранить он ее будет не долго, т.к. через час вашего отсутствия он будет думать, что вы уже ушли и хранить информацию больше ни к чему.
Так, когда вы возвращаетесь на форум на следующие сутки – он вас вдруг вспоминает. Это работает следующим образом – при авторизации – сервер дает команду сохранить логин и шифр пароля у вас на компьютере, в файлах, под названием Куки cookie. И каждый раз, когда вы входите на форум – компьютер автоматически отправляет эти данные и вас узнают.
Получается – это не безопасно? Конечно, хранение файлов с логином и паролем у себя в открытом виде – небезопасно. По этому обычно храниться не сам пароль, а хеш пароля. Но, тем не менее, потенциальная угроза остается. Кто-то может при помощи не хитрых приспособлений, поместив небольшой кусок Javascript на страницу с форумом – получить эти данные и также, в виде файлов – разместить их у себя. Либо злоумышленник может сделать нехитрый exe файлик, который при запуске будет считывать все ваши файлы cookie и передавать их куда-либо.
Таким образом – Безопасность страдает в угоду удобства.

Как же это делать технически?

Очень просто – при авторизации – вешаем пользователю 2 куки

setcookie('email',$login,time()+3600*24*14,'/'); setcookie('pass',sha1($password.'соль-куки'.$login),time()+3600*24*14,'/');

Время хранения указываем, какое хотим. В примере – 2 недели с момента авторизации
Помним, что в базе данных храниться хеш пароля. Но даже хеш нельзя давать человеку в куку, по этому создаем хеш хеша пароля :). В функцию обязательно пихаем соль и id учетной записи, чтобы сложнее было понять сам пароль и хешу.
Далее – когда пользователь заходит на сайт – проверяем, есть ли у него установленные Куки и сравниваем тот же хеш пароля. На выходе – либо авторизируем, либо уничтожаем Куки.
К примеру можно сделать так в загрузочном файле:

if (!$_SESSION[‘user’][‘id’] and !empty($_COOKIE['email']) and !empty($_COOKIE['pass']))login($_COOKIE['email'],$_COOKIE['pass'],true);

Последним – ставим признак сверки хеша хеша пароля ). Когда мы захотим авторизоваться обычным образом – мы просто передадим false.
Сама же функция авторизации может выглядеть простым способом

function login($login,$pass,$ishashing=false)< if (empty($login))return 'Не указан почтовый ящик email'; if (empty($pass))return 'Не указан пароль'; // смотрим бд $sql="SELECT * FROM users WHERE email=''"; $rs=execute($sql); if (empty($rs['email']))return 'Пользователь не найден'; $math=false; if ($ishashing)< if ($pass==sha1($rs['password'].'соль-куки'.$login))$math=true; >else < if (sha1($pass.'соль-при-регистрации')==$rs['password'])$math=true; >if (!$math) < if ($ishashing)< setcookie('email','',0,'/'); setcookie('pass','',0,'/'); return false; >return 'Пользователь с данным паролем не найден'; > $_SESSION['user']=$rs; setcookie('email',$login,time()+3600*24*14,'/'); setcookie('pass',sha1($rs['password'].'соль-куки'.$login),time()+3600*24*14,'/'); return true; >

Думаю вопросов много не будет. Сперва проверяем данные, смотрим данные из базы.
Сравнение зависит от типа хеша. При обычном сравнении – идет сравнение с солью, данной при регистрации, а при хешированном – хеш еще раз хешуется.
Переменная login не должна меняться для пользователя, иначе пароли тоже перестанут срабатывать.
Вполне простая процедура, не требующая хитрых приспособлений

• Автор: kosmom
• Рейтинг: 5
• Просмотров: 3373
• Комментариев: 0
• Создан: 26.11.2011 16:57

Twitter Bootstrap: Модальное окно авторизации/регистрации на сайте

Задача очень простая и востребованная. Ведь не будем же мы заставлять нашего пользователя ходить по ссылкам регистрации/авторизации, грузить отдельную страницу (даже две: одну для авторизации, вторую для регистрации).

Если можно при помощи отдельного всплывающего модального окна позволить посетителю сделать выбор: войти ему на сайт, используя свой логин и пароль, или зарегистрироваться, формы регистрации и авторизации при этом вставив во вкладки. Удобно – один щелчок по вкладке в модальном окне отделяет нас от нужной формы регистрации или авторизации, при этом само окно остается компактных размеров.

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

Авторизация/Регистрация

Итак, приведем верстку нашего модального окна со вкладками регистрации/авторизации:

Примечание автора: помните, необходимо задать doctype документа, как поддерживающего html5, для нормальной работы twitter bootstrap:

Далее подключаем twitter bootstrap (предположим, что twitter bootstrap framework находится у Вас в папке js,иначе измените папку на другую, где находится framework):

Приведем html самого всплывающего окна регистрации/авторизации со вкладками на twitter bootstrap.

Примечание автора: скомпилированный twitter bootstrap должен содержать оба плагина modal, tab, и все связанные с ними css стили.

Как видите, вполне полноценная форма. Добавим к ней немного css:

#myModal < display: none; >#myModal .tab-pane .row < margin: 3px 0; width: 100%; float: none; padding: 0; float: none; clear: both; display: block; >#myModal .tab-pane .row label

И все! Ни строчки javascript. Наше всплывающее окно, содержащее формы авторизации/регистрации работает. Можете опробовать пример, достаточно щелкнуть по кнопке из примера в начале статьи.

Итак, приведем минимально необходимую верстку для вызова modal:

 
 
× 
Заголовок окна – регистрация/авторизация
 
 
Основное содержимое…
 
 
Закрыть 
 
 

Это минимально необходимая верстка для вызова модального окна, которая осуществляется по следующим правилам: элементы div div div div являются обязательными. Где: div – содержит шапку окна, тут, например, можно расположить заголовок окна: Авторизация/Регистрация, div – содержит основное содержимое окна, div содержит подвал окна, например: здесь можно расположить кнопки для взаимодействия с посетителем: для закрытия окна, сброса формы, сохранения данных (например, для отправки формы по ajax) и т.п.

Также plugin modal нам предлагает уже отверстанную кнопку закрытия модального окна: Закрыть, для того, чтобы оформить элемент закрытия текущего окна, достаточно элементу button (или другому управляющему) назначить следующие html атрибуты: data-dismiss=»modal» aria-hidden=»true».

Классы стилей для изменения внешнего вида jQuery плагина modal (модального окна) из twitter bootstrap

Для стилизации окна Вы можете использовать следующие css классы:

• .modal – для стилизации обрамления модального окна в целом;
• .modal-header – для стилизации шапки модального окна;
• .modal-body – для стилизации основного содержимого модального окна;
• .modal-footer – для стилизации подвала модального окна;
• .modal-backdrop – настраиваем тень вокруг модального окна;

Примечание автора: если Вы планируете вызвать окно только по щелчку по ссылке/кнопке, то его желательно изначально скрыть в контексте страницы при помощи css: .modal

Вызов модального окна плагина jQuery modal из twitter bootstrap javascript через html атрибуты

Достаточно для элемента, щелчок по которому должен показать модальное окно, задать data-toggle=»modal», а также указать свойство data-target=»#id элемента, который содержит наше всплывающее окно», а для ссылки достаточно передать соответствующий анкор: a href=»#myModal » data-toggle=»modal». В нашем случае это:

 Авторизация/Регистрация 

Также, если Вы используете ссылку, можно передать в атрибуте href не анкор, а полноценную ссылку, содержимое которой будет загружено в модальное окно. Пример использования:

В данном примере содержимое страницы /conditions-to-use.html при щелчке по ссылке Условия использования будет загружено в область модального окна.

Примечание автора: будьте внимательны при подготовке документов для удаленной загрузки в модальные окна, предпочитайте этому размещение содержимого модального окна в его контейнере .modal-body, или же не размещайте javascript код в документах, загружаемых удаленно. Так как это может привести к серии javascript ошибок.

Инициализируем jQuery bootstrap плагин modal при помощи javascript

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

Первое, добавим в шапку после подключения jQuery и Twitter Bootstrap javascript:

В тело документа добавим следующую ссылку:

И изменим контейнер нашего окна:

Приведем его к виду:

Итак, после получения структуры документа (событие: documentReady) мы инициализируем наше модальное окно:

jQuery('#myModal').modal(< keyboard: false, backdrop: false, show: true >);

Примечание автора: обратите внимание, после последнего параметра show: true в опциях объекта плагина .modal мы не ставим запятую, иначе это приведет к ошибке javascript в Internet Explorer 7.0.

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

После закрытия модального окна мы всегда можем управлять его появлением/сокрытием при помощи щелчка по ссылке Авторизация/Регистрация.

Какие свойства принимает jQuery плагин modal из twitter bootstrap?

• keyboard: true, false – по-умолчанию: true, скрыть окно при нажатии кнопки Escape (true – скрыть, false – не реагировать на нажатие кнопки Escape);
• backdrop: true, false – по-умолчанию: true, отображать тень вокруг окна, а также сделать все элементы страницы за окном недоступными (настоящее модальное окно), false – скрыть тень вокруг окна и сделать элементы «за» окном доступными для взаимодействия с посетителем;
• show: true, false – по-умолчанию: false, показывать окно сразу после инициализации плагина modal? (false – не показывать, true – показывать)
• remote: [путь к удаленной странице] – по умолчанию: null, путь к странице, которую желательно загрузить на лету удаленно в контейнер .modal-body.

Для этого после получения структуры документа (событие: documentReady) мы добавляем обработчик щелчка по ссылке Авторизация/Регистрация (id: modalToggle):

jQuery('#modalToggle').on('click',function()< jQuery('#myModal').modal('toggle'); return false; >);

Для переключения состояния окна (показывать/скрыть модально окно) мы используем метод jQuery modal плагина toogle: jQuery(‘#myModal’).modal(‘toggle’).

Какие методы нам предлагает javascript плагин modal из framework twitter bootstrap?

• .modal(options) – инициализирует плагин, принимает набор свойств: keyboard, backdrop ,show, remoteописанных выше;
• .modal(‘toggle’) – меняет состояние модального окна: если окно скрыто – открывает, если окно открыто, соответственно скрывает: в нашем примере jQuery(‘#myModal’).modal(‘toggle’);

Комментарий автора: имеет смысл применять только при передаче в опции модального окна плагина modalbackdrop: false, иначе кнопка будет доступна для нажатия только тогда, когда окно закрыто;

• .modal(‘show’) – показать скрытое модальное окно;
• .modal(‘hide’) – скрыть открытое модальное окно;

Javascript события для плагина modal из framework twitter bootstrap

Приведем простой пример работы с событиями плагина modal, например, изменим текст кнопки вызова модального окна на Скрыть окно авторизации/регистрации, когда наше модальное окно отображается на странице, а когда скрыто – изменим на Показать окно авторизации/регистрации:

Комментарий автора: такой код имеет смысл, когда при инициализации плагина modal через javascript будут передан параметр: backdrop: false), который отключает «тень» вокруг окна и позволяет взаимодействовать посетителю с элементами на странице.

Перечислим основные события, которые поддерживает modal из набора javascript плагинов twitter bootstrap:

• show — событие происходит сразу после вызова метода show для текущего объекта плагина modal;
• shown – событие происходит сразу после открытия модального окна (применения всех визуальных эффектов), когда окно становится доступным для взаимодействия с посетителем;
• hide – событие происходит сразу после вызова метода hideдля текущего объекта плагина;
• hidden – событие происходит после полного закрытия модального окна, связанного с текущим объектом;

Итак, минимальная разметка осуществляется по следующим правилам:

Для ненумерованного списка ul задаем классы class=»nav nav-tabs» – это приведет к автоматическому подключению плагина tab к заголовкам для вкладок (табов). Далее в ненумерованном списке ul class=»nav nav-tabs» в элементе списка li мы можем указать класс li сделать выбранную вкладку активной.

Внутри элемента ненумерованного списка li должен сразу следовать тег ссылки a с html атрибутом a data-toggle=»tab» (активирует плагин tab из twitter bootstrap для указанного заголовка), html атрибут href у ссылки а должен быть анкором, который связан с содержимым вкладки, указывая на элемент в документе с id, равным анкору.

Причем ссылка должна сразу начинаться с анкора – знака #, не с www, или http://, не со знака косой черты, а именно с анкора #. А элемент, связанный с анкором по id, должен обязательно существовать в документе.

Также можно, как видно из примера, оставить атрибут href ссылки a в покое и не заполнять анкор, а задать связанный элемент через data-target=»#profile», где значение атрибута data-target и есть id связанного в содержимом элемента в контексте страницы с содержимым вкладки (можно передать класс элемента, но по связанному id работать будет быстрее).

Например для заголовка:

Среди дочерних элементов в регионе div существовать элемент div active» нем будет располагаться связанное с заголовком содержимое вкладки).

Далее желательно сразу после ненумерованного списка с заглавием расположить обязательный контейнер для содержимого вкладок:

В котором будут следовать все вкладки, связанные с анкорами заголовков: В нашем случае это вкладки Авторизация и Регистрация:

 
 
[содержимое]
 
[содержимое]
 
 

Для выделения содержимого активной вкладки вместе с классом .tab-pane используется класс .active.

Классы стилей для изменения внешнего вида вкладок jQuery плагина tab из twitter bootstrap

• .nav, .nav-tabs – управляют внешним видом заголовков ненумерованного стиля, границами общей области заголовков;
• .nav li, .nav-tabs li a – управление внешним видом каждого из заголовков;
• .nav li.active, .nav li.active a – управление внешним видом активного заголовка вклакди;
• .tab-content – управление внешним видом области содержимого вкладок (всей области);
• .tab-pane – управление внешним видом содержимого вкладки;
• .tab-pane.active – управление внешним видом содержимого активной вкладки;

Javascript методы jQuery плагина tab из twitter bootstrap

• .tab(‘show’) – метод предназначен для активации указанной вкладки и ее содержимого (можно по id, или другим удобным способом). Чтобы в нашем примере активировать первую вкладку, необходимо добавить следующий код:

 jQuery(document).ready(function()

В виде аргумента jQuery передаем необходимый заголовок вкладки (ссылку а) для активации. Примечание автора: для увеличения быстродействия достаточно назначить каждой ссылке – заголовку для вкладки (таба) свой id, и вызывать активацию вкладки по умолчанию (например, после загрузки документа) по id ссылки a.

Javascript события плагина tab из twitter bootstrap

• show – событие происходит при выборе новой вкладки (по щелчку по ссылке новой вкладки), но еще до того, как будет отображено содержимое этой вкладки. Кстати, внутри события можно использовать следующие переменные объекта event, как указатели на текущий заголовок вкладки (ссылку, по которой щелкнул посетитель) – event.target, а также переменную event.relatedTarget – как указатель на ссылку – заголовок предыдущей вкладки (если предыдущая вкладка имеется в документе). При этом сам объект event требуется передать в функцию – обработчик события явно, например:

• shown – событие происходит при показе текущей вкладки, когда содержимое вкладки уже доступно для взаимодействия с посетителем (вкладка показана полностью). Здесь также доступны: event.target, event.relatedTarget.

Вот, пожалуй, и все, что необходимо знать нам о работе этих плагинов. В этом цикле статей мы ознакомились на конкретном примере верстки формы авторизации/регистрации для сайта с работой jQuery плагинов modal,tab из framework twitter bootstrap, а также познакомились с их методами внедрения и api.

В следующем цикле статей мы рассмотрим jQuery плагин popover из twitter bootstrap в реализации примеров для оповещения пользователя при неверном заполнении формы, а также в реализации примера со всплывающими областями для регистрации, авторизации, компактными по размеру и без необходимости вызова и применения модальных окон.

Поделитесь со своими друзьями
Самые читаемые
Полезные статьи | 21 декабря

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

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

Полезные статьи | 10 апреля

Огляд онлайн-академії IT-професій Mate Academy: відкриваємо двері в світ програмування для початківців

В цій статті ми розглянемо Mate Academy — сучасну онлайн-академію IT-професій, яка допомагає зробити перші кроки в світі програмування для.

Комментарии
awesome-design.com © 2023 Все права сохраняются

Этот сайт использует cookie для хранения данных. Продолжая использовать сайт, Вы даете свое согласие на работу с этими файлами. OK

Простая аутентификация на PHP

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

Disclaimer: статья рассчитана на совершенных новичков. Умудрённые опытом разработчики ничего нового здесь не найдут, но могут указать на возможные недочёты =).

Для написания системы аутентификации будем использовать базу данных MySQL/MariaDB, PHP, PDO, функции для работы с паролями, для построения интерфейса возьмём bootstrap.

Для начала создадим базу. Пусть она называется php-auth-demo. В новой базе создадим таблицу пользователей users :

CREATE TABLE `users` ( `id` int unsigned NOT NULL AUTO_INCREMENT, `username` varchar(255) COLLATE utf8mb4_general_ci NOT NULL, `password` varchar(255) COLLATE utf8mb4_general_ci NOT NULL, PRIMARY KEY (`id`), UNIQUE KEY `username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

Создадим конфиг с данными для подключения к базе.

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

 'php-auth-demo', 'db_host' => '127.0.0.1', 'db_user' => 'mysql', 'db_pass' => 'mysql', ];

И сделаем «загрузочный» файл, который будем подключать вначале всех остальных файлов.

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

В «загрузочном» файле мы будем инициализировать сессию и объявим некоторые функции-помощники.

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); > return $pdo; >

Функция pdo() даст нам доступ к объекту PDO в любом месте нашего кода.

Далее нам нужна форма регистрации. Разместим её прямо в файле index.php .

 
 Username Password Register 

Здесь всё просто: два поля, кнопка и форма, отправляющая запрос на файл do_register.php методом POST. Процесс регистрации пользователя опишем в файле do_register.php .

prepare("SELECT * FROM `users` WHERE `username` = :username"); $stmt->execute(['username' => $_POST['username']]); if ($stmt->rowCount() > 0) < flash('Это имя пользователя уже занято.'); header('Location: /'); // Возврат на форму регистрации die; // Остановка выполнения скрипта >// Добавим пользователя в базу $stmt = pdo()->prepare("INSERT INTO `users` (`username`, `password`) VALUES (:username, :password)"); $stmt->execute([ 'username' => $_POST['username'], 'password' => password_hash($_POST['password'], PASSWORD_DEFAULT), ]); header('Location: login.php');

В самом начале подключим наш «загрузчик».

Потом проверим, не занято ли имя пользователя. Для этого сделаем выборку из таблицы указав в условии полученное из формы имя пользователя. Обратите внимание, для запросов здесь и далее мы будем использовать подготовленные запросы, что обезопасит нас от SQL-инъекций. Для этого в тексте SQL-запроса мы указываем специальные плейсхолдеры, а при выполнении ассоциируем с ними ненадёжные данные (ненадёжными данными следует считать всё, что приходит из вне – $_GET, $_POST, $_REQUEST, $_COOKIE). После выполнения запроса мы просто проверим количество возвращённых строк. Если их больше нуля, то имя пользователя уже занято. В этом случае мы выведем сообщение и вернём пользователя на форму регистрации.

Я написал «больше нуля», но по факту, из-за того, что поле username в таблице уникальное, rowCount() может нам вернуть лишь два возможных значения: 0 и 1 .

В приведённом выше коде мы использовали функцию flash() . Данная функция предназначена для «одноразовых» сообщений. Если вызвать её со строковым параметром, то она сохранит эту строку в сессии, а если вызвать без параметров, то выведет из сессии сохранённое сообщение и затем удалит его в сессии. Добавим эту функцию в файл boot.php .

function flash(?string $message = null) < if ($message) < $_SESSION['flash'] = $message; >else < if (!empty($_SESSION['flash'])) < ?>  unset($_SESSION['flash']); > >

А также вызовем её нa форме регистрации, для вывода возможных сообщений.

Registration

На данном этапе простейший функционал регистрации нового пользователя готов.

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

Login
  
 
Username 
Password 
Login Register 
 

В виду простоты примера, она практически повторяет форму регистрации. Интереснее будет посмотреть на сам процесс логина в файле do_login.php .

prepare("SELECT * FROM `users` WHERE `username` = :username"); $stmt->execute(['username' => $_POST['username']]); if (!$stmt->rowCount()) < flash('Пользователь с такими данными не зарегистрирован'); header('Location: login.php'); die; >$user = $stmt->fetch(PDO::FETCH_ASSOC); // проверяем пароль if (password_verify($_POST['password'], $user['password'])) < // Проверяем, не нужно ли использовать более новый алгоритм // или другую алгоритмическую стоимость // Например, если вы поменяете опции хеширования if (password_needs_rehash($user['password'], PASSWORD_DEFAULT)) < $newHash = password_hash($_POST['password'], PASSWORD_DEFAULT); $stmt = pdo()->prepare('UPDATE `users` SET `password` = :password WHERE `username` = :username'); $stmt->execute([ 'username' => $_POST['username'], 'password' => $newHash, ]); > $_SESSION['user_id'] = $user['id']; header('Location: /'); die; > flash('Пароль неверен'); header('Location: login.php');

Здесь есть важный момент. Мы не запрашиваем пользователя из таблицы по паре username/password, а используем только username. Дело в том, что даже если вы захешируете пришедший из формы логина пароль и попробуете сравнить новый хеш с сохранённым в базе, вы ничего не получите. Password_hash() использует автоматически генерируемую соль для паролей и хеши будут всегда получаться разные. Вот результат функции password_hash , вызванной несколько раз для пароля «123»:

$2y$10$loqucup11.3DL1fgDWanoettFpFJuFFd0fY6BZyiP698ZqvA4tmuy $2y$10$.LF3OzmQRtJvuZZWeWF.2u80x3ls6OEAU5J9gLHDtcYrFzJkRRPvq $2y$10$iGj/nOCavShd2vbMZTC4GOMYCqDj2YSc8qWoeqjVbD1xaKU2CgAfi

Именно поэтому необходимо использовать функцию password_verify для проверки пароля. Кроме того, данная функция использует специальный алгоритм проверки и является безопасной для атак по времени.

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

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

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

function check_auth(): bool

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

prepare("SELECT * FROM `users` WHERE `id` = :id"); $stmt->execute(['id' => $_SESSION['user_id']]); $user = $stmt->fetch(PDO::FETCH_ASSOC); > ?> 
Welcome back, !
 
Logout 
 else < ?>
Registration
  
 ?>

А также закрыть доступ к форме логина, если пользователь уже вошёл:

Осталось добавить возможность «выйти». Форму для выхода вы можете видеть в коде выше. Сама процедура выхода простейшая, и заключается в очистке сессии.

Заключение

• Используем PDO/MySQLi и подготовленные запросы для работы с базой данных.
• В базе данных обязательно храним только хеш пароля.
• Для хеширования пароля используем специальную функцию password_hash.
• Для проверки пароля не делаем сравнение хешей, а используем специальную функцию password_verify.

Полный код примера доступен на гитхабе: ссылка на Github.