- SQL
- HTML
- Посилання на CSS
- Посилання на JavaScript
- Форма входу в систему
- відображення результату
- Малюнок 2. Знімок екрана з повідомленням про помилку, повернутим JavaScript-кодом
- Перевірка коду
- JavaScript
- Лістинг 3. login.js
- Лістинг 4. login.pl
- Малюнок 5. Знімок екрану з JSON-рядком
- висновок
- Ресурси для скачування
З моменту появи всесвітньої павутини розробники намагаються оснастити свої Web-сайти новими функціональними можливостями і віджетами для залучення уваги користувачів і полегшення їхнього життя за допомогою впровадження новітніх технологій. Сьогодні звичайний Web-користувач крім усього іншого робить покупки, шукає інформацію, реєструється на форумах і в співтовариствах, грає в інтерактивні ігри та спілкується з іншими користувачами по мережі Інтернет. У більшості випадків користувач повинен зареєструватися на Web-сайті та увійти в свій обліковий запис. Ці базові функції вимагають особливої уваги - вони повинні бути простими, швидкими і безпечними для користувача. З точки зору розробника реалізація цих функцій спрощується з кожним днем, завдяки новим технологіям.
У статті розповідається, як реалізувати на вашому Web-сайті дуже просту функціональність входу в систему, об'єднавши кілька технологій.
Реалізація складається з 4 розділів.
- В розділі SQL описується, як створити в базі даних таблицю для зберігання інформації про користувачів.
- В розділі HTML реалізуються посилання на CSS і JavaScript, а також форма входу в систему.
- В розділі JavaScript реалізується Ajax-фрагмент, який використовує jQuery і JSON.
- Нарешті, в розділі Perl реалізується взаємодія між користувачем і базою даних.
В розділі інструкцій наведені покрокові інструкції по об'єднанню всіх розділів. Передбачається, що ви знайомі з перерахованими технологіями і маєте досвід розробки Web-додатків. Якщо у вас є достатній досвід використання перерахованих технологій, можете перейти безпосередньо до розділу інструкцій.
Що не включене до статті
Важливо відзначити, що безпека, наприклад, перевірка інформації, що вводиться користувачем, на можливі загрози для даних і системи, не є темою цієї статті. Тому ніякі методи шифрування для збереження призначених для користувача паролів не застосовуються. Однак настійно рекомендується досліджувати можливі уразливості системи і додати в свій код необхідну функціональність.
SQL
Оскільки дана методика входу в систему є дуже простий, таблиця users містить тільки три поля; унікальний ідентифікатор (id), унікальне ім'я користувача (username) і пароль (password).
CREATE TABLE '' .'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 '' .'users '(' id ',' username ',' password ') VALUES (1,' username1 ',' password1 '); INSERT INTO '' .'users '(' id ',' username ',' password ') VALUES (2,' username2 ',' password2 '); COMMIT;Якщо ви використовуєте НЕ MySQL, синтаксис SQL-вирази для вашої бази даних може трохи відрізнятися від наведеного вище.
HTML
HTML-файл містить форму входу в систему, а також посилання на файли CSS і JavaScript.
Посилання на CSS
Для простоти в статті основну увагу приділяється дизайну форми входу в систему, а реалізації згаданих вище технологій, тому в ній використовується вже доступний вихідний код з модифікованою ліцензією MIT під назвою Blueprint CSS Framework, що гарантує сумісність з різними браузерами. Природно, є і багато інших безкоштовних CSS-реалізацій для різних проектів в мережі Інтернет.
Посилання на додаткову інформацію про Blueprint CSS Framework наведені в розділі ресурси .
Посилання на JavaScript
Крім бібліотеки jQuery, також використовується JavaScript-файл login.js, який буде розглянуто нижче.
<Script type = "text / javascript" src = "// 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.
відображення результату
Результат входу в систему буде відображатися в тезі div, який прихований під час завантаження і заповнюється пізніше JavaScript-кодом.
<Div id = "loginResult" style = "display: none;"> </ div>Малюнок 2. Знімок екрана з повідомленням про помилку, повернутим JavaScript-кодом
Малюнок 3. Знімок екрана з повідомленням про помилку, повернутим Perl-кодом
Малюнок 4. Знімок екрану з повідомленням про успішну операцію, повернутим Perl-кодом
Лістинг 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 = "// 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.
Лістинг 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.
Лістинг 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 =; host =; port =", "", "") 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-рядок можна перевірити в браузері:
- Змініть $ cgi-> header (-type => "application / json", -charset => "utf-8"); на print $ cgi-> header ;.
- Введіть http: // your-domain-name_or_localhost /cgi-bin/login.pl?username=username1&password=password1 в адресному рядку браузера.
Малюнок 5. Знімок екрану з JSON-рядком
інструкції
- Створіть таблицю users за допомогою SQL-коду (змініть mydb на відповідне значення) і заповніть її тестовими даними.
- Скопіюйте login.html і login.js в папку htdocs вашого Web-сервера. Назва папки може бути іншим і залежить від налаштувань вашого Web-сервера.
- Скопіюйте login.pl в папку cgi-bin вашого Web-сервера. Назва папки може бути іншим і залежить від налаштувань вашого Web-сервера.
- Змініть перший рядок Perl-сценарію і введіть відповідну інформацію про вашу версії (зазвичай #! / Usr / bin / perl для Unix і #! \ Perl \ bin \ perl.exe для Windows) а також змініть mydb, localhost 2009, mydbusername і mydbpassword на відповідні значення.
- Введіть http: // your-domain-name_or_localhost /login.html в адресному рядку браузера.
- Введіть правильні і помилкові значення в поля username і password для перевірки такої різниці у поведінці.
важливо
Переконайтеся, що файли HTML, JavaScript і Perl знаходяться в одному і тому ж домені. В іншому випадку, коли Ajax спробує викликати ваш Perl-сценарій, відсутній в тому ж домені, що і викликає сценарій, порушиться політика same origin і буде повернута помилка (змінна data дорівнює null). Крім того, HTML-файл повинен видаватися Web-сервером за цим же принципом.
Посилання на докладнішу інформацію про політику same origin наведені в розділі ресурси .
висновок
Метою статті є представлення максимально простого і заснованого на сучасних технологіях коду, який можна використовувати в якості відправної точки для реалізації власного сервісу входу в систему. На базі статті можна створити набагато більш розвинену функціональність, включаючи систему захисту. Можливо, після вивчення цієї ідеї ви навіть захочете використовувати інші бази даних і мови програмування.
Ресурси для скачування
Схожі теми
- оригінал статті Very simple login using Perl, jQuery, Ajax, JSON and MySQL (EN).
- Blueprint - це CSS-інфраструктура з модифікованою ліцензією MIT, що гарантує сумісність з різними браузерами.
- jQuery - це кросбраузерності JavaScript-бібліотека, яка (в числі інших функціональних можливостей) спрощує Ajax-взаємодія, сприяючи швидкій розробці Web-додатків.
- Ajax API в jQuery - інформація про те, як виконати асинхронний HTTP-запит (Ajax) в jQuery.
- Остання версія jQuery .
- JSON - полегшений (в порівнянні з XML) формат даних для обміну інформацією між браузером і сервером.
- JSONLint - програма перевірки коректності JSON.
- Captcha - метод перевірки джерела вхідних даних, що надходять з Web-сайту.
- Політика same origin - це концепція системи захисту, що запобігає доступу до методів, які перебувають в різних доменах.
- У статті developerWorks Взаємодія між доменами з використанням JSONP. Частина 1: комбінування JSONP і jQuery для швидкого створення функціональних машапів приведена інформація про обмеження політики same origin (EN).
- Для реалізації коду, відповідного стандартам, W3C надає сервіси Markup Validation Service і CSS Validation Service .
Підпишіть мене на повідомлення до коментарів
And password =?Pl?