От автора: создавая механизм регистрации и авторизации на сайте, всегда необходимо заботиться о безопасности, а именно, о надежности паролей, придуманных пользователями. Но что же делать, если пользователи не знают, каким должен быть хороший пароль. Конечно, выбирая тот или иной пароль, пользователь сам заботится о своей безопасности. Но все же, мы как разработчики, должны подсказать ему, какой пароль хорош, надежен, а какой — нет. Поэтому в данном уроке мы с Вами создадим механизм проверки и вывода на экран степени надежности пароля.
1. Подготовка к работе
Итак, для урока нам потребуется любая html страница с полей для ввода пароля. Данную страницу я уже подготовил, вот ее исходный код (файл – index.php):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<? header("Content-Type:text/html;charset=UTF-8");?> <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Надежность пароля</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div class="wrap"> <h1>Проверка надежности пароля</h1> <form> Пароль: <input name="password" id="pass" type="password"/> </form> </div> </body> </html> |
И, собственно, ее вид в браузере:
Теперь давайте определимся по логике работы нашего индикатора надежности паролей. Разрабатывать данный скрипт, мы будем при помощи языка javaScript и библиотеки jQuery. Конечно, аналогичное, можно выполнить и средствами языка PHP, то есть при каждом введенном символе пароля, передавать асинхронным способом данные на сервер, и определенным образом их обрабатывать. Но, на мой взгляд – это не рационально, так как наша задача подсказать пользователю надежность введенного пароля, и для этого не зачем использовать сервер – возможностей браузера вполне достаточно.
Поэтому первым делом давайте скачаем библиотеку jQuery, для этого переходим на официальный сайт //jquery.com/, затем переходим по ссылке Download jQuery и далее кликаем по ссылке Download the compressed, production jQuery 1.10.1. При этом скачается сжатая версия библиотеки (сжатая версия – это версия jQuery, из исходного кода которой, удалены все лишние символы – переводы строк, пробелы и т.д.). В корне нашего сайта создадим папку js (для хранения скриптов, написанных на языке javascript) и в нее сохраним скачанную библиотеку.
Для тех, кто не знает библиотека jQuery – это специальная библиотека, написанная на языке javaScript, которая содержит множество функций и методов, по выборке, изменению, и другим различным манипуляциям с элементами веб-страниц.
Теперь необходимо лишь подключить данную библиотеку к нашему скрипту:
|
1 |
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> |
Также давайте создадим пустой файл, в котором будем вести кодирование на языке javascript. Назовем его script.js и аналогично подключим к нашей странице:
|
1 |
<script src="js/script.js" type="text/javascript"></script> |
Затем давайте в корне нашего сайта, создадим папку css, в которой мы будем хранить файл стилей style.css. В этом файле мы с Вами создадим несколько правил для правильного отображения индикатора надежности пароля. Также давайте подключим данный файл (пока пустой) к нашему сайту:
|
1 |
<link rel="stylesheet" type="text/css" href="css/style.css" /> |
Далее давайте создадим два пустых блока, которые будут использоваться для отображения степени надежности пароля:
|
1 2 |
<p id="result"></p> <p id="bg_res"></p> |
Блок с идентификатором result необходим для текстового описания степени надежности пароля. Блок с идентификатором bg_res будет графически отображать надежность пароля. Но об этом далее по ходу урока.
2. Логика работы скрипта
Итак, я предлагаю выводить пользователю сообщение о надежности его пароля динамически, то есть после каждого введенного или удаленного им символа. Таким образом вводя новые символы, он будет видеть как изменяется степень надежности его пароля. Переходим в файл script.js и добавим следующий код:
|
1 2 3 4 5 6 7 8 9 10 |
$(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 символов.
Пароль должен содержать как маленькие, так и большие латинские буквы.
Пароль должен содержать хотя бы одну цифру.
Пароль должен содержать хотя бы один символ.
Теперь, смотрите, мы с Вами знаем какой пароль, ввел пользователь (или часть пароля), далее нам необходимо выполнить проверку данного пароля и определить степень его надежности и собственно вывести ее на экран.
Для проверки мы с Вами используем регулярные выражения.
Регулярные выражения предназначены для описания фрагментов текста, или строк, что можно использовать в поиске, замене и т.д. В данном уроке мы с Вами не будем подробно разбирать теорию регулярных выражений, так как на это необходимо большое количество времени. Мы рассмотрим только те моменты, которые необходимы для данного урока.
Итак, для того что бы узнать степень надежности пароля, нам необходимо составить четыре шаблона регулярных выражений – для каждой степени надежности. Другими словами мы должны проверить, к примеру, есть ли в пароле хотя бы одна цифра, или символ. Итак, давайте составим регулярное выражение для проверки наличия маленьких букв латинского алфавита в пароле:
|
1 |
var small = "([a-z]+)"; |
Итак, смотрите, квадратные скобки соответствуют одному из тех символов, что перечислены внутри, к примеру [0123456789] – соответствует одной цифре, данное выражение можно свернуть в такую последовательность [0-9]. В нашем случае [a-z] – соответствует любой маленькой букве от a до z. Далее, символ + означает, что предшествующий символ может входить в строку один и более число раз. То есть мы ищем один или несколько маленьких букв латинского алфавита. Далее все выражение берем в круглые скобки. Круглые скобки служат для логического объединения частей регулярного выражения.
Теперь составляем по аналогии шаблон регулярных выражений для поиска больших букв латинского алфавита:
|
1 |
var big = "([A-Z]+)"; |
Здесь все аналогично, первому выражению, за исключением того, что указан диапазон больших латинских букв. Дальше создаем шаблон для проверки наличия хотя бы одной цифры в пароле:
|
1 |
var numb = "([0-9]+)"; |
И последний шаблон, используя который мы выполним поиск символов в введенном пароле:
|
1 |
var vv = /\W/; |
Для создания этого шаблона мы используем специальный символ \W, который соответствует всем символам, которые не попадают в диапазон обычного символьного класса, то есть все символы кроме маленьких и больших букв и цифр. Итак, с шаблонами мы с Вами разобрались, теперь давайте посмотрим как мы можем их использовать. Переходим в файл script.js и изменим его код следующим образом:
|
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 57 58 |
$(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++; } //!@#$ 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 и добавим следующий код:
|
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 |
#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 правила, мы для каждой степени надежности, будет перемещать данное изображение, дабы горизонтальная полоса индикатора, была чем то похожа на прогресс выполнения каких либо действий.
Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:
Итак, как Вы видите степень надежности пароля, довольно таки прилично выводится на экран — все нормально отрабатывает.
Вы когда будете разрабатывать аналогичный скрипт, вначале определитесь со степенями надежности паролей, то есть сколько степеней Вам необходимо, по каким параметрам Вы будете оценивать пароли и т.д
На этом будем с Вами прощаться. Всего Вам доброго и до новых встреч!!!!
