AJAX авторизацияПо просьбам читателей приведу самый примитивный пример авторизации с помощью AJAX. Почему примитивный? Потому что, если у вас нет навыков написания хорошего, защищенного скрипта авторизации на php+mysql, то этот пример не для вас. Зацикливаться на самой авторизации я не буду, ведь все мы знаем, что пользователей нужно хранить в базе данных с их зашифрованными паролями и IP адресами последнего входа…? У меня всё гораздо проще - users.txt файл в корне с синтаксисом: “пользователь = пароль” в несколько строк.

А шифрование и прочие навороты оставляю за вами :)

Начнем с самого простого:

HTML

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div id="userarea">
        <input type="text" name="username" id="username"> 
        <input type="password" name="password" id="password"> 
        <input type="submit" onclick="login(); return false;"></div>
    <div id="userarea2"></div>
</body>
</html>

Объясняю. Как видите, нам и форма не нужна (хотя если хотите, чтобы посетитель мог отослать данные по нажатию на кнопку enter, как ему привычнее, то следует добавить форму и использовать событие onSubmit). Два блока (userarea и userarea2). В первом будем хранить форму. Второй используем для вывода пользователю некой информации (неверный вход, добро пожаловать и т.д.).

Script.js мы рассмотрим позднее, т.к. сперва хочу показать, каким образом мы выдаем ответы на попытки авторизации.

PHP auth.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

    $username = $_POST["username"];
    $password = $_POST["password"];
 
    $users = file_get_contents("users.txt");
    $users = explode("\n",$users);
    $auth = false;
 
    foreach($users as $userdata)
    {
        $userdata = explode("=", $userdata);
        if ($username == trim($userdata[0]) && $password == trim($userdata[1]))
        {
          $auth = true;
          break;
        }
    }
 
    if ($auth)
    {
        setcookie("username", $username, time()+3600);
        setcookie("password", $password, time()+3600);
        echo "200 " . $username;
    }
    else
    {
        setcookie("username", $username, time()-1);
        setcookie("password", $password, time()-1);
        echo "500";
    }

Первым делом считываем данные POST (вполне логично). Затем, открываем нашу “базу данных” пользователей и смотрим есть ли там такой набор (логин/пароль). Если есть, то $auth = true; Ну а дальше устанавливаем куки и выдаем ответ:

200 username

В случае верной авторизации, или

500

В случае неверной ;)

Javascript/AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

function getXmlHttp() {
  var xmlhttp;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
      try {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
      xmlhttp = false;
    }
  }
 
  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}
 
function login() {
  var sUsername = document.getElementById("username").value;
  var sPassword = document.getElementById("password").value;
 
  userarea = document.getElementById("userarea");
  userarea.style.display = 'none';
 
  userarea2 = document.getElementById("userarea2");
  userarea2.style.display = 'block';
  userarea2.innerHTML = "loading...";
 
  var xmlHttp;
  xmlHttp = getXmlHttp();
 
  var httpParams = "username=" + sUsername + "&password=" + sPassword;
 
  xmlHttp.onreadystatechange = function()  {
    if (xmlHttp.readyState == 4)
    {
      var response = xmlHttp.responseText;
      if (response.substring(0,3) == "200")
      {
        userarea2.innerHTML = "login successful. greetings, " + response.substring(3);
      }
      else
      {
        userarea2.innerHTML = "invalid login or password";
        userarea.style.display = 'block';
      }
    }
  }
 
  xmlHttp.open('POST', 'auth.php', true);
  xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;');
  xmlHttp.setRequestHeader('Content-length', httpParams.length);
  xmlHttp.setRequestHeader('Connection','close');
  xmlHttp.send(httpParams);  
}

Кто не знаком с функцией getXmlHttp(), прошу сюда: Введение в AJAX (XML). Дальше - функция login() будет вызываться по нажатию на кнопку вход. Считываем значения полей login и password (свойство value), шаманим с дивами (показываем “пожалуйста, подождите”).

На 33-й строке формируем параметры запроса, затем выставляем функцию на событие onreadystatechange. Здесь, в переменную response, помещаем весь ответ от скрипта auth.php. В условии проверяем первые три знака. Если 200, то авторизация прошла, и во второй див напишем пользователю приветствие. Ну а иначе, пишем неверный логин или пароль и возвращаем форму для входа.

С 51-й строки посылается сам запрос (обратите внимание - методом POST). Думаю ничего сверхестественного, если вы читали, например AJAX и XML: Shoutbox.

Что дальше?

Дальше создаете базу данных пользователей, шифруете их пароли, делаете блокировку на час по 3-х кратной неверной авторизации, рисуете красивую форму, добавляете AJAX иконочки (ajaxload.info) и еще разок тестируете форму на безопасность.

Good luck ;)

Google Bookmarks Digg Reddit del.icio.us Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong