Очень простой вход в систему при помощи Perl, jQuery, Ajax, JSON и MySQL

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

В статье описывается очень простая методика входа в систему, реализованная с использованием нескольких современных технологий - языка сценариев Perl, бесплатной базы данных MySQL, облегченного текстового формата JSON, кроссбраузерной JavaScript-библиотеки jQuery и технологии асинхронных интерактивных Web-приложений Ajax.

Седа Ожес, сертифицированный ИТ-специалист, IBM

Седа Ожес (Seda Ozses) – фотографияСеда Ожес (Seda Ozses) является сертифицированным ИТ-специалистом и членом корпоративной группы Web-мастеров IBM. В основном она занимается корпоративными Web-порталами ibm.com. Связаться с ней можно по адресу seda.ozses@at.ibm.com.



21.12.2012

Введение

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

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

Реализация состоит из 4 разделов.

  1. В разделе SQL описывается, как создать в базе данных таблицу для хранения информации о пользователях.
  2. В разделе HTML реализуются ссылки на CSS и JavaScript, а также форма входа в систему.
  3. В разделе JavaScript реализуется Ajax-фрагмент, использующий jQuery и JSON.
  4. Наконец, в разделе Perl реализуется взаимодействие между пользователем и базой данных.

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

Что не включено в статью

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

SQL

Поскольку данная методика входа в систему является очень простой, таблица users содержит только три поля; уникальный идентификатор (id), уникальное имя пользователя (username) и пароль (password).

Листинг 1. SQL-код
CREATE TABLE 'mydb'.'users' (
  'id' INT NOT NULL AUTO_INCREMENT ,
  'username' VARCHAR(45) NOT NULL ,
  'password' VARCHAR(45) NOT NULL ,
  PRIMARY KEY ('id') ,
  UNIQUE INDEX 'id_UNIQUE' ('id' ASC) ,
  UNIQUE INDEX 'username_UNIQUE' ('username' ASC)
);
COMMIT;

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

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

INSERT INTO 'mydb'.'users' ('id', 'username', 'password') 
  VALUES(1, 'username1', 'password1');
INSERT INTO 'mydb'.'users' ('id', 'username', 'password') 
  VALUES(2, 'username2', 'password2');
COMMIT;

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


HTML

HTML-файл содержит форму входа в систему, а также ссылки на файлы CSS и JavaScript.

Ссылки на CSS

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

<link rel="stylesheet" type="text/css" media="screen, projection" 
  href="http://www.blueprintcss.org/blueprint/screen.css" />
<link rel="stylesheet"  type="text/css" media="screen, projection"
  href="http://www.blueprintcss.org/blueprint/plugins/buttons/screen.css" />
<link rel="stylesheet" type="text/css" media="print" 
  href="http://www.blueprintcss.org/blueprint/print.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" media="screen, projection" 
  href="http://www.blueprintcss.org/blueprint/ie.css"><![endif]-->

Ссылки на JavaScript

Кроме библиотеки jQuery, также используется JavaScript-файл login.js, который будет рассмотрен ниже.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="login.js"></script>

На момент публикации данной статьи последней версией jQuery была версия 1.4.4; для получения самой свежей версии обратитесь в раздел Ресурсы.

Форма входа в систему

Форма входа в систему состоит из текстового поля username, поля password и кнопки submit.

<form id="loginForm" name="loginForm" method="post" action="">
  <fieldset>
    <legend>Enter information</legend>
    <p>
      <label for="username">Username</label>
      <br />
      <input type="text" id="username" name="username" class="text" size="20" />
    </p>
    <p>
      <label for="password">Password</label>
      <br />
      <input type="password" id="password" name="password" class="text" size="20" />
    </p>
    <p>
      <button type="submit" class="button positive">
       <img alt="ok" src=
       "http://www.blueprintcss.org/blueprint/plugins/buttons/icons/tick.png" /> 
       Login
      </button>
    </p>
  </fieldset>
</form>

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

Рисунок 1. Снимок экрана с формой входа в систему
Снимок экрана с формой входа в систему

Отображение результата

Результат входа в систему будет отображаться в теге div, который скрыт во время загрузки и заполняется позже JavaScript-кодом.

<div id="loginResult" style="display:none;">
</div>
Рисунок 2. Снимок экрана с сообщением об ошибке, возвращенным JavaScript-кодом
Снимок экрана с сообщением об ошибке, возвращенным JavaScript-кодом
Рисунок 3. Снимок экрана с сообщением об ошибке, возвращенным Perl-кодом
Снимок экрана с сообщением об ошибке, возвращенным Perl-кодом
Рисунок 4. Снимок экрана с сообщением об успешной операции, возвращенным Perl-кодом
Снимок экрана с сообщением об успешной операции, возвращенным Perl-кодом

Готовый HTML-код

Листинг 2. login.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Very simple login using Perl, jQuery, Ajax, JSON and MySQL</title>
    <link rel="stylesheet" type="text/css" media="screen, projection" 
      href="http://www.blueprintcss.org/blueprint/screen.css" />
    <link rel="stylesheet"  type="text/css" media="screen, projection"
      href="http://www.blueprintcss.org/blueprint/plugins/buttons/screen.css" />
    <link rel="stylesheet" type="text/css" media="print" 
      href="http://www.blueprintcss.org/blueprint/print.css" />
    <!--[if IE]><link rel="stylesheet" type="text/css" media="screen, projection" 
      href="http://www.blueprintcss.org/blueprint/ie.css"><![endif]-->
    <script type="text/javascript" 
      src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="login.js"></script>
    <style type="text/css">
      #loginContent { width: 350px; margin: 100px auto; }
      button[type] { margin: 0.5em 0; }
    </style>
  </head>
  <body>
    <div id="loginContent" class="container">
      <div id="loginResult" style="display:none;">
      </div>
      <form id="loginForm" name="loginForm" method="post" action="">
        <fieldset>
          <legend>Enter information</legend>
          <p>
            <label for="username">Username</label>
            <br />
            <input type="text" id="username" name="username" class="text" size="20" />
          </p>
          <p>
            <label for="password">Password</label>
            <br />
            <input type="password" id="password" name="password" class="text" size="20" />
          </p>
          <p>
            <button type="submit" class="button positive">
             <img alt="ok" src=
             "http://www.blueprintcss.org/blueprint/plugins/buttons/icons/tick.png" /> 
             Login
            </button>
          </p>
        </fieldset>
      </form>
    </div>
  </body>
</html>

Хотя CSS не является нашей главной заботой, в HTML-код добавлены два определения inline, чтобы сделать внешний вид формы и кнопку более привлекательными.

Проверка кода

HTML-код и дополнительные CSS-определения были проверены на корректность при помощи сервисов W3C Validation Services.
Ссылки на дополнительную информацию о W3C Validation Services приведены в разделе Ресурсы.


JavaScript

Когда пользователь подтверждает введенные в форме входа данные, они считываются библиотекой jQuery. После прохождения очень простой проверки на отсутствие незаполненных полей в Perl-сценарии (login.pl) выполняется Ajax-вызов. Ключевым действием Ajax-вызова является установка параметра dataType в json.

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

В случае неудачного вызова сценария отображаются значения XMLHttpRequest.responseText, textStatus и errorThrown, предоставляемые библиотекой jQuery.

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

Готовый JavaScript-код

Листинг 3. login.js
$(document).ready(function(){
  $("form#loginForm").submit(function() { // loginForm отправлена
    var username = $('#username').attr('value'); // получить username
    var password = $('#password').attr('value'); // получить password

    if (username && password) { // значения не пусты
      $.ajax({
        type: "GET",
        url: "/cgi-bin/login.pl", // URL-адрес Perl-сценария
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        // отправка username и password в качестве параметров в Perl-сценарий
        data: "username=" + username + "&password=" + password,
        // вызов сценария был *не* успешным
        error: function(XMLHttpRequest, textStatus, errorThrown) { 
          $('div#loginResult').text("responseText: " + XMLHttpRequest.responseText 
            + ", textStatus: " + textStatus 
            + ", errorThrown: " + errorThrown);
          $('div#loginResult').addClass("error");
        }, // ошибка  
        // вызов сценария был успешным 
        // данные содержат JSON-значения, возвращенные Perl-сценарием 
        success: function(data){
          if (data.error) { // сценарий возвратил ошибку
            $('div#loginResult').text("data.error: " + data.error);
            $('div#loginResult').addClass("error");
          } // если
          else { // вход в систему был успешным
            $('form#loginForm').hide();
            $('div#loginResult').text("data.success: " + data.success 
              + ", data.userid: " + data.userid);
            $('div#loginResult').addClass("success");
          } //иначе
        } // успех
      }); // ajax
    } // если
    else {
      $('div#loginResult').text("enter username and password");
      $('div#loginResult').addClass("error");
    } // иначе
    $('div#loginResult').fadeIn();
    return false;
  });
});

Perl

Для нашей очень простой реализации нужны только три модуля Perl: CGI, DBI и DBD::mysql. При помощи CGI-модуля Perl-сценарий получает значения username и password, отправленные Ajax-кодом. Затем в сценарии выполняется подключение к базе данных и запрос на выборку идентификатора пользователя для конкретных значений. На основании результата запроса формируется JSON-ответ с сообщением либо об ошибке, либо об успехе. Perl-сценарий устанавливает тип содержимого в application/json и отвечает Ajax-коду JSON-строкой, которая затем сохраняется в переменной variable библиотекой jQuery.

Готовый Perl-код

Листинг 4. login.pl
#!/usr/bin/perl -T
use CGI;
use DBI;
use strict;
use warnings;

# прочитать параметры CGI
my $cgi = CGI->new;
my $username = $cgi->param("username");
my $password = $cgi->param("password");

# подключиться к базе данных
my $dbh = DBI->connect("DBI:mysql:database=mydb;host=localhost;port=2009",  
  "mydbusername", "mydbpassword") 
  or die $DBI::errstr;

# проверить имя пользователя и пароль в базе данных
my $statement = qq{SELECT id FROM users WHERE username=? and password=?};
my $sth = $dbh->prepare($statement)
  or die $dbh->errstr;
$sth->execute($username, $password)
  or die $sth->errstr;
my ($userID) = $sth->fetchrow_array;

# создать JSON-строку, соответствующую результату проверки в базе данных
my $json = ($userID) ? 
  qq{{"success" : "login is successful", "userid" : "$userID"}} : 
  qq{{"error" : "username or password is wrong"}};

# возвратить JSON-строку
print $cgi->header(-type => "application/json", -charset => "utf-8");
print $json;

Проверка кода

Возможно, вы захотите использовать валидатор JSON для создания корректного JSON-ответа.
Ссылки на информацию о проверке корректности JSON приведены в разделе Ресурсы.

Отображение сгенерированной JSON-строки

JSON-строку можно проверить в браузере:

  1. Измените $cgi->header(-type => "application/json", -charset => "utf-8"); на print $cgi->header;.
  2. Введите http://your-domain-name_or_localhost/cgi-bin/login.pl?username=username1&password=password1 в адресной строке браузера.
Рисунок 5. Снимок экрана с JSON-строкой
Снимок экрана с JSON-строкой

Инструкции

  1. Создайте таблицу users при помощи SQL-кода (измените mydb на соответствующее значение) и заполните ее тестовыми данными.
  2. Скопируйте login.html и login.js в папку htdocs вашего Web-сервера. Название папки может быть другим и зависит от настроек вашего Web-сервера.
  3. Скопируйте login.pl в папку cgi-bin вашего Web-сервера. Название папки может быть другим и зависит от настроек вашего Web-сервера.
  4. Измените первую строку Perl-сценария и введите соответствующую информацию о вашей версии (обычно #!/usr/bin/perl для Unix и #!\Perl\bin\perl.exe для Windows) а также измените mydb, localhost, 2009, mydbusername и mydbpassword на соответствующие значения.
  5. Введите http://your-domain-name_or_localhost/login.html в адресной строке браузера.
  6. Введите правильные и ошибочные значения в поля username и password для проверки различного поведения.

Важно

Убедитесь, что файлы HTML, JavaScript и Perl находятся в одном и том же домене. В противном случае, когда Ajax попытается вызвать ваш Perl-сценарий, отсутствующий в том же домене, что и вызывающий сценарий, нарушится политика same origin и будет возвращена ошибка (переменная data равна null). Кроме того, HTML-файл должен выдаваться Web-сервером по этому же принципу.
Ссылки на более подробную информацию о политике same origin приведены в разделе Ресурсы.


Заключение

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

Ресурсы

Научиться

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=SOA и web-сервисы, Web-архитектура
ArticleID=853187
ArticleTitle=Очень простой вход в систему при помощи Perl, jQuery, Ajax, JSON и MySQL
publish-date=12212012