Тройная защита для вашей семьи!
В прошлый раз мы сделали собственный генератор паролей: в него скармливался адрес любого сайта и он выдавал вариант пароля, который можно использовать на этом сайте. Хитрость в том, что благодаря секретному слову и меняющемся адресам можно было сделать пароль уникальным, и никто бы не смог его подобрать по словарю.
В основе генератора лежал алгоритм хеширования — когда любую строку можно зашифровать так, чтобы потом невозможно было восстановить исходный текст. Даёшь ему любой текст, а он тебе что-то такое: 88A42764A5ADE6FF2B27D2981A58A24A — вот это и было основой пароля.
У нашего генератора был большой потенциал для роста и доработок. Сегодня мы добавим в генератор новые возможности и повысим безопасность алгоритма. Вот что мы сделаем:
- добавим опцию использования спецсимволов в паролях (некоторые сайты это требуют);
- сделаем некоторые буквы большими для большей безопасности;
- сделаем так, чтобы пароль создавался сам при каждом новом символе в секретном слове;
- сделаем так, чтобы программа выдавала удобный в использовании пароль (три группы по три символа, между ними — дефисы).
За основу возьмём исходный код из прошлой статьи.
Прокачиваем внешний вид генератора
Сразу сделаем всё в визуальной части страницы, чтобы потом к ней не возвращаться.
Нам нужно добавить поле, куда пользователь будет вводить секретное число. Работать оно будет так: берём пароль, разбиваем его на группы по три символа, берём секретное число и, начиная с него, берём три группы символов. Между группами вставляем дефис, чтобы получился пароль вида abc-def-ghj. Его легче запомнить, к тому же он зависит от секретного числа: новое число — новый пароль.
Нужный фрагмент мы вставим после поля ввода кодового слова. Обратите внимание — у нас поменялся тип поля. Раньше был текст, а теперь число — это значит, что туда можно будет ввести только цифры. Это сделано для того, чтобы никто туда случайно не ввёл буквы и программа не сломалась. Можно, конечно, настроить ручную проверку введённых данных, но в нашем случае это уже избыточно.
Второе добавление — галочка, которая показывает, нужно нам использовать в пароле спецсимволы (%:*#@%&) или нет. Логика простая: галочка стоит — добавляем спецсимволы в пароль.
Сохраняем изменения и обновляем страницу с генератором:
Готовим скрипт
Мы будем обращаться к элементам по их именам, а значит, нам нужно подключить jQuery:
Затем немного изменим наш блок с переменными, добавим, чего не хватает, чтобы этот блок выглядел так:
// задаём переменные, где будем хранить адрес сайта, кодовое слово, секретное число…
var site, salt, secnum;
// …исходные текстовые данные для пароля и сам пароль
var text, password;
// переменная для временного хранения исходного пароля
var sourcepass;
// спецсимволы, которые добавим в пароль, если нужно
var symbols;
symbols = '%:*#@%&';
Сразу выдаём пароль
Мы хотим, чтобы при каждом новом символе в кодовом слове новый пароль создавался на лету. Для этого используем обработчик событий addEventListener:
А теперь подумайте: как повесить такой же обработчик событий на поле с числом и на поле с галочкой?
Прокачиваем сам генератор
Раз мы вводим секретное число, надо сразу его обработать и запомнить в отдельной переменной. Это число влияет на выбор начальной тройки для пароля и не может быть меньше единицы:
// вводим секретное число
secnum = document.getElementById('secnumber').value;
// нельзя стартовать с нулевой тройки чисел или меньше
if (secnum < 1) {secnum = 1};
Раз мы будем модифицировать пароль, который в самом начале получаем с помощью MD5-функции, то сохраним его в другой переменной. На её основе мы получим нужный нам модифицированный пароль. Заодно очистим переменную с финальным паролем:
// на основе этой строки с помощью функции md5, которую мы подключили в самом начале, создаём пароль
sourcepass = md5(text);
// обнуляем переменную, где будет храниться изменённый пароль
password = '';
Настало время добавить большие буквы и спецсимволы. Чтобы выбрать, какие буквы делать большими, мы возьмём остаток от деления нашего секретного числа на 3 и полученное число примем за шаг. Как только доходим до нового шага — делаем букву большой. Со спецсимволами тоже всё просто: каждый раз проверяем, стоит галочка или нет. Если стоит — добавляем их на каждой третьей итерации цикла. Выбор спецсимвола тоже зависит от секретного числа.
Разбиваем пароль на тройки
Здесь вся сложность в том, чтобы предусмотреть такой вариант: секретное число больше, чем количество троек в пароле. В этом случае мы по кругу проходим все тройки столько раз, сколько нужно пока не закончится секретное число, и начинаем с текущей позиции. Если тройки закончатся в процессе — вернёмся в начало и будем брать их оттуда. Весь код добавляем в ту же функцию generate():
Собираем весь код вместе и смотрим, что получилось:
Готовый код здесь
В финальной статье мы сделаем из этой страницы отдельное приложение, которое можно запустить на компьютере или на телефоне!
Подписывайтесь на наш канал, если дочитали до конца!
