Ionic 2 /Ionic 3 - Fingerprint Authentication with Android and iOS -- Words (535)

Ionic
Ionic 2 /Ionic 3 - Fingerprint Authentication with Android and iOS

In this tutorial,we are going to cover how to add Fingerprint authentication to Ionic apps for Android and iOS so lets get started .

I'm going to use Ionic CLI v3 and Ionic library 3.x.x but the steps can be also applied to Ionic 2 projects with some minimal changes regarding Ionic CLI v3 commands .

You can also follow this tutorial to upgrade to Ionic CLI v3 which is an improved version of Ionic CLI

Generating a new Ionic project


Open up your terminal on Linux/MAC systems or command prompt on Windows and type the following to generate a new Ionic 3 project :

ionic start fingerprint-demo blank 

Next navigate inside project directory and add both the Cordova plugin for fingerprint authentication and its Ionic native wrapper .

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

Next lets add it the the list of providers .Go ahead open your project with a text editor .I'm using Visual Studio Code

code .

Now open src/app/app.module.ts and import the native wrapper for fingerprint auth and add it

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

@NgModule({
declarations: [
    MyApp,
    HomePage
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage
],
providers: [
    StatusBar,
    SplashScreen,
    FingerprintAIO,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

We can now inject it in our components and start using its API to add Fingerprint auth to our apps .

Open src/pages/home/home.ts and add

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FingerprintAIO ,FingerprintOptions} from '@ionic-native/fingerprint-aio';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
fingerprintOptions : FingerprintOptions;
constructor(public navCtrl: NavController,private fingerAuth: FingerprintAIO) {

}
public showFingerprintAuthDlg(){
    this.fingerprintOptions = {
        clientId: 'fingerprint-Demo',
        clientSecret: 'password', //Only necessary for Android
        disableBackup:true  //Only for Android(optional)
    }
    this.fingerAuth.isAvailable().then(result =>{
    if(result === "OK")
    {
        this.fingerAuth.show(this.fingerprintOptions)
        .then((result: any) => console.log(result))
        .catch((error: any) => console.log(error));
    }
    });
}

}

So we first check if Fingerprint auth is available on our device if OK we call the show method with some required and optional options such as clientId ,clientSecret and disableBackup .

Now lets add a button to trigger the Fingerprint auth dialog so open src/pages/home/home.html and add

<ion-header>
<ion-navbar>
    <ion-title>
    Fingerprint auth demo
    </ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<button ion-button (click)="showFingerprintAuthDlg()">show fingerprint auth dialog  </button>

</ion-content>

That's it ,you can now test the Fingerprint auth by using a real device which supports Fingerprint authentication

ionic cordova platform add android 
ionic  cordova run android 

Make sure to attach a real mobile device with an USB cable before your run your app .




mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.