Using a Pin Dialog in Your Ionic Framework Mobile App

Create a pin dialogue using the Apache Cordova PinDialog plugin in your Ionic Framework application.

Nic Raboy

Jul. 20, 15 · Tutorial

Like (0)

Save

5.30K Views

One of my Twitter followers recently asked me how to properly use a pin dialog in their Ionic Framework mobile application. Although I’ve already created a similar article regarding creating a pin unlock screen in an Ionic Framework application, I figured it might be a good idea to show how to do this with an actual dialog instead.

Using the Apache Cordova PinDialog plugin by Paldom we can use native dialogs in our application and accept passwords.

Let’s start by creating a fresh Ionic Framework application using the Command Prompt (Windows) or Terminal (Mac / Linux):

ionic start IonicProject blank
cd IonicProject
ionic platform add ios
ionic platform add android

Note that if you’re not using a Mac, you cannot add and build for the iOS platform.

With the project created, it is time to install the Apache Cordova plugin. With the project as the current working directory for your Command Prompt or Terminal, run the following command:

cordova plugin add https://github.com/Paldom/PinDialog.git

Now technically we can start using the plugin with raw JavaScript, but since Ionic Framework runs off AngularJS, we’re going to install the AngularJS extension set, ngCordova.

In this tutorial I’m going to be using the version of ngCordova from commit c3634c6 on GitHub. You’re welcome to be adventurous and use the latest version, but no guarantees that this tutorial will work with it.

With ngCordova downloaded, copy ng-cordova.min.js into your project’s www/js directory and open the www/index.html file so we can make it look similar to the following:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content ng-controller="ExampleController">
            </ion-content>
        </ion-pane>
    </body>
</html>

Notice that ng-cordova.min.js was included before the cordova.js line. This is very important because if you don’t, it might not function correctly. Also notice how ng-controller="ExampleController" is added as well. We’re going to check out that controller in a moment.

Now open your www/js/app.js file and alter the following line:

angular.module('starter', ['ionic', 'ngCordova'])

You’ll see that we’ve only added ngCordova to the array. The library is now ready for use.

With the file still open, add the following controller:

.controller("ExampleController", function($ionicPlatform, $cordovaPinDialog) {

    var correctPassword = "1337";

    $ionicPlatform.ready(function() {
        $cordovaPinDialog.prompt('Some message here').then(function(result) {
            if(result.input1 === correctPassword) {
                alert("The correct password was entered");
            } else {
                alert("Incorrect password enetered");
            }
        }, function (error) {
            console.error(error);
        });
    });

})

Because the plugin uses native device code we must first wrap it in an $ionicPlatform.ready() to make sure we don’t try to use it too early. You are welcome to use an onDeviceReady() method instead.

In ExampleController we’ve statically set a password to compare against. When the user inputs a numeric value and accepts, the result will be compared against our static password and display a message accordingly.

Conclusion

You’ve now seen two ways of adding pin protection in your Ionic Framework mobile Android and iOS application. In particular we’ve just seen how to protect the application using a native dialog versus a pure CSS and JavaScript implementation.

A video version of this article can be seen below.

Comments