<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Замок по шаблону на JavaScript.

Замок по шаблону на 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, то увидите надпись "Приложение разблокировано", иначе же увидите надпись "Неправильная комбинация". Думаю, вы уже поняли, как проверять человека при авторизации. В базу записывать последовательность, которую он указал при регистрации, а затем просто сверять ее с той, что была введена при авторизации. Все довольно просто.

Итак, на этом все. Надеюсь, вам понравился плагин. Лично мне он очень понравился и я обязательно реализую его в своих новых проектах. Удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

Avery Avery 11.07.2014 18:00:35

Для регистрации/авторизации её лучше не использовать. Ибо это сокращает количество паролей и ускоряет подбор. А для капчи придётся всё равно генерировать изображение с последовательностью, ибо если просто написать текстом 1234 бот просто подставит 1234 в поле где хранится набранная последовательность.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.