Making a Lock Pattern Login with Ionic and AngularJS

Lately I explained how to create a simple login with username and password in an ionic app. This time, we will change the old looking standard login to a much cooler login: A login with a android like lock pattern. For this, we will include a JS library I found on the internet and jQuery.

But still, everything will be very easy to use! Your result will look something like this(if you add a bit styling):

Include the things we need
The starting point for this tutorial is my last tutorial about a simple login with ionic. If you haven’t followed you can get it on my github repo.

First of all you need to download the loginpattern library created by Sudhanshu Yadav from his github repo. Copy the PatternLock js and css file into your ionic project under www/lib/patternLock.

As the lib needs jQuery, you need to install it. Installing things with bower is the most easy way, so go to your command line from the root of your ionic project and run:

bower install --save jquery

When everything is installed, open your index.html and include everything we need:

    <link href='lib/patternLock/patternLock.css' rel='stylesheet' type='text/css'/>
    <script src='lib/jquery/dist/jquery.js'></script>
    <script src='lib/patternLock/patternLock.js'></script>

If you don’t encounter any problems now, you have set up everything correct. Congratulations! Now we can do the real work.

Showing the dot connector view
To show our login dot view, we must edit the login.html and replace everything with this:

<ion-view view-title='Login' name='login-view'>
  <ion-content class='center'>
      <div class='list card' ng-hide='log_pattern'>
          <div class='item item-icon-left'>
              <i class='icon ion-alert assertive'></i>
              <h2 class='assertive'>Please set your login pattern!</h2>
          </div>
      </div>
      <div id='lockPattern' class='pattern-holder patt-holder'></div>
  </ion-content>
</ion-view>

Here we have a basic view, a list card which will be shown if the user has not yet set his login pattern and the div for the lock pattern view which will set from our controller.
At the moment you will only see the error card showing that you have not set your pattern yet. How to set a pattern without the element? Hard job. So go to your controller.js and add these lines to the LoginCtrl:

    // 1
    $scope.log_pattern = LoginService.getLoginPattern();

    // 2
    var lock = new PatternLock('#lockPattern', {
        // 3
        onDraw:function(pattern){
            // 4
            if ($scope.log_pattern) {
                // 5
                LoginService.checkLoginPattern(pattern).success(function(data) {
                    lock.reset();
                    $state.go('tab.dash');
                }).error(function(data) {
                    lock.error();
                });
            } else {
                // 6
                LoginService.setLoginPattern(pattern);
                lock.reset();
                $scope.log_pattern = LoginService.getLoginPattern();
                $scope.$apply();
            }
        }
    });

Don’t mind the calls to the service, we will add it in the next step. Let’s step through what we just added:

• 1. This is the variable to indicate whether we have already set a pattern, it’s used in the ng-hide in the login.html.
• 2. Here we create our pattern view element. We get our view element through its id #lockPattern.
• 3. The onDraw() function is called when the user has finished drawing his pattern. The pattern variable is just a simple string with numbers of the dots in order by which the user swiped them.
• 4. If the user has already set a pattern, we are going to compare it to the entered one. Otherwise, we will set the pattern as the default.
• 5. We call our LoginService (we will add the needed functions soon) and see if the entered pattern matches the saved pattern. If access is granted, we continue to the dash tab, otherwise the lockview indicates an error.
• 6. If the user has not set his pattern, we make the entered the default pattern with our LoginService. We reset the locks so the view is clear again, and call the $scope.$apply() to update everything.

Ok, now we only need to define our service functions, so open the services.js and add the missing functions:

getLoginPattern: function() {
            return window.localStorage.getItem('login_pattern');
        },
        setLoginPattern: function(pattern) {
            window.localStorage.setItem('login_pattern', pattern);
        },
        checkLoginPattern: function(pattern) {
            var deferred = $q.defer();
            var promise = deferred.promise;

            promise.success = function(fn) {
                promise.then(fn);
                return promise;
            }
            promise.error = function(fn) {
                promise.then(null, fn);
                return promise;
            }

            if (pattern == this.getLoginPattern()) {
                deferred.resolve();
            } else {
                deferred.reject();
            }

            return promise;
        }

For this easy tutorial we just save the pattern as it is in the localStorage of the webbrowser. For the login check we again use the promise pattern from the last tutorial. This is a bit over the top, I know, but on this way you get used to async methods. Most of the time your login will be async, so it’s better to have it already here as you can insert your own requests or stuff more easy.

Now you can run your app and play around with the awesome dots! I added some styling to get a more native looking patternlock, you can find everything in the github project for easy login part 2. The custom styling for the patternlock is in the lib/patternLock/patternLock.css file! The result is a simple clean patternlock view:

Some more notes

We just used the most basic settings of the patternlock library. There are many more options like a 4×4 view or assigning values to the dots and so on. Just check the documentation if you want something more than this!

When you debug things like localStorage, it’s always helpful to see the items and eventually delete keys. I use Chrome browser and can inspect them easy under developer tools as you can see here:

If you want to test the login/logout better, I recommend you alter the tabs.html so you have a tab which brings you back to the login screen:

  <ion-tab title='Logout' icon-off='ion-log-out' icon-on='ion-log-out' href='#/login'>
    <ion-nav-view name='tab-account'></ion-nav-view>
  </ion-tab>

Last, setting a lock pattern should obviously happen after the user has logged in with some credentials, so he can use the pattern after he was once authorized correctly! Maybe I will show a real case with a simple REST server soon if I find time. If you have any wishes for things you would like to see or other ideas, just leave me a comment!

You can find the complete sourcecode in my github project for easy login.

If this tutorial was helpful, follow me on twitter @schlimmson (or your preferred platform) and leave a comment/ tweet it!
Don’t forget to subscribe to my newsletter to receive new posts and infos via mail!

So long,
Saimon