Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Add Touch ID Authentication To Your Ionic Framework App

TwitterFacebookRedditLinkedInHacker News

I recently picked up an iPad Air 2 to replace my ancient Android tablet. My first serious iOS device since my iPod Touch. A feature that I’m really growing to love on my iPad Air 2 is the touch id functionality for signing into the device and various applications.

How do we incorporate this touch id functionality into our own iOS applications? More importantly, how do we do this in Ionic Framework? It is not difficult, because we’re lucky to have an Apache Cordova plugin called cordova-plugin-touchid by Lee Crossley that does the work for us.

The tutorial is going to be a little different from my others in a sense that it is only for iOS. If your looking for an Android solution, look elsewhere as you’ll only find iOS here.

Let’s start by creating a new Ionic Framework project from the Terminal or Command Prompt:

ionic start IonicProject blank
cd IonicProject
ionic platform add ios

Remember, this is going to be an iOS application, so if you’re not developing on a Mac, this will not work for you.

Next we need to install the touch id plugin into our project:

cordova plugin add cordova-plugin-touchid

At this point, you can technically start using the plugin in your project, but since we’re using Ionic, we probably want to do things a little more AngularJS-like. Let’s go ahead and install the AngularJS extension set, ngCordova, into our project.

The latest version of ngCordova at the time of writing this is commit c3634c6 on GitHub. You’re welcome to use the latest version, but it may or may not work depending on any changes that might be introduced into the library.

After you download ngCordova, you need to copy ng-cordova.min.js into your project’s www/js directory, and add the following to your www/index.html file:

<!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">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="js/ng-cordova.min.js"></script>
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <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 the two highlighted lines. It is very important that ng-cordova.min.js appears before cordova.js, otherwise you’re going to get strange results. Also take note that the <ion-content> tags now contain an ExampleController which we’re going to add in a moment.

In your project’s www/js/app.js file we need to inject ngCordova into the AngularJS module. This can be done like so:

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

At this point ngCordova is set up and ready to go.

With your project’s www/js/app.js file still open, include the following controller:

.controller("ExampleController", function($scope, $ionicPlatform, $cordovaTouchID) {

    $ionicPlatform.ready(function() {
        $cordovaTouchID.checkSupport().then(function() {
            $cordovaTouchID.authenticate("You must authenticate").then(function() {
                alert("The authentication was successful");
            }, function(error) {
                console.log(JSON.stringify(error));
            });
        }, function(error) {
            console.log(JSON.stringify(error));
        });
    });

})

A few things about this controller. First you’ll notice our use of the $ionicPlatform.ready method. This is because the plugin uses native device code and needs to be ready before trying to use it. When we’re sure the application is ready, we must check to make sure the device supports Touch ID through the $cordovaTouchID.checkSupport method. If supported we’ll then ask for authentication through the $cordovaTouchID.authenticate method.

Conclusion

If you’ve got a device with hardware support running iOS 8.0+, then you can make use of the touch id functionality in your Ionic Framework mobile application. This functionality will not work with Android, and must be tested with a physical iOS device, not a simulator.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site