Проверка авторизации php. Форма входа и регистрации с помощью HTML5 и CSS3

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

Каркас формы в HTML

Первым создаем каркас формы. Открываем заготовку html и пропишем следующий код между тегами.

Создаем блок, который будет являться контейнер для формы. Присвоим ему класс .container , в нем размещаем форму с input Первый input для ввода логина type="text" name="username" placeholder="Введите логин" , второй input type="password" name="password" placeholder="Введите пароль" принимает пароль и за ним кнопка submit . Ниже размещаем надпись для восстановления пароля, сделаем ее простой ссылкой.

Описываем в CSS элементы формы

Затем оформим данные элементы формы. Создадим дополнительную директорию CSS в которой будем размещать файлы стилей. В ней создаем файл style.css и подключаем его к нашей страничке.

Я предлагаю на задний фон поставить изображение, для этого создадим дополнительную директорию img , и поместим в нее свое изображение. Подключаем картинку в style.css для body . Прописываем путь до картинки, выходим с текущей директории, заходим в папочку img , и далее название картинки.

Body{ background-image: url("../img/bg.png"); }

A{ color: #fff; } a:hover{ text-decoration: none; }

Предадим стили контейнеру с формой .container . Зададим ширину в 450 пик., и временно установим высоту в 500 пик. Зададим цвет #182134 , и отцентрируем ее посередине экрана margin: 250px auto 0 auto; . Текст в нутрии блока размещаем по центру, сверху сделаем отступ в 20 пик.

Container{ width:450px; height: 500px; background-color: #182134; margin: 250px auto 0 auto; text-align: center; }

Оформим затем input для ввода логина и пароля. Что бы не затронуть кнопку, отберем их по атрибутам text и password , указываем ширину в 300 пик. , высоту в 50 пик. Текст увеличиваем на 18 пик., сделаем отступы между ними в 25 пик., закруглим углы border-radius: 4px; , текст сдвинем на 10 пик. влево.

Input,input{ width: 300px; height:50px; font-size: 18px; margin-bottom: 25px; border-radius: 4px; padding-left: 10px; }

Затем отцентруем inpyt , для этого обернем их в дополнительный блок и присвоим класс .dws-input . Сделаем перенос строки после кнопки, и вверху перед кнопкой вставим картинку с нашим логотипом. Для этого скопируем ее в папку img , и пропишем к ней путь img src="img/men.png" .

Далее опишем ее стили. Картинке присвоим ширину и высоту по 120 пик. , затем подымем ее чуть выше формы margin: -60px 0 30px 0; , делаем об водку в 5 пик. border: 5px solid #1a394f; , закругляем углы в 50%.

Container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; }

Теперь опишем стили кнопки. Присвоим ей класс .dws-submit , и назначаем ей стили. Назначаем отступы, увеличим текст на 15 пик., делаем его белым, а фон кнопки синим, убираем об водку и сделаем в низу плашку, а также курсор Pointer .

Dws-submit { padding: 13px 30px; margin: 5px 0 20px 0; font-size: 15px; color: #fff; background-color: #2ca8c6; border: none; border-bottom: 4px solid #6ee9fd; cursor: pointer; }

Чтобы отцентровать инпуты и кнопку, поместим их отдельно каждый в свой блок. Опишем стили кнопке при наведении. Делаем плавный переход, цвет кнопки меняем на белый, а в тоже время шрифт будет меняться на темный.

Dws-submit:hover{ transition: all 0.5s; background: #fff; color: #2c536c; }

Сделаем, сверху нашей формы синею плашку, box-shadow: 0 -5px 0 #3adbfd; , и добавим ее к картинке box-shadow: 0 -5px 0 #3adbfd; . Сделаем фон формы немного прозрачнее, для этого пропишем этот цвет в формате RGBA .

Я пользуюсь сервисом w3schools.com , спускаемся вниз до Color Picker , в форму введем наш цвет и преобразуем его в RGB . Копируем, вставляем в стиль контейнера.

Container{ width:450px; height: 500px; background-color: rgba(24, 33, 52, 0.7); margin: 250px auto 0 auto; text-align: center; box-shadow: 0 -5px 0 #3adbfd; } .container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; box-shadow: 0 -5px 0 #3adbfd; }

Для эффекта, закруглим нижние углы, для этого пропишем border-radius: 0 0 10px 10px; .

Добавление шрифтовых иконок

Добавим иконки в виде шрифтов, переходим на сервис fontawesome.io и скачиваем их к себе на компьютер. Распакуем архив, копируем папку fonts, в которой находятся шрифты, и копируем файл стилей в директории css. Затем подключаем стили к страничке.

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

Подключаем шрифты font-family: "FontAwesome"; ,затем саму иконку, позиционируем ее абсолютно поля, увеличим ее на 30 пик, отцентруем и изменим цвет.

Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; }

Немного подвинем текст в input - padding-left: 40px; .

Отберем вторую иконку с названием lock , копируем ее код f023 , и описываем ее стили.

Для этого отбираем второй элемент .dws-input:nth-child(2)::before{} , и прописываем картинку content: "\f023 ";.

Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; } .dws-input:nth-child(2)::before{ content: "\f023"; }

Dws-input:hover::before{ color: #319ebc; transition: all 0.3s; }

А также, стили наведение для инпутов.

Dws-input input:hover{ box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35); }

Для удобства обернем их в блок с классом .social и опишем их стили. Изменим их цвет на белый, увеличим на 20 пик., сделаем шириной в 20 пик., и дадим отступы.

Dws-social i{ color: #fff; font-size: 20px; width: 20px; padding: 10px; }

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

Social i:hover{ background-color: #fff; color: #1a394f; border-radius: 5px; cursor: pointer; }

Уберем высоту блока формы, которую задавали в самом начале, а в место ее добавим нижний отступ padding-bottom: 20px; .

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

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

Продолжаю делиться версткой элементов интерфейса для сайтов. Как и в своей , я взял интересный пример с сайта PremiumPixels.com и сверстал его, используя CSS3. На этот раз это форма авторизации .

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

Я для себя уже нашел применение этой формы. Если и вам она тоже понравилась, то вы также можете использовать ее на своих сайтах. Далее в статье, пройдя по соответствующим ссылкам, вы найдете необходимый исходный код.

Примеры

Для удобства вы можете посмотреть живой пример сверстанной формы на сайте jsFiddle , либо скачать код архивом по следующей ссылки:

Особенности

• В верстке данной формы используется всего одно изображение — для фона страницы. Хотя и оно не обязательно. Возможности CSS3 позволили обойтись без изображения при создании кнопки.
• Максимально приближенно к исходному дизайну форма выглядит в правильных браузерах: Opera, Firefox, Chrome, Safari (исключение составляет лишь больший радиус закругления у внешней обводки полей ввода). Есть некоторые недочеты в IE9 (некорректные закругления углов полей ввода, отсутствие градиента у кнопки). Ну а если смотреть в более ранних версиях IE, то, как обычно, всей красоты мы лишаемся. Конечно, при желании в IE кнопку можно сделать изображением.
• Широкая обводка, которая присутствует у полей ввода помимо бордюра, реализована с помощью свойства box-shadow . В связи с особенностью этого свойства, радиус закругления получился больше, чем на исходном дизайне, но, я думаю, это не портит картину.

Пользуйтесь на здоровье.

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

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

Для начала давайте оговорим все шаги, которые сделаем далее. Что нам вообще нужно? Нам нужен сценарий, который будет регистрировать пользователя, авторизовать пользователя, переадресовывать пользователя куда-либо после авторизации. Также нам нужно будет создать страницу, которая будет защищена от доступа неавторизованных пользователей. Для регистрации и авторизации нам необходимо будет создать HTML -формы. Информацию о зарегистрированных пользователях мы будем хранить в базе данных. Это значит, что нам еще нужен скрипт подключения к СУБД . Всю работу у нас будут выполнять функции, которые мы сами напишем. Эти функции мы сохраним в отдельный файл.

Итак, нам нужны следующие файлы:

• соединение с СУБД;
• пользовательские функции;
• авторизация;
• регистрация;
• защищенная страница;
• сценарий завершения работы пользователя;
• сценарий, проверяющий статус авторизации пользователя;
• таблица стилей для простейшего оформления наших страниц.

Всё это будет бессмысленно, если у вас нет соответствующей таблицы в базе данных. Запустите инструмент управления своим СУБД (PhpMyAdmin или командную строку, как удобнее) и выполните в нем следующий запрос:

CREATE TABLE `users` (`id` int(11) NOT NULL AUTO_INCREMENT, `login` char(16) NOT NULL, `password` char(40) NOT NULL, `reg_date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

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

• database.php;
• functions.php;
• login.php;
• registration.php;
• index.php;
• logout.php;
• checkAuth.php;
• style.css.

Назначение каждого из них, я уверен, вам понятно. Начнем со скрипта соединения с СУБД. Вы его уже видели . Просто сохраните код этого скрипта в файле с именем database.php . Пользовательские функции мы будем объявлять в файле functions.php . Как это всё будет работать? Неавторизованный пользователь пытается получить доступ к защищенному документу index.php , система проверяет авторизован ли пользователь, если пользователь не авторизован, он переадресовывается на страницу авторизации. На странице авторизации пользователь должен видеть форму авторизации. Давайте сделаем её.

Ваш логин:

Ваш пароль:

зарегистрируйтесь.

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

/* файл style.css */ .row { margin-bottom:10px; width:220px; } .row label { display:block; font-weight:bold; } .row input.text { font-size:1.2em; padding:2px 5px; } .to_reg { font-size:0.9em; } .instruction { font-size:0.8em; color:#aaaaaa; margin-left:2px; cursor:default; } .error { color:red; margin-left:3px; }

Если всё сделано верно, у вас в броузере должно быть следующее:

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

Укажите ваш логин: " />

Напишите ваш пароль:

Повторите введенный пароль:

Вы, наверное, обратили внимание на то, что в HTML -коде присутствуют переменные PHP . Они являются содержимым атрибутов текстовых полей форм, содержимом контейнеров, предназначенных для вывода ошибок. Но мы не инициализировали эти переменные. Давайте сделаем это.

Укажите ваш логин: " />

В имени пользователя могут быть только символы латинского алфавита, цифры, символы "_", "-", ".". Длина имени пользователя должна быть не короче 4 символов и не длиннее 16 символов

Напишите ваш пароль:

В пароле вы можете использовать только символы латинского алфавита, цифры, символы "_", "!", "(", ")". Пароль должен быть не короче 6 символов и не длиннее 16 символов

Повторите введенный пароль:

Повторите введенный ранее пароль

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

Нам нужно, чтобы поля логина и пароля не были пустыми. Затем необходимо проверить логин на соответствие требованиям. Пароль также должен соответствовать описанным требованиям, а повторно указанный пароль должен с ним совпадать и, кроме того, они должны быть идентичны. Если какое-то из этих условий не выполняется, обработка данных формы должна быть прекращена, в массив сообщений об ошибке должно быть записано соответствующее оповещение, и оно должно быть отображено пользвателю. Для удобства пользователя мы сохраним введенный им логин (если он его указал), записав его значение в массив $fields .

Если всё нормально, в окне вашего броузера, обратившись к документу registration.php, вы должны увидеть примерно такую форму:

Теперь, допустим, пользователь нажал на кнопку регистрации, не заполнил поля формы. Согласно нашему алгоритму, логин и пароль не могут быть пустыми. Если это условие не выполняется, регистрация невозможно. Мы помним о том, что обработка данных формы происходит в текущем сценарии. Значит нам нужно изменить его код, добавив соответствующие проверки. Сразу же оговорим и следующие проверки. Если введены и логин, и пароль, нужно проверить их соответствие указанным требованиям. Для проверки логина и пароля мы создадим пользовательские функции в файле functions.php.

/** * functions.php * Файл с пользовательскими функциями */ // Подключаем файл с параметрами подключения к СУБД require_once("database.php"); // Проверка имени пользователя function checkLogin($str) { // Инициализируем переменную с возможным сообщением об ошибке $error = ""; // Если отсутствует строка с логином, возвращаем сообщение об ошибке if(!$str) { $error = "Вы не ввели имя пользователя"; return $error; } /** * Проверяем имя пользователя с помощью регулярных выражений * Логин должен быть не короче 4, не длиннее 16 символов * В нем должны быть символы латинского алфавита, цифры, * в нем могут быть символы "_", "-", "." */ $pattern = "/^[-_.a-z\d]{4,16}$/i"; $result = preg_match($pattern, $str); // Если проверка не прошла, возвращаем сообщение об ошибке if(!$result) { $error = "Недопустимые символы в имени пользователя или имя пользователя слишком короткое (длинное)"; return $error; } // Если же всё нормально, вернем значение true return true; } // Проверка пароля пользователя function checkPassword($str) { // Инициализируем переменную с возможным сообщением об ошибке $error = ""; // Если отсутствует строка с логином, возвращаем сообщение об ошибке if(!$str) { $error = "Вы не ввели пароль"; return $error; } /** * Проверяем пароль пользователя с помощью регулярных выражений * Пароль должен быть не короче 6, не длиннее 16 символов * В нем должны быть символы латинского алфавита, цифры, * в нем могут быть символы "_", "!", "(", ")" */ $pattern = "/^[_!)(.a-z\d]{6,16}$/i"; $result = preg_match($pattern, $str); // Если проверка не прошла, возвращаем сообщение об ошибке if(!$result) { $error = "Недопустимые символы в пароле пользователя или пароль слишком короткий (длинный)"; return $error; } // Если же всё нормально, вернем значение true return true; }

Теперь нам нужно изменить файл registration.php, чтобы задействовать объявленные нами функции. В сценарий мы добавим условие, проверяющее нажатие кнопки регистрации. Внутри этого условия запускается проверка логина и паролей. В случае, если какая-то из проверок завершается неудачей, мы вновь отображаем форму, и выводим сообщение об ошибке. Если ошибок нет, мы регистрируем пользователя, форму регистрации при этом уже не отображаем, сообщаем пользователю об успешной регистрации, и с помощью функции header() переадресовываем его к форме авторизации.

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

"; header("Refresh: 5; URL = login.php"); } // Иначе сообщаем пользователю об ошибке else { $errors["full_error"] = $reg; } } } ?>

Укажите ваш логин: " />

В имени пользователя могут быть только символы латинского алфавита, цифры, символы "_", "-", ".". Длина имени пользователя должна быть не короче 4 символов и не длиннее 16 символов

Напишите ваш пароль:

В пароле вы можете использовать только символы латинского алфавита, цифры, символы "_", "!", "(", ")". Пароль должен быть не короче 6 символов и не длиннее 16 символов

Повторите введенный пароль:

Повторите введенный ранее пароль

В скрипте вы должны были заметить еще одну новую функцию — registration() . А мы её еще не объявляли. Давайте сделаем это.

// Функция регистрации пользователя function registration($login, $password) { // Инициализируем переменную с возможным сообщением об ошибке $error = ""; // Если отсутствует строка с логином, возвращаем сообщение об ошибке if(!$login) { $error = "Не указан логин"; return $error; } elseif(!$password) { $error = "Не указан пароль"; return $error; } // Проверяем не зарегистрирован ли уже пользователь // Подключаемся к СУБД connect(); // Пишем строку запроса $sql = "SELECT `id` FROM `users` WHERE `login`="" . $login . """; // Делаем запрос к базе $query = mysql_query($sql) or die(""); // Смотрим на количество пользователей с таким логином, если есть хоть один, // возвращаем сообщение об ошибке if(mysql_num_rows($query) > 0) { $error = "Пользователь с указанным логином уже зарегистрирован"; return $error; } // Если такого пользователя нет, регистрируем его // Пишем строку запроса $sql = "INSERT INTO `users` (`id`,`login`,`password`) VALUES (NULL, "" . $login . "","" . $password . "")"; // Делаем запрос к базе $query = mysql_query($sql) or die("

Невозможно добавить пользователя: " . mysql_error() . ". Ошибка произошла в строке " . __LINE__ . "

"); // Не забываем отключиться от СУБД mysql_close(); // Возвращаем значение true, сообщающее об успешной регистрации пользователя return true; }

Если всё нормально, ваш пользователь будет зарегистрирован. Можете потестировать форму. Попробуйте зарегистрировать пользователей с одинаковыми логинами. После успешной регистрации пользователь будет перееадресован к форме авторизации. Ранее мы просто создали разметку для отображения этой формы. Так как в её атрибуте action не указан никакой параметр, данные, отправленные формой, будут обрабатываться в этом же сценарии. Значит нам нужно написать код для обработки, и добавить его в документ login.php.

Ваш логин:

Ваш пароль:

Если вы не зарегистрированы в системе, зарегистрируйтесь.

Вы, наверное, заметили, что в скрипте авторизации у нас появилась ещё одна незнакомая функция — authorization() . Эта функция должна авторизовать пользователя, предварительно проверив, существует ли в базе данных зарегистрированный пользователь с таким логином и паролем. Если такой пользователь не будет найден, авторизация будет прервана, на экран будет выведено сообщение о неудаче. При успешной проверки функция authorization() запустит сессию, и запишет в неё значения логина и пароля пользователя, сообщит сценарию об успешности авторизации, и сценарий перенаправит пользователя на защищенную страницу ресурса.

/** * Функция авторизации пользователя. * Авторизация пользователей у нас будет осуществляться * с помощью сессий PHP. */ function authorization($login, $password) { // Инициализируем переменную с возможным сообщением об ошибке $error = ""; // Если отсутствует строка с логином, возвращаем сообщение об ошибке if(!$login) { $error = "Не указан логин"; return $error; } elseif(!$password) { $error = "Не указан пароль"; return $error; } // Проверяем не зарегистрирован ли уже пользователь // Подключаемся к СУБД connect(); // Нам нужно проверить, есть ли такой пользователь среди зарегистрированных // Составляем строку запроса $sql = "SELECT `id` FROM `users` WHERE `login`="".$login."" AND `password`="".$password."""; // Выполняем запрос $query = mysql_query($sql) or die("

Невозможно выполнить запрос: " . mysql_error() . ". Ошибка произошла в строке " . __LINE__ . "

"); // Если пользователя с такими данными нет, возвращаем сообщение об ошибке if(mysql_num_rows($query) == 0) { $error = "Пользователь с указанными данными не зарегистрирован"; return $error; } // Если пользователь существует, запускаем сессию session_start(); // И записываем в неё логин и пароль пользователя // Для этого мы используем суперглобальный массив $_SESSION $_SESSION["login"] = $login; $_SESSION["password"] = $password; // Не забываем закрывать соединение с базой данных mysql_close(); // Возвращаем true для сообщения об успешной авторизации пользователя return true; }

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

Function checkAuth($login, $password) { // Если нет логина или пароля, возвращаем false if(!$login || !$password) return false; // Проверяем зарегистрирован ли такой пользователь // Подключаемся к СУБД connect(); // Составляем строку запроса $sql = "SELECT `id` FROM `users` WHERE `login`="".$login."" AND `password`="".$password."""; // Выполняем запрос $query = mysql_query($sql) or die("

Невозможно выполнить запрос: " . mysql_error() . ". Ошибка произошла в строке " . __LINE__ . "

"); // Если пользователя с такими данными нет, возвращаем false; if(mysql_num_rows($query) == 0) { return false; } // Не забываем закрывать соединение с базой данных mysql_close(); // Иначе возвращаем true return true; }

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

/** * Скрипт проверки авторизации пользователей */ // Запускаем сессию, из которой будем извлекать логин и пароль // авторизовавшихся пользователей session_start(); // Подлючаем файл с пользовательскими функциями require_once("functions.php"); /** * Чтобы определить авторизован ли пользователь, нам нужно * проверить существуют ли в базе данных записи для его логина * и пароля. Для этого воспользуемся пользовательской функцией * проверки корректности данных авторизовавшегося пользователя. * Если эта функция вернет false, значит авторизации нет. * При отсутствии авторизации мы просто переадресовываем * пользователя к странице авторизации. */ // Если в сессии присуствуют данные и о логине, и о пароле, // проверяем их if(isset($_SESSION["login"]) && $_SESSION["login"] && isset($_SESSION["password"]) && $_SESSION["password"]) { // Если проверка существующих данных завершается неудачей if(!checkAuth($_SESSION["login"], $_SESSION["password"])) { // Переадресовываем пользователя на страницу авторизации header("location: login.php"); // Прекращаем выполнение скрипта exit; } } // Если данных либо о логине, либо о пароле пользователя нет, // считаем что авторизации нет, переадресовываем пользователя // на страницу авторизации else { header("location: login.php"); // Прекращаем выполнение сценария exit; }

А теперь давайте создадим код нашей защищенной страницы. Он будет довольно-таки прост.

Успешная авторизация.

Вы получили доступ к защищенной странице. Вы можете выйти из системы.

Как видите, в защищенном документе мы подключаем только один файл — checkAuth.php. Все остальные файлы подключаются уже в других сценариях. Поэтому наш код не выглядит громоздким. Регистрацию и авторизацию пользователей мы организовали. Теперь необходимо позволить пользователям выходить из системы. Для этого мы создадим сценарий в файле logout.php.

/** * Скрипт выхода пользователя из системы. Так как пользователи * авторизуются через сессии, их логин и пароль хранятся * в суперглобаном массиве $_SESSION. Чтобы осуществить * выход из системы, достаточно просто уничтожить значения * массива $_SESSION["login"] и $_SESSION["password"], после * чего мы переадресовываем пользователя к странице авторизации */ // Обязательно запускаем сессию session_start(); unset($_SESSION["login"]); unset($_SESSION["password"]); header("location: login.php");

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

P.S. Я в курсе, что лучше писать объектно-ориентированный код, знаю, что передавать и хранить пароль в открытом виде не стоит, что информацию, заносимую в базу данных, необходимо предварительно проверять. Знаю. Об этом я здесь не буду говорить.

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

По этой причине мы уже не раз обсуждали вопрос о формах регистрации/авторизации, причем как в , так и .

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

1. Лучший способ авторизации – это ее отсутствие.

Да, наш первый тезис является банальной и основной истиной UX – чем меньше действий требуется от пользователя, тем лучше. Зачастую, пользуясь некоторыми сайтами, у меня возникает вопрос: «Почему я должен регистрироваться здесь ради того, чтобы разово воспользоваться определенной услугой?». И хотя подобных сайтов, обязывающих вас регистрироваться при отсутствии на то весомых причин, становится меньше, на многих eCommerce сайтах до сих пор можно встретить регистрацию, единственная задача которой заключается в том, чтобы осложнить пользователю жизнь. Это, в первую очередь, относится к разнообразным онлайн-магазинам, требующим от вас регистрации даже для разового приобретения какой-то сущей мелочи.

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

Существует большое количество крайне популярных сервисов, охватывающих миллионы пользователей по всему миру. Есть очень большая вероятность, что у вашего среднестатистического пользователя есть аккаунт по меньшей мере в одном из всех представленных сервисов. А представить вы можете действительно много: начиная от традиционного Facebook и заканчивая Yahoo , Amazon и GitHub .

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

2. Электронная почта должна быть альтернативой любому другому идентификатору пользователя.

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

Возможность ввести свою почту в поле user – самое красноречивое проявление заботы о пользователе на этапе авторизации.

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

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

Достаточно логичным будет расположение форм ввода регистрации и авторизации рядом друг с другом. И хотя они обладают разными функциями и алгоритмом действий, между ними все-таки есть определенная концептуальная схожесть. Компактно расположив формы регистрации и авторизации рядом, а также обеспечив легкий переход между ними (в один клик) вы ощутимо улучшите юзабилити сайта. Кроме того, хорошим способом реализации будет размещение двух кнопок «Регистрация» и «Вход» рядом друг с другом, при клике по которым основная форма будет отображаться либо в форме всплывающего окна, либо выдвигающейся панели.

Максимально компактное и близкое расположение форм регистрации и входа на сайте журнала The Verge .

4. Простой и лаконичный язык.

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

Так или иначе, существует несколько разных подходов к выбору надписей на кнопках. Определенно, в большинстве случаев наиболее оправданным является использование лаконичных и однозначных надписей, таких как «Вход», «Войти», «Создать», «Присоединиться» и «Зарегистрироваться». Однако если вы стремитесь создать определенный эффект, то вполне допустимо уходить от лаконичных формулировок к более красочным, таким как «Стать участником», «Войти в мир» и так далее.

Стоит заметить, что при наличии времени и ресурсов проведение A\B тестирования всегда будет полезным.

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

« Sign In » все чаще используется вместо любых других формулировок.

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

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

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

6. Предупреждение и автоматическое исправление ошибок ввода.

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

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

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

7. Стоит ли принуждать пользователей к выбору “подходящего” пароля?

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

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

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

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

Классическое сопровождение ввода цветовой индикацией на примере Яндекс.Почты.

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

« That password is too common » – оповещение на Discourse , сообщающее о том, что выбранный пользователем пароль слишком простой и распространенный.

Тем не менее, обратная сторона все подобных действий, направленных на «воспитание» пользователя – практически гарантированное раздражение от опытных пользователей, трезво оценивающих ситуацию и принимающих самостоятельно решение о том, стоит ли в данном случае обойтись простым, символическим паролем, или же необходимо использовать более сложный. По этой причине, вам необходимо взвешенно и последовательно выстраивать политику оценки пользовательских паролей – крайности в этом вопросе могут обернуться как массовым взломом аккаунтов ваших пользователей (и, как следствие, невероятная нагрузка на вашу службу поддержки), так и раздражением и уходом посетителей, которые устали предлагать вашему алгоритму подходящие пароли.

8. Оставляйте возможность переключаться между полями ввода с помощью клавиши «Tab» и выделяйте элементы при таком переключении.

Да, несмотря ни на что, пользователи, все еще переключающиеся между полями формы при помощи клавиши «Tab», еще живы и вполне активны. К слову, автор этой статьи сам частенько пользуется Tab`ом при заполнении различных форм. И, между прочим, как горячая клавиша, Tab здорово ускоряет работу.

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

Фокусировка при переключении Tab `ом в Firefox и Chrome .

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

Рано или поздно, но множественные попытки авторизации или восстановления пароля следует останавливать. Можно снисходительно отнестись к 5 или даже 10 попыткам, однако их настойчивое продолжение должно вас насторожить. С дальнейшими операциями по аутентификации, регистрации или восстановлению аккаунта вы должны работать. Самый очевидный способ – после N-нного количества попыток предложить пользователю (или тому, кто скрывается под маской пользователя) ввести капчу, дабы отсеять ботов. Кроме того, хорошим способом является блокировка аккаунта на определенное время при провале множественных попыток авторизации и всех остальных аналогичных действий. Обратите внимание, что аккуратность в этом подходе относится не только к необходимости дать пользователю возможность ошибиться действительно достаточное количество раз, но и к умеренному времени блокировки. Первая блокировка, которую вы будете вынуждены осуществить, не должна быть слишком длительной – просто предупредите в нужный момент того, кто пытается осуществить действие с аккаунтом, что следующая попытка обернется блокировкой на определенное время. Если по истечению этого времени пользователь, взломщик или бот продолжит делать ошибки, то вы вполне можете последовательно увеличивать временной интервал до внушительных значений.

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

10. Помните о том, что обозначать ошибки одним лишь цветом может быть недостаточно.

Во многом, вопрос выделения сделанных пользователем ошибок дополнительными средствами, не относящимися к привычному цветовому обозначению, зависит от масштабов вашего проекта и количества существующей и потенциальной аудитории. Дело в том, что расстройства цветового восприятия у пользователей распространены шире, чем мы привыкли о них думать . Уже каждый 12-ый пользователь мужского пола является дальтоником, а каждый 30-ый, вне зависимости от пола, обладает плохим зрением. Вам может показаться, что эти показатели не критичны и таких особенных пользователей у вас должно быть немного, однако при достижении определенного критического количества зарегистрированных посетителей, вы неизбежно будете иметь дело с такими людьми. Будет здорово, если вы уделите им немного внимания и облегчите их задачи.

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

Регистрационная форма PayPal в черно-белом виде.

При анализе данного скриншота регистрационной формы PayPal, переведенной в ч\б режим, наше внимание приковывает, в первую очередеь, треугольник с восклицательным знаком, размещенный в поле капчи. Судя по общей картине, можно сделать вывод, что пользователь забыл ввести лишь капчу, и что с остальными полями все в порядке (вне зависимости от того, заполнены они или нет).

Регистрационная форма PayPal в полноцветном режиме.

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

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

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

Все кто разрабатывает web сайты, рано или поздно сталкивается с такой задачей как авторизация и аутентификация пользователей , реализованная именно с помощью языка программирования, а не с помощью стандарта протокола http. Сегодня мы рассмотрим пример создания простой авторизации с использованием языка программирования PHP, а данные о пользователях будем хранить в базе MySQL.

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

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

Создание объектов в базе данных

Переходим к практике. Для начала создадим таблицу хранения данных о пользователях в базе MySQL . Я предлагаю использовать простую структуру таблицы (Вы ее, конечно, можете дополнить чем-нибудь, у меня база называется test, а таблица users ):

CREATE TABLE test.users(user_id INT(11) UNSIGNED NOT NULL AUTO_INCREMENT, user_login VARCHAR(30) NOT NULL, user_password VARCHAR(32) NOT NULL, PRIMARY KEY (user_id)) ENGINE = MYISAM CHARACTER SET utf8 COLLATE utf8_general_ci;

И давайте сразу же добавим одну запись в эту таблицу:

Insert into test.users (user_login, user_password) values ("mylogin","202cb962ac59075b964b07152d234b70")

Итого у нас получилось:

• Логин – mylogin;
• Пароль -;

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

Создание формы регистрации

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

0) { $error = "Пользователь с таким логином уже есть"; } // Если нет, то добавляем нового пользователя if(!isset($error)) { $login = mysql_real_escape_string(trim(htmlspecialchars($_POST["login"]))); // Убираем пробелы и хешируем пароль $password = md5(trim($_POST["password"])); mysql_query("INSERT INTO users SET user_login="".$login."", user_password="".$password."""); echo "Вы успешно зарегистрировались с логином - ".$login; exit(); } else { // если есть такой логин, то говорим об этом echo $error; } } //по умолчанию данные будут отправляться на этот же файл print <<< html

Логин
Пароль

html; ?>

Кстати, при таком способе лучше всего для логина использовать латинские буквы (т.е. английские ), если хотите писать логин на русском, то придется немного корректировать код. Файл можете назвать как угодно (для теста я использовал reg.html ).

Примечание! Для тестирования я использую всего один файл, я его назвал mylogin.html (код файла ниже). Вы можете использовать в своих файлах и называть их как угодно, я здесь описываю сам процесс авторизации, поэтому применить его можно везде. Кстати, во всех файлах придется использовать функцию session_start(); для того чтобы Вы могли проверять авторизован пользователь или нет. И еще один момент, конечно же, пропишите свои настройки подключения к базе данных.

Создание формы авторизации

"."Вы авторизованы
Т.е. мы проверили сессию и можем открыть доступ к определенным данным"; } else { $login = ""; //проверяем куку, может он уже заходил сюда if (isset($_COOKIE["CookieMy"])){ $login = htmlspecialchars($_COOKIE["CookieMy"]); } //простая формочка print <<< html

Логин
Пароль

html; } ?>

Примечание! Если вдруг у Вас отказывает работать парсер php, т.е. на экран Вам выводится сам код php, то у Вас просто на всего не включена обработка php в файлах html. Настройки делаются в файле конфигурации web сервера httpd.conf (если apache):

AddType application/x-httpd-php .php .html

В IIS в окне «Добавление сопоставления модуля» (Add Module Mapping) добавьте к *.php еще и *.html через запятую. Это если Вы делаете у себя дома на своем web сервере, а если Вы все это делаете у хостера, то Вам придется писать им и просить внести необходимые изменения, у некоторых хостеров они уже сделаны.

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