DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Using a Pin Dialog in Your Ionic Framework Mobile App
Content provided by Couchbase logo

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 user avatar by
Nic Raboy
·
Jul. 20, 15 · Tutorial
Like (0)
Save
Tweet
Share
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

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: