Biometric Authentication (Face & Fingerprint) on iOS and Android using Ionic 3/Angular

Face Auth Implementation on the iPhone X

Aug 08, 2018

Hi guys!

In this tutorial, I’d be explaining how to start up and integrate the Fingerprint and Face Biometric Authentication to an Ionic 3 App (Remember we used to work with Ionic 1?). Well, Ionic has in recent times made several upgrades to their Framework. Ionic 3 is their most stable upgrade for now, with Ionic 4 Beta version already released.

Ionic 3 uses Angular 4.0.0 upward and Typescript to replace the use of AngularJS, and now new Pages, Pipes, Components, Providers etc. are generated using the CLI. Another interesting feature of Ionic 3 is the use of Ionic Native which is a TypeScript wrapper for Cordova/PhoneGap plugins that makes integrating any native functionality you need to your Ionic mobile app easy.

Generating The New App

On your Command Line Interface, run;

ionic start BiometricDemoApp sidemenu

You can then go ahead to navigate into your project, generate and style the pages you want to work with as you wish.

My Demo app has 3/4 pages, with a Login Page which requires a user to input a Username. Once a User clicks on the Login button, the Fingerprint Modal comes up, if it’s an iPhone X the Face Modal comes up.

Once the Fingerprint or Face (for iPhone X) scanned matches the one registered on that device the User is logged in and navigated to the Dashboard page.

You can find the source code to my Demo App on GitHub following the URL below;

https://github.com/NihinlolaFaj/BiometricAuthenticationApp

Integrating The Plugin

When my Demo App is served, it looks like this;

The Login Page of My Demo App
The Login Page of My Demo App

And my project directory looks like;

My Project Directory
My Project Directory

You can now go ahead to install the Cordova Fingerprint AIO Plugin, by running the two commands below on your CLI;

   ionic cordova plugin add cordova-plugin-fingerprint-aio
        npm install --save @ionic-native/fingerprint-aio

Once this is done, this plugin can now be imported into the components it is to be used.

Firstly, it is to be added to the app.Module.ts of the project which is the root module of your application that starts up your project/App. My app.Module.ts looks like this;

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { LoginpagePage } from '../pages/loginpage/loginpage';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SettersandgettersProvider } from '../providers/settersandgetters/settersandgetters';
import { FingerprintAIO } from '@ionic-native/fingerprint-aio';
import { UtilityProvider } from '../providers/utility/utility';

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
LoginpagePage
],

imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
LoginpagePage
],

providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
SettersandgettersProvider,
FingerprintAIO,
UtilityProvider
]
})

export class AppModule {}

And secondly in the TypeScript page/module, it is to be used, it should also be initialized in the constructor of that component. My loginpage.ts looks like this;

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Injectable } from '@angular/core';
import { UtilityProvider } from '../../providers/utility/utility'
import { FingerprintAIO } from '@ionic-native/fingerprint-aio';
import { SettersandgettersProvider } from '../../providers/settersandgetters/settersandgetters';

@IonicPage()
@Component({
selector: 'page-loginpage',
templateUrl: 'loginpage.html',
})

export class LoginpagePage {
constructor(public navCtrl: NavController, public navParams: NavParams, public utility: UtilityProvider, public faio: FingerprintAIO, public setAndGet: SettersandgettersProvider) {
}
}

Implementation Of The Plugin

My “Login” button is tied to a function called login();

<button type="submit" (click)="login()">Login</button>

When this function is called, it does the following;

  • Checks if a user has entered a Username, if not the user is prompted to enter one.
  • Checks if the Fingerprint or Face (iPhone X) feature is available on the device, if not the user is prompted these features are not available on their device.
  • Scan the Fingerprint or Face and compare with the Fingerprint or Face registered on the device. If it matches the User is logged on and navigated to the Dashboard page. Else, the user is prompted of the error.

The login function implementation can be seen below;

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Injectable } from '@angular/core';
import { UtilityProvider } from '../../providers/utility/utility'
import { FingerprintAIO } from '@ionic-native/fingerprint-aio';
import { SettersandgettersProvider } from '../../providers/settersandgetters/settersandgetters';

@IonicPage()
@Component({
selector: 'page-loginpage',
templateUrl: 'loginpage.html',
})

export class LoginpagePage {
constructor(public navCtrl: NavController, public navParams: NavParams, public utility: UtilityProvider,
public faio: FingerprintAIO, public setAndGet: SettersandgettersProvider) {
}

data = { userName: "" }

//Login Function
login(){
if (!this.data.userName)
{
 this.utility.presentAlert("Please enter Username!");
 return;
}

 else {
 //Check if Fingerprint or Face  is available
 this.faio.isAvailable()
  .then(result => {
  if(result === "finger" || result === "face"){
    //Fingerprint or Face Auth is available
    this.faio.show({
      clientId: 'NihinDemoBioAuthApp',
      clientSecret: 'nihinBioAuthDemo', //Only necessary for Android
      disableBackup: true, //Only for Android(optional)
      localizedFallbackTitle: 'Use Pin', //Only for iOS
      localizedReason: 'Please Authenticate' //Only for iOS
  })
.then((result: any) => {
  if(result == "Success"){
   //Fingerprint/Face was successfully verified
   //Go to dashboard
   this.setAndGet.UserName = this.data.userName;
   this.navCtrl.push("DashboardPage")
  }
 else {
  //Fingerprint/Face was not successfully verified
  this.utility.presentAlert(result);
   }
 })

 .catch((error: any) => {
   //Fingerprint/Face was not successfully verified
   this.utility.presentAlert(error);
 });
 }

 else {
   //Fingerprint or Face Auth is not available
   this.utility.presentAlert("Fingerprint/Face Auth is not available on this device!");
   }
  })
  }
 }
}

Below are the implementation screenshots;

Fingerprint Auth Implementation on the iPhone 6
Fingerprint Auth Implementation on the iPhone 6

 

 

Face Auth Implementation on the iPhone X
Face Auth Implementation on the iPhone X

You can go ahead to build the App on both iOS and Android devices to test as it functions on both platforms. This plugin works perfectly for Authenticating both Fingerprint and Face since the next generation of iPhones now makes use of the Face Authentication.

I hope you found this article helpful, and remember the source code of my Demo App can be found on GitHub following the URL below.

https://github.com/NihinlolaFaj/BiometricAuthenticationApp

2 comments

Give your comment here

Your email address will not be published. Required fields are marked *