Fingerprint Plugin and Pin lock using Ionic Framework

In this blog I will be sharing with you how to create a pin lock type functionality for your application. This app uses Ionic Framework and aims at securing your application by fingerprint authentication of the user.

This functionality mainly concentrates on the applications that involve transactions/Digital Payments and safeguard user credit/debit from any external harm. Privacy and security are the two main key points which we keep in our mind while downloading any application.
Every one wants that their application should remain inviolable from unauthorised users. Keeping the above in my mind I just created a pin lock and fingerprint authentication using Ionic Framework.

Requirements -

• Ionic Framework 3.0
• Node.js 6.0+
• Fingerprint AIO Cordova plugin

Setting it up-

• We will start by creating a new ionic project

ionic start pinlock blank;

• Also need to install Fingerprint AIO plugin to make the fingerprint process working-

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

• Also define the plugin provider in /src/app/app.module.ts inside your providers list

import { FingerprintAIO } from '@ionic-native/fingerprint-aio';
....
providers: [
    FingerprintAIO,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]

• Above is a glimpse of the Pin lock screen. I have simply used ionic-buttons with basic use of cascade style sheets.

<ion-row class="row1">
   <ion-col col-md-4>
      <button ion-button outline class="button"        (click)="add('1')">1</button>
  </ion-col>
   <ion-col col-md-4>
     <button ion-button outline class="button (click)="add('2')">2</button>
   </ion-col>
   <ion-col col-md-4> 
      <button ion-button outline class="button" (click)="add('3')">3</button>
   </ion-col>
</ion-row>
.....
// css class
.button{
   border: 50%;
   width: 70px;
   border-radius: 50%;
   height: 70px;
}

I have added a <ion-row> tag and inside row I have added 3 columns <ion-col>. And inside column I have placed buttons and given it number for example 1,2,3 … etc. There is also a click function given to buttons by naming add().

• By following the above pattern you can create all the remaining buttons.

Nowadays almost each smart phone is featured with finger scan option.
By the help of Ionic Native “Fingerprint AIO Cordova plugin” I have added this feature into the app. You can skip the burden of remembering pin code and simply use your finger to unlock the app as it will keep the user login credentials auto saved. But it will only work on finger-scan compatible devices.
I hope this post could help you in every possible way. For any assistance get full code from GitHub.