How to emulate Android Style lock pattern (drag and drop) with jQuery

The lock pattern available on Android, known as awesome, but not so secure, is a really cool widget to provide a "security sensation" for the user.

In this article, we are going to share with you an useful plugin that will do the trick for you on every platform that supports javascript. You can use this widget in your website, Cordova or Ionic apps easily.

PatternLock.js

Pattern Lock is a light weight plugin to simulate android like pattern lock mechanism for your hybrid app or for a website. It's easy to configure and customizable so you can have different type of pattern lock according to your needs. The API also provide some methods to use this plugin securely.

The initialization is pretty simple and the plugin is well documented. The following example shows how to check for a M pattern with a 3x3 table.

You only need to include the css and js (source code) file, then the structure will be appended to the DOM element using jQuery.

Note that this example is very simple and doesn't provide any mapper:

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");
});

Note that you can customize the events while the pattern is drawn using the onDraw event on the settings to do something with it or save it in the first initialization. You can use the Mapper to change the returned values of the pattern, for example instead of return the normal values (1,2,3,4,5,6,7,8,9) we are going to change it for (11,12,13,14,15,16, etc), obviously you can implement a complex function to return rare values that follows a pattern.

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; 
    } 
});

Finally is up to you to customize it and create an awesome app.