Шаблон блокировки, доступный на Android, известный как удивительный, но не так безопасно, это действительно крутой виджет, чтобы обеспечить «ощущение безопасности» для пользователя.
В этой статье мы поделимся с вами полезным плагином, который поможет вам на любой платформе, поддерживающей javascript. Вы можете легко использовать этот виджет на своем веб-сайте, в приложениях Cordova или Ionic.
PatternLock.js
Pattern Lock — это легкий плагин для имитации андроид-механизма блокировки шаблонов для вашего гибридного приложения или для веб-сайта. Его легко настроить и настроить, поэтому вы можете использовать другой тип блокировки шаблона в соответствии с вашими потребностями. API также предоставляет некоторые методы для безопасного использования этого плагина.
Инициализация довольно проста, а плагин хорошо документирован. В следующем примере показано, как проверить шаблон M с таблицей 3×3.
Вам нужно только включить файл css и js (исходный код), тогда структура будет добавлена к элементу DOM с помощью jQuery.
Обратите внимание, что этот пример очень прост и не предоставляет никакой карты:
var lock= new PatternLock('#myDiv',{
matrix:[3,3]
});
var MPattern = '7415369';
// 3 x 3
// [1] [ ] [3]
// [4] [5] [6]
// [7] [ ] [9]
lock.checkForPattern(MPattern,function(){
alert("You unlocked your app");
},function(){
alert("Pattern is not correct");
});
Обратите внимание, что вы можете настроить события во время рисования шаблона, используя событие onDraw в настройках, чтобы что-то с ним сделать или сохранить при первой инициализации. Вы можете использовать Mapper для изменения возвращаемых значений шаблона, например, вместо возврата нормальных значений (1,2,3,4,5,6,7,8,9), для которых мы собираемся изменить его (11 , 12,13,14,15,16 и т. Д.), Очевидно, вы можете реализовать сложную функцию для возврата редких значений, следующих за шаблоном.
var lock = new PatternLock('#patternHolder',{
mapper: {
1:11,
2:12,
3:13,
4:14,
5:15,
6:16,
7:17,
8:18,
9:19
}
});
// or with a function
var lock = new PatternLock('#patternHolder',{
mapper: function(idx){
return idx + 10;
}
});
Наконец, вам нужно настроить его и создать классное приложение.
Повеселись !
