Індикатор надійності паролів

16

Від автора: створюючи механізм реєстрації та авторизації на сайті, завжди необхідно дбати про безпеку, а саме, про надійність паролів, придуманих користувачами. Але що ж робити, якщо користувачі не знають, яким повинен бути хороший пароль. Звичайно, вибираючи той чи інший пароль, користувач сам піклується про свою безпеку. Але все ж, ми, як розробники, повинні підказати йому, який пароль хороший, надійний, а який — ні. Тому в даному уроці ми з Вами створимо механізм перевірки та виведення на екран ступеня надійності пароля.

Індикатор надійності паролівІндикатор надійності паролів

1. Підготовка до роботи

Отже, для уроку нам потрібна будь-яка html-сторінка з полів для введення пароля. Цю сторінку я вже підготував, ось її вихідний код (файл – index.php):

Надійність пароля

Перевірка надійності пароля

Пароль:

І, власне, її вигляд в браузері:

Індикатор надійності паролів

Тепер давайте визначимося по логіці роботи нашого індикатора надійності паролів. Розробляти даний скрипт, ми будемо за допомогою мови javaScript бібліотеці jQuery. Звичайно, аналогічне, можна виконати і засобами мови PHP, тобто при кожному введеному символі пароля, передавати асинхронним способом дані на сервер, і певним чином їх обробляти. Але, на мій погляд – це не раціонально, так як наша задача підказати користувачеві надійність введеного пароля, і для цього не навіщо використовувати сервер – можливостей браузера цілком достатньо.

Тому першим ділом давайте завантажити бібліотеку jQuery, для цього переходимо на офіційний сайт http://jquery.com/, потім переходимо по посиланню Download jQuery і далі клікаєм по посиланню Download the compressed, production jQuery 1.10.1. При цьому скочується стисла версія бібліотеки (стисла версія – це версія jQuery, з вихідного коду якої видалені всі зайві символи – переклади рядків, прогалини тощо). В корені нашого сайту створимо папку js (для зберігання скриптів, написаних на мові javascript) і в неї збережемо завантажену бібліотеку.

Для тих, хто не знає бібліотека jQuery – це спеціальна бібліотека, написана на мові javaScript, яка містить безліч функцій і методів, за вибіркою, що зміни, і іншим різним маніпуляціям з елементами веб-сторінок.

Тепер необхідно лише підключити дану бібліотеку до нашого скрипта:

Також давайте створимо порожній файл, у якому будемо вести кодування на мові javascript. Назвемо його script.js і аналогічно підключимо до нашої сторінці:

Потім давайте в корені нашого сайту, створимо папку css, в якій ми будемо зберігати файл стилів style.css. У цьому файлі ми з Вами створимо кілька правил для правильного відображення індикатора надійності пароля. Також давайте підключимо даний файл (поки порожній) до нашого сайту:

Далі давайте створимо два порожніх блоку, які будуть використовуватися для відображення ступеня надійності пароля:

Блок з ідентифікатором result необхідний для текстового опису ступеня надійності пароля. Блок з ідентифікатором bg_res буде графічно відображати надійність пароля. Але про це далі по ходу уроку.

2. Логіка роботи скрипта

Отже, я пропоную виводити користувачеві повідомлення про надійність його пароля динамічно, тобто після кожного введеного або вилученого їм символу. Таким чином вводячи нові символи, він буде бачити як змінюється ступінь надійності його пароля. Переходимо в файл script.js і додамо наступний код:

$(document).ready(function () {
$(«#pass»).keyup(function() {
var pass = $(this).val();
$(«#result»).text(pass);
});
});

Як зазвичай починаємо з коду, який необхідний для роботи з бібліотекою jQuery, а саме вибираємо елемент document (вся наша веб-сторінка), і описуємо обробник події ready(). Даний обробник спрацює після повного завантаження нашої сторінки, іншими словами, коли завантажитися веб-сторінка, виконається функція описана всередині нього. У тілі даної функції ми і ведемо кодування.

Далі, використовуючи jQuery, вибираємо текстове поле для введення пароля, і описуємо обробник події keyup(). Даний обробник спрацює, коли буде відтиснута клавіша на клавіатурі. Тобто, як тільки користувач натисне клавішу введення нового символу пароля, а потім опустить її – спрацює цей обробник події, і виконається функція, описана в ньому. У цій функції, для початку, ми отримаємо ті дані, що користувач вводить у поле для введення пароля.

Для цього, використовуємо ключове слово this, яке вказує на поточний вибраний елемент, і викликаємо метод val(). Даний метод (якщо нічого не передавати йому параметром) поверне значення атрибута value() вибраного елемента. А це те що нам і потрібно – дані, які користувач вводить у поле для введення пароля. І зберігаємо в змінну pass.

Для перевірки давайте виберемо блок з ідентифікатором result і за допомогою методу text(pass) вставимо в нього ті дані, які ввів користувач. Метод text() дозволяє вставити в обраний блок текст, який передається йому параметром. Отже, давайте подивимося, що у нас вийшло:

Індикатор надійності паролів

Як Ви бачите, при введенні пароля – його значення відображається в блоці з ідентифікатором result, при чому, динамічно — з кожним новим символом, ми отримуємо нове значення.

Тепер давайте визначимося, скільки ступенів надійності пароля, ми з Вами будемо показувати. Отже, ступеня надійності пароля:

Пароль повинен складатися не менше ніж з 8 символів.

Пароль повинен містити як маленькі, так і великі латинські літери.

Пароль повинен містити хоча б одну цифру.

Пароль повинен містити хоча б один символ.

Тепер, дивіться, ми з Вами знаємо який пароль, ввів користувач (або частину пароля), далі нам необхідно виконати перевірку даного пароля і визначити ступінь його надійності і власне вивести її на екран.
Для перевірки ми з Вами використовуємо регулярні вирази.

Регулярні вирази призначені для опису фрагментів тексту, або рядків, що можна використовувати в пошуку, заміни і т. д. У даному уроці ми з Вами не будемо детально розбирати теорію регулярних виразів, так як на це потрібно багато часу. Ми розглянемо лише ті моменти, які необхідні для даного уроку.

Отже, для того що б дізнатися ступінь надійності пароля, нам необхідно скласти чотири шаблону регулярних виразів – для кожного ступеня надійності. Іншими словами, ми повинні перевірити, наприклад, чи є в паролі хоча б одна цифра або символ. Отже, давайте складемо регулярний вираз для перевірки наявності маленьких літер латинського алфавіту пароля:

var small = «([a-z]+)»;

Отже, дивіться, квадратні дужки відповідають одному з тих символів, що перераховані всередині, наприклад [0123456789] – відповідає одній цифрі, цей вираз можна згорнути в таку послідовність [0-9]. У нашому випадку [a-z] – відповідає будь маленької букви від a до z. Далі, знак » + » означає, що передує символ може входити в рядок один і більше число раз. Тобто ми шукаємо один або кілька маленьких літер латинського алфавіту. Далі весь вираз беремо в дужки. Круглі дужки служать для логічного об’єднання частин регулярного виразу.

Тепер складаємо за аналогією шаблон регулярних виразів для пошуку великих літер латинського алфавіту:

var big = «([A-Z]+)»;

Тут все аналогічно, першим виразом, за винятком того, що зазначений діапазон великих латинських букв. Далі створюємо шаблон для перевірки наявності хоча б однієї цифри в паролі:

var numb = «([0-9]+)»;

І останній шаблон, використовуючи який ми виконаємо пошук символів у введеному паролі:

var vv = /\W/;

Для створення шаблону ми використовуємо спеціальний символ \W, який відповідає всім символам, які не потрапляють в діапазон звичайного символьного класу, тобто всі символи, крім маленьких і великих букв і цифр. Отже, з шаблонами ми з Вами розібралися, тепер давайте подивимося, як ми можемо їх використовувати. Переходимо в файл script.js і змінимо його код наступним чином:

$(document).ready(function () {
$(«#pass»).keyup(function() {
var pass = $(«#pass»).val();
$(«#result»).text(check(pass));
});
function check(pass) {
var protect = 0;
if(pass.length < 8) {
$(«#bg_res»).removeClass();
$(«#bg_res»).addClass(‘red’);
return «Слабкий»;
}
//a,s,d,f
var small = «([a-z]+)»;
if(pass.match(small)) {
protect++;
}
//A,B,C,D
var big = «([A-Z]+)»;
if(pass.match(big)) {
protect++;
}
//1,2,3,4,5 … 0
var numb = «([0-9]+)»;
if(pass.match(numb)) {
protect++;
}
//[email protected]#$
var vv = /\W/;
if(pass.match(vv)) {
protect++;
}
if(protect == 2) {
$(«#bg_res»).removeClass();
$(«#bg_res»).addClass(‘yellow’);
return «Середній»;
}
if(protect == 3) {
$(«#bg_res»).removeClass();
$(«#bg_res»).addClass(‘green’);
return «Хороший»;
}
if(protect == 4) {
$(«#bg_res»).removeClass();
$(«#bg_res»).addClass(‘green_v’);
return «Високий»;
}
}
});

Зверніть увагу, що в самому початку параметром методу text(), передається, що поверне функція check(). Дана функція приймає параметром пароль, який вводить користувач (змінна pass), і буде виконувати перевірку надійності цього пароля. За результатами перевірка вона поверне повідомлення — ступінь надійності пароля. Тепер давайте розглянемо роботу цієї функції:

спочатку створюємо змінну protect — це лічильник надійності пароля.

Далі виконуємо перевірку — якщо кількість символів введеного пароля менше ніж 8, повертаємо рядок Слабкий (тобто користувач ввів слабкий пароль). Але перед цим, за допомогою jQuery, вибираємо блок з ідентифікатором bg_res, далі видаляємо у нього всі задані класи, використовуючи метод removeClass() (даний метод використовується для видалення класів у обраних блоків). Видаляти класи необхідно, так як з кожною ступенем надійності пароля, ми будемо блоку з ідентифікатором bg_res, додавати певний клас. Потім знову ж вибираємо даний блок і додаємо йому клас red, використовуючи метод addClass() (даний метод використовується для додавання елемента, класу, ім’я якого передається параметром). Відповідні класи ми ще з Вами опишемо у файлі style.css

Далі використовуючи метод match(str), перевіряємо відповідає пароль введений користувачем, шаблоном регулярних виразів, а саме, чи є в паролі малі латинські літери. Метод match(str) застосовується для пошуку збігів рядка з шаблоном регулярного виразу, яке передається йому параметром. Якщо збіг знайдено, даний метод повертає масив знайдених збігів, якщо ж нічого не знайдено, то повертається NULL. Якщо умова здійснилось, значить пароль дійсно входять малі букви латинського алфавіту, а значить необхідно збільшити на одиницю змінну protect++.

Далі аналогічно виконуємо перевірку наявності в паролі великих літер латинського алфавіту, цифр і символів. Якщо ж знайдені збіги означає змінну protect збільшуємо на одиницю.

Потім потрібно просто перевірити, яке значення міститься в змінній protect. Тут вже для себе визначитеся, яке значення даної змінної буде відповідати певній ступеня надійності пароля. Ми зробимо так. Якщо значення змінної дорівнює 2, отже повернемо, як результат відпрацювання функції — рядок Середній. Якщо ж змінна protect дорівнює 3 — значить повернемо рядок Хороший. І нарешті, якщо значення змінної дорівнює 4 — значить це максимальна ступінь надійності пароля — повертаємо рядок Високий. Перед кожним поверненням значення, до блоку з ідентифікатором bg_res додаємо відповідний клас. Клас відповідає певній ступеня надійності (також не забуваємо, видаляти класи, за допомогою методу removeClass()).

Тепер давайте перейдемо в браузер і подивимося. Що у нас вийшло:

Індикатор надійності паролів

Як Ви бачите логіка скрипта успішно відпрацьовує, тепер потрібно додати класи, які у нас додаються і тим самим графічно відобразити ступінь надійності пароля.

Ідея полягає в тому, що б під рядком опису, відображати горизонтальну смугу (різних кольорів), і чим вище ступінь надійності пароля, тим більшої ширини виводиться смуга. Отже, переходимо в файл style.css і додамо наступний код:

#result {
color:#074776;
font-size:18px;
font-weight:bold;
}
#bg_res {
width:200px;
height:10px;
margin:0px;
background-image:url(«../image/bg.jpg»);
background-repeat: no-repeat;
background-position:-200px;
}
.red {
background-position:-150px 0px !important;
}
.yellow {
background-position:-100px -10px !important;
}
.green {
background-position:-30px -20px !important;
}
.green_v {
background-position:0px -20px !important;
}

У вигляді горизонтальної смуги, виступає звичайне зображення шириною 200 пікселів і висотою 30 пікселів (дане зображення, я заготовив раніше, і в исходниках до уроку воно буде). Використовуючи css правила, ми для кожного ступеня надійності, буде переміщати зображення, щоб горизонтальна смужка, була чимось схожа на прогрес виконання яких-небудь дій.

Тепер давайте перейдемо в браузер і подивимося, що у нас вийшло:

Індикатор надійності паролів

Отже, як Ви бачите ступінь надійності пароля, досить таки пристойно виводиться на екран — все нормально відпрацьовує.

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

На цьому будемо з Вами прощатися. Всього Вам доброго і до нових зустрічей!!!!