входа на сайт скрипт
Безопасный метод авторизации на PHP
Давайте посмотрим вокруг: форумы, интернет магазины, гостевые книги и т.д. используют регистрацию и последующую авторизацию пользователей. Можно даже сказать, что это почти необходимая функция каждого сайта (только если это не домашняя страничка Васи Пупкина или не визитная карточка, какой-нибудь небольшой компании). Сегодня я хочу поделиться со всеми новичками информацией, о том, как лучше это все реализовать.
Модель авторизации:
Клиент
Сервер MySQL
При регистрации в базу данных записывается логин пользователя и пароль(в двойном md5 шифровании)
При авторизация, сравниваеться логин и пароль, если они верны, то генерируеться случайная строка, которая хешируеться и добавляеться в БД в строку user_hash. Также записываеться IP адрес пользователя(но это у нас будет опциональным, так как кто-то сидит через Proxy, а у кого-то IP динамический. тут уже пользователь сам будет выбирать безопасность или удобство). В куки пользователя мы записываем его уникальный индетификатор и сгенерированный hash.
Почему надо хранить в куках хеш случайно сгенерированной строки, а не хеш пароля?
1. Из-за невнимательности программиста, во всей системе могут быть дырки, воспользовавшийсь этими дырками, злоумышленик может вытащить хеш пароля из БД и подставить его в свои куки, тем самым получить доступ к закрытым данным. В нашем же случае, двойной хеш пароля не чем не сможет помочь хакеру, так как расшифровать он его не сможет(теоретически это возможно, но на это он потратит не один месяц, а может быть и год) а воспользоваться этим хешем ему негде, ведь у нас при авторизации свой уникальный хеш прикрепленный к IP пользователя.
2. Если злоумышленик вытащит трояном у пользователя уникальный хеш, воспользовать им он также не сможет(разве если только, пользователь решил принебречь своей безопастностью и выключил привязку к IP при авторизации).
Реализация
Структура таблицы `users` в базе данных ‘testtable’
register.php
login.php
check.php
logout.php
Для защиты формы логина от перебора, можно использовать капчу или временную задержку на повторную авторизацию.
Автор: http://jiexaspb.habrahabr.ru/. Адаптация под PHP 5.5 и MySQL 5.7 KDG.
Куки с флагом HttpOnly не видны браузерному javascript-коду, а отправляются только на сервер. На практике у вас никогда нет необходимости получать их содержимое в javascript. А вот злоумышленнику, нашедшему XSS — а XSS так или иначе когда-нибудь где-нибудь найдется — отсутствие HttpOnly на авторизационных куках доставит много радости.
22 лучших формы входа и регистрации на сайте в HTML&CSS!
↓ Также Вам будет интересно ↓
В этой статье у нас есть для Вас специальная коллекция лучших форм: форма входа и форма регистрации для сайта, созданные с помощью CSS3 и HTML5 технологий, в современном стиле и некоторыми классными эффектами на JavaScript. Смотрите одну из лучших и современных форм входа с эффектами JQuery.
На сегодняшнее время, формы html css, очень популярны, так как всё больше сайтов имеют свою регистрацию пользователей, а это означает, что им нужна будет форма для регистрации пользователей и их входа в личный кабинет (или ещё куда-то).
Чтобы помочь Вам, я подготовил для Вас подборку лучших, на моё мнение, форм, с различным расположением полей ввода, разными цветовыми оттенками и так далее. Некоторые имеют эффекты JavaScript, с 3D переворотами, эффектным появлением.
Я считаю, что веб-дизайн играет важную роль в создании подобных форм, и ему нужно уделить должное внимание. В принципе, форма входа имеет 3 стандартных поля: логин или имя пользователя, пароль, а также кнопка “Войти”.
1 → Темная форма входа
Простая форма темная входа, со стандартными полями, и креативной кнопкой синего цвета.
2 → Светлая форма входа
Светлая форма входа с прозрачной рамочкой и четкой структурой.
3 → Эффектная форма с эффектом появления
Элегантная форма, светлого тона, с красивым эффектом появления “изнутри”.
4 → Простая форма с эффектом появления
Простая форма, всего 3 стандартных элемента, но с приятным эффектом появления “снизу” с прозрачностью.
5 → Красивая форма с логотипом Apple
Продуманная форма на сайт с интересным дизайном и логотипом apple.
6 → Маленькая форма в розовом стиле
Маленькая и простая, в розовом стиле, и интересным дизайном.
7 → Светлая форма
Светлая, в выдержанном стиле и дизайне, ничего лишнего.
8 → Супер форма входа и восстановления пароля
Форма входа + обратная сторона – восстановление пароля. Эффект 3D переворота, при переключении между формами.
9 → Приятная дизайнерская форма с эффектом
Приятная на вид, красивый эффект появления иконок при активации поля ввода.
10 → Форма серого цвета
Серый оттенок, в виде друг на друга наложенных листочков.
11 → Крупная форма с дополнительным элементом
Красивая, с крупными полями ввода данных, и дополнительной выпадающей кнопкой при наведении (её можно использовать для любых, задуманных целей).
12 → Дизайн в виде блокнота
Дизайн формы в виде блокнота, с простыми полями, но выдержанным стилем.
13 → Красочная, прозрачная форма
Красочная, прозрачная и цветная форма, с дополнительными кнопками входа через социальные сети, а также красивым чекбоксом “Запомнить меня”.
14 → Apple Iphone форма
Форма входа для любителей Apple, с формами ввода, кнопкой “Запомнить” – в общем мне понравилось!
15 → Чёткая форма с заголовком
Четкая и простая форма, без никаких отвлекающих элементов, и заметным черным заголовком.
16 → Тёмная форма
Тёмная форма с красивой и заметной кнопкой отправки данных.
17 → Черная форма
Черная форма входа с белыми полями – хорошее сочетание цветов.
18 → Горизонтальная форма входа и регистрации
Горизонтальная форма входа и регистрации пользователя, с эффектом 3D переключения между формами.
19 → Темная форма с дополнительными элементами
Темная форма с кнопками входа через социальные сети и красивыми полями.
20 → Форма входа на сайт + регистрация
Регистрация + форма входа, с 3D эффектом переключения между формами и социальными кнопками входа.
21 → Белая форма с красным заголовком
Светлая форма, с бросающимся в глаза заголовком, и простыми полями ввода текста.
22 → Форма входа, регистрации и восстановление пароля
Тройная форма: регистрация, вход на сайт и восстановления пароля. Переключение между формами на Javascript.
Заключение
Вот они и есть, все формы html css! Надеюсь, какая-то из них Вам точно подошла.
Данный урок подготовлен для вас командой сайта /
Подготовил: Владислав Бондаренко
Форма входа и регистрации с помощью HTML5 и CSS3
Здесь мы использовали несколько приемов HTML5. Например, элемент type=password автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент type=email позволяет браузеру проверить правильность формата email адреса. Кроме того, мы использовали параметр require=required; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр autocomplete=on будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.
Теперь о двух хитрых моментах. Вы наверное заметили две ссылки в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).
Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute, чтобы отобразить иконки. Устанавливая параметр data-icon=”icon_character” с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes.
Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!
Стилизуем формы, используя CSS3
Во-первых, давайте назначим нашим формам базовый стиль.
Мы добавили две тени к элементу: одна — с целью создать внутреннее голубое свечение, а вторая — внешняя тень. Чуть позже я объясню вам z-index.
Здесь мы назначим свойства для шапки:
Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.
Мы также создали тонкую линию под заголовком с помощью элемента :after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.
Теперь давайте позаботимся о полях ввода и придадим им приятный вид.
Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства :active и :focus.
Здесь мы использовали псевдо класс :not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства :focus и :active.
Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы :before и :after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas. Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.
Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon), чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.
Теперь назначим правила для кнопки отправки формы.
Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.
Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:
Стилизуем подвал формы, используя множественные линейные градиенты, чтобы создать полосатый градиент.
Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!
Создаем анимацию
Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:
Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.
Теперь самое интересное: меняем формы местами, используя псевдо класс :target. Вам нужно понять одну вещь по поводу :target: для перемещения мы будем использовать якоря. Нормальное поведение якоря — прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).
Вот, что происходит: когда мы кликаем на кнопку Присоединиться, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.
Форма, которая “исчезает”, будет иметь анимацию затемнения влево:
Вот и все, друзья. Надеюсь вам понравился этот туториал!
Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс :target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.
Форма ввода логина и пароля на JavaScript
Здесь мы рассмотрим совсем не сложный скрипт, написанный на JavaScript, который создает форму ввода логина и пароля. Отличительной чертой данного скрипта является то, что в зависимости от введенного логина и пароля происходит перенаправление пользователя на заданную страничку или сайт.
Для наглядного примера работы данного скрипта кликните по кнопке «Войти на сайт», находящейся чуть ниже. Если в поле «логин» ввести login, а в поле «пароль» pass, то Вас автоматически перебросит на главную страницу нашего сайта. А если в поле «логин» ввести login2, а в поле «пароль» pass2, то Вы уже окажетесь на нашем форуме.
Если вводить какие-либо другие значения в поля «логин» и «пароль», то Вам будет выдано сообщение Неверный логин или пароль! и Вы вернетесь обратно на эту же страничку.
Для получения такой формы ввода логина и пароля, как в примере выше, воспользуйтесь следующим JavaScript кодом, который необходимо будет поместить в начало Вашей странички:
if ( login_ok == false ) alert ( «Неверный логин или пароль!» );
>
Для вывода формы ввода логина и пароля нам понадобится кнопка, при нажатии на которую появится наша форма. Следовательно, нам необходимо добавить эту кнопку при помощи вот такого небольшого кода:
Если Вы все сделали правильно, то в результате у Вас должна получиться точно такая же формы ввода логина и пароля, как и в примере, показанном ранее.
Форма авторизации на php
Продолжаем изучать язык PHP на практике. Тема нашего сегодняшнего урока — «Простая форма авторизации на PHP». Я предлагаю вам подробное описание создания формы авторизации, регистрации и обработчиков файлов с пошаговой инструкцией.
Перед тем, как приступить к работе, мы должны продумать логику построения и работы нашей формы, чтобы потом воплотить её в жизнь средствами языка программирования, в нашем случае — средствами php.
Техническое задание
Итак, для этого нам нужна форма заполнения данных для входа в систему, на которой мы заполняем поля «логин», «пароль»и нажимаем кнопку «Войти», при нажатии которой подключается обработчик, который проверяет эти поля и если они совпадают с существующими в базе (то бишь осуществляется проверка, зарегистрирован ли такой зарегистрирован пользователь в системе), то нам показывается сообщение «Бла-бла-бла, вы зашли на сайт, поздравляем!», форма входа пропадает, а вместо неё появляется кнопка «Закрыть».
Также на форме входа есть ссылка «Регистрация» для тех пользователей, которые ещё не зарегистрировались, но очень хотят это сделать. При клике на эту ссылку мы попадаем уже на третий файл, который отвечает именно за регистрацию пользователей. В этом файле нам нужно прописать поля «Логин», «Пароль», «Повторите пароль», «Email» и кнопка «ОК», при нажатии которой подключается четвёртый файл — обработчик, который заносит заполненные поля в специальную таблицу Базы Данных, осуществляя при этом проверку, заполнены ли все поля.
Список файлов:
Форма авторизации
Помещение HTML-формы в PHP-скрипт
Поля формы авторизации создаются средствами языка разметки HTML, но нам необходимо поместить эту форму в PHP-скрипт, чтобы у нас была возможность работать с php-скриптами прямо в этой форме. Для этого форму заключим в php-скрипт, а выведем её на экраны средствами php, например,
Подключение обработчика формы
Для того, чтобы форма начала работать и данные с полей формы сверялись с данными в Базе Данных, которые были введены при регистрации, нам нужно форму авторизации подключить к обработчику, который и будет обрабатывать форму, сверять значения полей, запускать или не запускать пользователей на сайт. Подключается обработчик легко, нужно всего лишь прописать в теге form атрибут action, то бишь ссылку на обработчик (адрес документа или программы, которая будет обрабатывать данную форму), например:
Обработчик формы авторизации
Чтобы наша форма авторизации работала, то есть взаимодействовала с Базой Данных, мы подключили специальный обработчик script1.php. Именно он проверит введены ли данные в поля авторизации — «Логин» и «Пароль», зарегистрирован ли на сайте пользователь с введёнными параметрами (то бишь, есть ли в БД уже такой пользователь), и если есть, авторизовать его на сайте (если совпадают введённые логин и пароль с существующими в БД). Если такого пользователя нет (не совпадают введённые данные логин и пароль), вывести пользователю эту ошибку.
Для начала нам нужно проверить правильность заполнения форм входа пользователя. Проверяем, заполнены ли пользователем все поля, удаляем экранирование символов, удаляем лишние пробелы, преобразуем символы в html-сущности, открываем сессию и перенаправляем пользователя на нужную страницу после выполнения скрипта. Например:
Ну и, конечно же, нам нужно подключиться к базе данных, чтобы наши скрипты проверки пользователя и его авторизации могли работать. Чтобы подключиться к БД, нужно знать адрес сервера MySQL (mysql.moidomen.com), название базы данных (moya_baza), название пользователя базы данных (moi_login) и пароль к базе данных (moi_parol). В скобках и в примере ниже я указала примерные данные, вы же должны при подключении указать СВОИ данные для того, чтобы подключиться к СВОЕЙ базе данных. Пример подключения к БД:
Далее нам нужно извлечь из БД из таблицы с зарегистрированными пользователями на сайте их логины. Если есть зарегистрированный пользователь с таким логином, сверяем пароли введённые при регистрации и авторизации. Если эти пароли совпадают, авторизовываем пользователья на сайте и выводим информацию на экран, что он вошёл. В противном случае пользователя не авторизовываем (он остаётся, как гость) и показываем информацию, что логин или пароль неверны. Не забываем прописывать функцию защиты пароля md5();, которая переводит пароль в хэш в виде 32-символьного шестнадцатеричного числа. Пример ниже:
Полностью файл script1.php выглядит так:
Форма регистрации
На странице с формой авторизации для незарегистрированных пользователей, но желающих это сделать есть ссылка на страницу с регистрацией, которую нам и нужно создать. Форма регистрации аналогична форме авторизации, разница только в количестве полей и обработчике, который будет эту форму обрабатывать. Поэтому в атрибуте тега form — action прописываем ссылку на обработчик script2.php. Форма регистрации registration.php выглядит следующим образом:
Обработчик формы регистрации
Как форма регистрации готова, приступим к созданию обработчика формы регистрации. Он будет очень похож на обработчик формы авторизации. В них используются практически одинаковые функции. Сначала мы передаём в переменные значение заполненных форм в полях регистрации. Проводим проверку, заполнено ли каждое поле и совпадают ли пароли в обоих полях — в поле «Пароль» и «Подтверждение пароля». Пароль переводим в ХЭШ, используя функцию MD5 (); Она переводит введённый пароль, то есть кодирует его в хэш в виде 32-символьного шестнадцатеричного числа. Как и в обработчике авторизации, в обработчике регистрации прописываем функции, которые в заполненных полях редактируют данные — удаляют экранирование символов, удаляют лишние пробелы, преобразуют символы в html-сущности. Например:
Затем подключаемся к базе данных. На примере обработчика авторизации мы уже знаем как это делать:
Теперь нам осталось занести данные, введённые в поля формы регистрации в таблицу зарегистрированных пользователей registr_users, оповестить новоиспечённого пользователя о том, что регистрация прошла успешно выводом информации в браузер и предложить войти на сайт перейдя для этого по ссылке.
В целом весь файл-обработчик формы регистрации script2.php выглядит так:
Пример формы авторизации
Ну вот, в принципе, и всё. Для наглядности примера авторизации можно посмотреть — поклацать здесь. Там всё тоже самое, только я ещё добавила файл css и подключила его.