Ionic 5|4 Fingerprint AIO Authentication for Android & iOS Example Application

In this Ionic 5/4 tutorial, we are going to implement Fingerprint Authentication Biometric Scanner in Ionic Angular application for Android and iOS platforms with an example application.

Most of the modern Android and iOS devices come with Fingerprint sensors to secure the device and its application using biometric credentials. These biometric details can be used by other applications in Android and iOS to provide an extra layer of security.

In Ionic applications, we can easily implement a Fingerprint sensor scanner authentication system using Cordova nd native plugins.

Let’s create an example application to demonstrate the feature.

 

[lwptoc]

 

Platform Support

Android – Minimum SDK 23

iOS – XCode 9.2 or higher required. Please set <preference name="UseSwiftLanguageVersion" value="4.0" /> in your config

Setup a new Ionic 5 Application

Create a new Ionic Angular application with a blank template by hitting bellow ionic command:

$ ionic start ionic-finger-scanner-app blank --type=angular

Move inside the application folder

$ cd ionic-finger-scanner-app

Install Fingerprint AIO Cordova and Native Plugin

Run the following command to install the plugin in the application project

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

 

Import Plugin Class in App Module

Now we will import the FingerprintAIO class in the AppModule to use its methods across the application components.

Open the app.module.ts file and make the following changes

// app.module.ts
...
import { FingerprintAIO } from '@ionic-native/fingerprint-aio/ngx';

@NgModule({
 ...
  providers: [
    StatusBar,
    SplashScreen,
    FingerprintAIO,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now we can use methods available in the app components to use Fingerprint Scanner.

 

Adding Fingerprint Scanner in Ionic App

Now open the home.page.ts component class file and import the FingerprintAIO class. Update the constructor function

// home.page.ts
import { Component } from '@angular/core';

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private faio: FingerprintAIO
  ) {
  }

  public showFingerprintAuthDlg() {

    this.faio.isAvailable().then((result: any) => {
      console.log(result)

      this.faio.show({
        cancelButtonTitle: 'Cancel',
        description: "Some biometric description",
        disableBackup: true,
        title: 'Scanner Title',
        fallbackButtonTitle: 'FB Back Button',
        subtitle: 'This SubTitle'
      })
        .then((result: any) => {
          console.log(result)
          alert("Successfully Authenticated!")
        })
        .catch((error: any) => {
          console.log(error)
          alert("Match not found!")
        });

    })
      .catch((error: any) => {
        console.log(error)
      });
  }

}

The isAvailable() method checks for the availability of native support for Fingerscanner Authentication in the device. After getting the success we are calling the show() method with configuration options available.

 

Configuration Options Available

• <strong>title</strong>: Title in authentication dialogue. Default: "<APP_NAME> Biometric Sign On"
• <strong>subtitle</strong>: Subtitle in authentication dialogue. Default: null
• <strong>description</strong>: Description of authentication dialogue. Defaults:
  • iOS: "Authenticate" (iOS’ evaluatePolicy() requires this field)
  • Android: null
• <strong>fallbackButtonTitle</strong>: Title of a fallback button. Defaults:
  • When <strong>disableBackup</strong> is true
    • "Cancel"
  • When <strong>disableBackup</strong> is false
    • iOS: "Use PIN"
    • Android: "Use Backup" (Because backup could be anything pin/pattern/password ..haven’t figured out a reliable way to determine lock type yet source)
• <strong>disableBackup</strong>: If true remove backup option on authentication dialogue. Default: false. This is useful if you want to implement your own fallback.
• <strong>cancelButtonTitle</strong>: For cancel button on Android

 

Add a Button in Home Template

Now in the home.page.html add a button that will trigger the user action to activate the Finger scanner modal to let the user scan the sensor. After successful matching the

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Fingerprint AIO
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">

  <h4>Tap the button to Authenticate</h4>
  <ion-button expand="full" fill="outline" (click)="showFingeerprintAuthentication()">Fingerprint Authenticate
  </ion-button>

</ion-content>

That’s it we have successfully implemented the Fingerprint Scanner in the Ionic application. Next, we will learn how to run the application in the real device.

Run Application in Real Device

To check vibration functionality, you need to run the application in a real device. For that, you need to add the Platform for which you are going to build the application.

Add Platform in Application

Run the following command in the terminal to install the required platform

# Add Android
$ ionic cordova platform add android

# Add iOS
$ ionic cordova platform add ios

# Add Windows
$ ionic cordova platform add windows

 

Build Runnable File

After adding the platform, you can run the following commands to create an executable file like APK file for Android. Or you can simply run the app in the USB connected mobile with USB Debugging enabled discussed in the next step.

# Build Android
$ ionic cordova build android

# Build iOS
$ ionic cordova build ios

# Build Windows
$ ionic cordova build windows

 

Live Run Application in USB connected Device

If you just want to run the application in the real device and debug it on the Chrome browser, just execute the following command after connecting your mobile to your computer

# Live Run on Android
$ ionic cordova run android -l

# Live Run on iOS
$ ionic cordova run ios -l

# Live Run on Windows
$ ionic cordova run windows -l

 

Source Code

Find the source code of this Ionic application in the GitHub repository here.

 

Conclusion

That’s it we have successfully implemented the Fingerscanner Authentication functionality in Ionic Angular application using Cordova and Native plugin in an Ionic application. We also discussed how to add platform and test application in a real device to check native features.

If you enjoyed the content. Do share with other geeks. Thanks for reading!