Nowadays many mobile devices come with the fingerprint sensor. You can use the fingerprint authentication to validate the user instead of the security code. Remembering security code is tough in these days. Why because we have so many logins with different mobile and web applications. Remembering all the password is very difficult. So you can use this feature to authenticate the user.

The Ionic 2 comes with fingerprint native plugin. So you can use this feature with fingerprint-enabled mobile devices. However, you can not use this feature with old mobiles, which does not have the fingerprint sensor.

So consider this before designing your application with fingerprint only authentication. You can check whether the device had fingerprint option or not using the fingerprint plugin. If the device had fingerprint option you can set this as default authentication or else you can show the security code option.

Fingerprint plugin preview using the Android Mobile(Moto G4 Plus)

 

Create new Ionic 2 project using.

ionic start fpauth blank --v2

Add the fingerprint plugin to the project.

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

Import the installed plugin to the app.module.ts file.

import { FingerprintAIO } from '@ionic-native/fingerprint-aio';

Add the fingerprint class to the provider using.

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

Create a button with click event in the home.html file.

<button ion-button (click)="callfp()">Fp Auth</button>

Import the fingerprint class to the home.ts file.

import { FingerprintAIO } from '@ionic-native/fingerprint-aio';

Create an object reference in the constructor using.

constructor(private faio: FingerprintAIO) { }

Create a function which uses the fingerprint authentication to authenticate the user.

callfp()
{
this.faio.show({
clientId: 'Fingerprint-Demo',
clientSecret: 'password', //Only necessary for Android
disableBackup:true //Only for Android(optional)
})
.then((result: any) => alert(JSON.stringify(result)))
.catch((error: any) => alert(JSON.stringify(error)));

}

That's all. You are done. Now add the Android platform to the project using.

ionic platform add android

Generate the APK using the below command.

ionic build android

Deploy the generated APK file to the android mobile and test it.

Tested Device:

Moto G4 Plus.

Supported Platform:
1. Android
2. iOS

Full source code(home.ts)

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FingerprintAIO } from '@ionic-native/fingerprint-aio';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(private faio: FingerprintAIO) { }

callfp()
{
this.faio.show({
clientId: 'Fingerprint-Demo',
clientSecret: 'password', //Only necessary for Android
disableBackup:true //Only for Android(optional)
})
.then((result: any) => alert(JSON.stringify(result)))
.catch((error: any) => alert(JSON.stringify(error)));

}

}


Below are the Ionic 2 software version information while writing this tutorial.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1

Note:  Ionic Framework Version is very important to generate the APK file. This plugin is tested with Ionic Framework Version 3.0.1. However, some version of Ionic Framework will produce the error while generating the APK.