Замок по шаблону на JavaScript.
Всем здравия! Сегодня я хочу показать вам одну очень классную штуку под названием patternLock, которая сделает ваш сайт немного интересней :)
Вы когда-нибудь видели на телефонах защиту, где нужно правильно соединить кривую по точкам, чтобы открыть доступ? Теперь есть возможность сделать такую же защиту и у себя на сайте! Сразу даю ссылку:
http://ignitersworld.com/lab/patternLock.html
Где это, например, может быть использовано? На ум сразу приходят два случая: регистрация/авторизация и капча. На сайте, собственно, эти примеры также есть. Обязательно посмотрите.
Регистрация / Авторизация
На сайте самые первые два квадрата - пример этого случая. В первом из них вы задаете какую-то свою комбинацию, а во втором вы должны ввести точно такую же, чтобы авторизоваться(в примере просто всплывает окошко). Если же вы вводите что-то не так, то кружочки становятся красными и ничего не происходит. Думаю, если вы поставите такую систему регистрации/авторизации на своем сайте, то сможете выделиться на фоне остальных примитивных систем логин/пароль.
Капча
В самом последнем примере вы можете найти случай с капчей. Справа нарисован рисунок, где показано, что и в каком направлении соединять, чтобы успешно пройти капчу. Если капча введена неверна, то всплывает окошко с ошибкой и рисунок меняется. Думаю, это более надежная защита от роботов, чем опять же стандартная капча, где нужно вводить то, что ты видишь на картинке.
В общем, думаю, вы оценили сей продукт и он вам понравился или не понравился. Если первое, то давайте вкратце разберем, как его установить себе.
Установка
Для начала вы должны скачать нужные файлы, нажав на кнопку Download.
Теперь скопируйте код для подключения файла стилей и скриптов на сайте и вставьте его в head.
<link href="patternLock.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="patternLock.js"></script>
Создайте блок div с id=patternContainer и затем ниже проинициализируйте плагин, как показано на сайте
<div id="patternContainer"></div>
<script>
var lock = new PatternLock("#patternContainer");
</script>
Все! Плагин успешно начал работать! Поздравляю!
Вы можете передавать самые разные настройки, указав их вторым параметром. Например, сделать матрицу больше
var lock = new PatternLock('#patternHolder', {matrix:[4,4]});
Другие примеры настроек вы можете посмотреть на сайте разработчика.
Можно указывать функции обратного вызова, отслеживать состояние обработчика и многое другое.
Вот простой пример реализации проверки на правильность ввода:
var lock = new PatternLock("#patternContainer");
lock.checkForPattern('12369', function() {
alert("Приложение разблокировано");
}, function() {
alert("Неправильная комбинация");
});
Теперь, если вы проведете линию от 1 кружка до второго, от второго до 3, от 3 до 6 и затем от 6 до 9, то увидите надпись "Приложение разблокировано", иначе же увидите надпись "Неправильная комбинация". Думаю, вы уже поняли, как проверять человека при авторизации. В базу записывать последовательность, которую он указал при регистрации, а затем просто сверять ее с той, что была введена при авторизации. Все довольно просто.
Итак, на этом все. Надеюсь, вам понравился плагин. Лично мне он очень понравился и я обязательно реализую его в своих новых проектах. Удачи!
-
Создано 08.07.2014 20:11:32
-
Михаил Русаков
Комментарии (1):
Для регистрации/авторизации её лучше не использовать. Ибо это сокращает количество паролей и ускоряет подбор. А для капчи придётся всё равно генерировать изображение с последовательностью, ибо если просто написать текстом 1234 бот просто подставит 1234 в поле где хранится набранная последовательность.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.