Простая система идентификации на сайте с помощью PHP+MySQL и JavaScript+JQuery

Окт.03.2008     Web-программирование > PHP+mySQL     (1)

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

Общее описание системы:
Пользователь вводит на сайте свой логин (в качестве логина будем использовать e-mail) и пароль.
При вводе этих данных мы должны контролировать что пользователь ввел эти данные, а также необходимо проконтролировать то, что написание логина правильно, то есть имеет формат написания как у электронной почты.
Если все введённые данные корректные то при нажатии посетителем на кнопку “Войти” будет отправлен Ajax запрос на сервер и будут переданы данные пользователя.

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

Нам понадобятся следующие таблицы:
Таблица где будут храниться данные пользователей – customers.
Вот SQL код для ее создания:

CREATE TABLE customers (customer_id int(10) unsigned NOT NULL auto_increment,customer_email varchar(255) NOT NULL ,customer_password varchar(255) NOT NULL default ,PRIMARY KEY (customer_id)) TYPE=MyISAM;

Пароль будем хранить пока в открытом виде.
Теперь следующая таблица – таблица сессий пользователей. Назовем ее sess. Вот SQL код для ее создания:

CREATE TABLE sess (ID int(10) unsigned NOT NULL auto_increment Val varchar(50) NOT NULL default ,customer_id int(10) unsigned default NULL ,PRIMARY KEY (ID),KEY Val (Val)) TYPE=MyISAM;

В неё мы будем добавлять строки со сгенерированным случайным номером сессии (поле Val) а чтобы знать, кому принадлежит эта сессия добавим поле customer_id, в которое будем записывать первичный ключ из таблицы customers для конкретного пользователя. Так мы свяжем идентификатор сессии с конкретным пользователем.
Это все таблицы которые понадобятся нам для работы.

Переходим к серверным скриптам PHP, которые будут контролировать доступ, генерирование сессии и отправка ее пользователю.
При работе нам понадобится часто обращаться к базе данных MySQL. Для удобства и быстрой настройки создадим файл config.php
Вот его содержимое

<?
define(“DBHOST”,”localhost”); // имя или IP сервера базы данных
define(“DBUSER”,”root”); // имя пользователя базы данных
define(“DBPASSWORD”,”"); // пароль пользователя базы данных
define(“DBNAME”,”zdb”); // наименование базы данных
// далее идут стандартные процедуры начала работы с базой данных из PHP
$db = mysql_connect(DBHOST,DBUSER,DBPASSWORD);
mysql_select_db(DBNAME,$db);
?>

Теперь мы сможем просто подключать этот файл в нужном нам месте с помощью
<? include(“путь_к_файлу_config.php”);>

И уже работать с базой данных.

Теперь разберем основной скрипт для проверки правильности логина и пароля. Будем считать, что данные пользователя передаются с помощью метода GET. Пусть наш скрипт хранится в том же месте ,что и config.php и называется login.php
вот его содержимое:

<?
header(“Expires: ” . gmdate(“D, d M Y H:i:s”) . ” GMT”); // заголовок возвращаемого результата – важен чтобы броузер не брал данные из кэша
header(“Content-Type: charset=Windows-1251″); // наши данные вернутся в этой кодировке
if($_SERVER[HTTP_X_REQUESTED_WITH] == XMLHttpRequest) // это проверка того, что запрос клиента создан с помощью Ajax
{
include(“config.php”); // подключаем наш файл быстрой настройки
// теперь получаем наши данные логина и пароля переданные серверу методом GET
$login=$_GET["user_login"];
$password=$_GET["user_password"];
// ищем пользователя с таким паролем в нашей базе
$Sql = “SELECT * FROM customers WHERE customer_email=”.$login.” and customer_password=”.$password.”;”; // формируем текст SQL запроса
$Result = mysql_query($Sql); // выполняем запрос к серверу базы данных и получаем результат в переменную $Result
$Res_count=mysql_num_rows($Result); // получаем количество рядов, которое вернул нам наш запрос. Если это количество больше нуля, то такой пользователь есть.
if ($Res_count > 0)
{
// здесь наши действия при успешном запросе
// создаем уникальный номер сессии, записываем его в базу для конкретного пользователя и отправляем его ему
// сначала извлечем из старого запроса идентификатор клиента, так как он нам пригодится для сессии
$MyResult = mysql_fetch_array($Result);
$customer_id=$MyResult["customer_id"]; // записываем в переменную $customer_id идентификатор клиента
// теперь сгенерируем случайную последовательность для сессии
srand((double) microtime() * 1000000);
$sid=md5(uniqid(rand())); // и запишем ее в переменную $sid
// теперь можно добавить в таблицу сессий новую запись для вошедшего пользователя
$Result = mysql_query(insert into sess set Val=”.$sid.”, customer_id=.$customer_id.;);
// теперь вернем пользователю его идентификатор сессии
echo $sid;
}
else
{
// здесь наши действия при отрицательном результате – пользователь не найден
echo error;
}
}
}
?>

Наш серверный скрипт готов!

Приступим к клиентским приложениям.
Наш пользователь в общем случае запрашивает страницу index.
Создадим ее и назовем index.php
Рассмотрим ее содержимое. Сначала идет обычный html заголовок:

<html>
<head>
<title>Страница авторизации</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<?// нам понадобится библиотека jquery и некоторые дополнительные файлы скриптов для проверки данных.
// вы можете их получить на сайте jquery.com где разрабатывается эта популярная библиотека
>
<script language=”JavaScript” type=”text/JavaScript” src=”c_include/jplugins/jquery.js” mce_src=”c_include/jplugins/jquery.js”></script>
<script language=”JavaScript” type=”text/JavaScript” src=”c_include/jplugins/jquery.form.js” mce_src=”c_include/jplugins/jquery.form.js”></script>
<script language=”JavaScript” type=”text/JavaScript” src=”c_include/jplugins/jquery.validate.js” mce_src=”c_include/jplugins/jquery.validate.js”></script>
<script language=”JavaScript” type=”text/JavaScript” src=”c_include/jplugins/additional-methods.js” mce_src=”c_include/jplugins/additional-methods.js”></script>
</head>
<body>
<?
// теперь вставим элементы формы для авторизации пользователя и хранения полученной сессии
?>
<input name=”sessid” type=”hidden” id=”sessid” value=”0″>
<form id=”auth_box_form” name=”auth_box_form” method=”get” action=”">
<label for=”user_login”>Имя пользователя</label>
<input id=”user_login” name=”user_login” type=”text” />
<label for=”user_password”>Пароль</label>
<input type=”password” id=”user_password” name=”user_password”>
<input type=”submit” name=”Submit” value=”Войти”>
</form>
<?
// после того, как мы описали форму ввода данных перейдем к JavaScript-ам
// подключим файл с функцией обработки и вызовем функцию обработки формы
?>
<script language=”JavaScript” type=”text/JavaScript” src=”login.js” mce_src=”login.js”></script><?// Подключили файл скриптов>
<script language=”JavaScript” type=”text/JavaScript”>
init_form_validate(); <? // вызываем функцию обработки введенных данных и отправки на сервер
</script>
</body>
</html>

На этом содержимое нашего index.php заканчивается и самое интересное остается в файле login.js
В нем напишем следующий код:

function init_form_validate(){
$(“#auth_box_form”).validate({
submitHandler: function(form) {
$.ajax({
type: “GET”,
error:function (XMLHttpRequest, textStatus, errorThrown) {$(“#sessval”).html(Ошибка связи);},
url: “login.php” ,
data: “user_login=”+$(“#user_login”).val()+”&user_password=”+$(“#user_password”).val(),
success: function (data, textStatus){
if (data==error)
{
alert(“Авторизация прошла успешно”);
}
else
{
alert(“Ошибка авторизации”);
}
}
});
},

focusInvalid: false,
focusCleanup: true,
rules: {
user_login:{
required: true,
email: true
},
user_password: {required:true}
},
messages: {
user_login:{
required: “Нужно ввести имя пользователя(e-mail)”,
email: “Нужно ввести корректный пароль”
},
auth_box_password: {
required:”Требуется пароль”
}
},
errorPlacement: function(error, element) {
var er = element.attr(“id”);
error.appendTo( element.parent().find(“label[@for=" + er + "]“));
}
});
}

Разберем отдельные его части.
С помощью выражения $(“#auth_box_form”).validate() мы привязали обработчик из библиотеки jquery к нашей форме. Это автоматический обработчик.
В секциях rules вы можете увидеть правила проверки, которые применяются к данным, введенным пользователем. Правила привязаны к элементам ввода по имени.
В секции messages вы описываете текст сообщений, выдаваемых пользователю при нарушении правил. Для каждого правила – свое сообщение.
Функция
errorPlacement: function(error, element) {
var er = element.attr(“id”);
error.appendTo( element.parent().find(“label[@for=" + er + "]“));
}
Будет перехватывать обработку нарушения правил и выводить текст сообщения в текст меток у которых есть атрибут for.
А теперь главное – при успешном соблюдении правил ввода пользователь нажмет на кнопку Войти.
В нашем обработчике функция отправки данных перехватывается обработчиком submitHandler:.
При отправке формируется Ajax запрос с указанными опциями
$.ajax({
type: “GET”,
error:function (XMLHttpRequest, textStatus, errorThrown) {$(“#sessval”).html(Ошибка связи);},
url: “login.php” ,
data: “user_login=”+$(“#user_login”).val()+”&user_password=”+$(“#user_password”).val(),…
При успешном получении ответа от сервера мы можем обработать содержимое ответа с помощью опции success

success: function (data, textStatus){
if (data!=error)
{
$(“#sessid”).val(data);
alert(“Авторизация прошла успешно”);
}
else
{
alert(“Ошибка авторизации”);
}
}

Здесь простое условие. Если получен ответ error, значит логин и/или пароль неверные. Иначе скрипт считает, что получен номер сессии и записывает его в скрытое поле.
Результат выводится в окно сообщения.
Вот пожалуй и все.