Add Touch ID Authentication To An Ionic 2 Mobile App

by - May 31, 2016

Seems you want to make better use of your iOS devices touch id functionality! No one is to be blamed for this because I also find my iPad Air 2’s fingerprint reader incredibly useful. Earlier, what I wrote about using touch id for authentication with Ionic Framework 1 has become a passe! With but with Ionic 2 being all the rage now, I realised we were due for an update.

Now, we will see ways to authenticate our Ionic 2 application using the iOS touch id features and Angular 2.




Before starting, let me be clear with the fact that this will only work with iOS as of now.
Though Android devices with fingerprint readers are making their visiblity, the Apache Cordova plugins are still progressing.
CLearly, touch id features are not supported in all iOS devices and versions.

One needs to have an alternative while adding this feature into your app.

Having mentioned all this, let’s create a new Ionic 2 project from our Command Prompt (Windows) or Terminal (Mac and Linux) by executing the following:

Create Fresh Ionic 2 ProjectShell
  ionic start TouchProject blank --v2 --ts
  cd TouchProject
  ionic platform add ios


Two important things to note here. Using a Mac is a must to add and build for the iOS platform.
You must be using the Ionic CLI that supports Ionic 2 projects.

Now, add the the touch id plugin. We are going to use the Apache Cordova touch id plugin created by Lee Crossley.
This can be added by executing the following:

Add Touch ID PluginShell
  ionic plugin add cordova-plugin-touchid


If you didn’t take notice from the --ts flag when we created our project, we’re going to be developing with TypeScript instead of pure JavaScript.


The project’s app/pages/home/home.html and app/pages/home/home.ts files is going to take up all our time. The first being the UI file and the second being the logic file. Let’s start with the logic file.

Open app/pages/home/home.ts and include the following code:

app/pages/home/home.tsJavaScript
  import {Page, Platform, NavController, Alert} from 'ionic-angular';
  import {NgZone} from 'angular2/core';
 
  declare var touchid: any;
 
  @Page({
    templateUrl: 'build/pages/home/home.html'
  })
  export class HomePage {
    authenticated: boolean;
    constructor(ngZone: NgZone, platform: Platform, navController: NavController) {
        this.authenticated = false;
        platform.ready().then(() => {
            touchid.checkSupport(() => {
                touchid.authenticate((result) => {
                    ngZone.run(() => {
                        this.authenticated = true;
                    });
                }, (error) => {
                    navController.present(Alert.create({
                        title: "Attention!",
                        subTitle: error,
                        buttons: ["Close"]
                    }));
                }, "Please Authenticate");
            }, (error) => {
                navController.present(Alert.create({
                    title: "Attention!",
                    subTitle: "Touch ID is not supported",
                    buttons: ["Close"]
                }));
            });
        });
    }
  }


Let’s break this down because it could get weird.

As of right now both Ionic 2 and Angular 2 are beta. Its is unclear whether he release will have stability. But without forcing and update with the NgZone class as of now data bindings may not refresh. We can include the NgZone class with the following line:

app/pages/home/home.tsJavaScript
  import {NgZone} from 'angular2/core';


Since we’re using TypeScript, not all JavaScript libraries will exist in DefinitelyTyped. No idea if this particular library exists, but lets assume it does not. This is why we must first declare the library like so:

app/pages/home/home.tsJavaScript
  declare var touchid: any;

We are sure to get errors if we don’t use DefinitelyTyped or declare our JavaScript class


Hiding all elements of the UI without being authenticated will surely show the usefulness of authentication. When the authenticated variable is false hide everything, otherwise show it.

Because the plugin uses native code we must wrap it inside a platform.ready. This implies that the plugin code won’t try to run until our device is ready. As mentioned earlier, it is advisable to do a check first as not all iOS devices support touch id functionality.

For this, we can run the asynchronous touchid.checkSupport function.
We will show an alert if its not supported; else we'll start the authentication process:

app/pages/home/home.tsJavaScript
  touchid.authenticate((result) => {
    ngZone.run(() => {
        this.authenticated = true;
    });
  }, (error) => {
    navController.present(Alert.create({
        title: "Attention!",
        subTitle: error,
        buttons: ["Close"]
    }));
  }, "Please Authenticate");


If authentication succeeds we will need to set our authenticated variable to true. However, due to the binding issues I mentioned earlier we’ll need to wrap it in the NgZone method. If we don’t do this, the front-end may not recognized that our variable changed.

Now we can jump into the front-end code. Open app/pages/home/home.html and add the following:

app/pages/home/home.htmlXHTML
  <ion-navbar *navbar>
    <ion-title>
        Home
    </ion-title>
  </ion-navbar>
 
  <ion-content class="home">
    <ion-card *ngIf="authenticated == true">
        <ion-card-header>
            Card Header
        </ion-card-header>
        <ion-card-content>
            Hello World
        </ion-card-content>
    </ion-card>
  </ion-content>

 
Pretty much everything here is the default. We only included *ngIf="authenticated == true" to determine whether or not we should show the card.


Conclusion

We just saw how to include iOS touch id support in our Ionic 2 mobile application. I had previously written about doing this in an Ionic Framework 1 application, but with Angular 2 here I figured it would be a good idea to demonstrate how to do this with TypeScript in Ionic 2.

Although available for many iOS devices, touch id is not available on all. It is a good idea to use touch id as an addition, but not a total replacement for other forms of authentication.

You May Also Like

0 comments