Ionic Fingerprint Login [v3]

68 Shares

Almost all newer devices currently have some sort of fingerprint our Touch ID authentication already build in. If you want to protect your app with this already built in feature you can offer users a simple and convenient way to unlock their secret data inside their app!

There different plugins we can choose, and on Android perhaps not all devices will be supported. Anyway, we take a solution that should work equally on both iOS and Android within our Ionic app which ist the Fingerprint AIO Plugin.

Setting up Fingerprint

To get started we only need a blank new Ionic app, the plugin we talked about and also another page so we can have something like a login screen before we show the actual content of our app. Go ahead and run:

ionic start touchLogin blank
ionic cordova plugin add cordova-plugin-fingerprint-aio
npm install --save @ionic-native/fingerprint-aio
ionic g page home
ionic g page login

ionic start touchLogin blank

ionic cordova plugin add cordova-plugin-fingerprint-aio

npm install --save @ionic-native/fingerprint-aio

ionic g page home

ionic g page login

Now make sure to import the plugin to your src/app/app.module.ts like this:

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 { MyApp } from './app.component';
import { FingerprintAIO } from '@ionic-native/fingerprint-aio';

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

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 { MyApp } from './app.component';

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

@NgModule({

declarations: [

MyApp

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler},

FingerprintAIO

]

})

export class AppModule {}

There’s nothing else you have to take care of, we can directly start to use the fingerprint feature!

Building the Login Screen

Our login screen will look a bit like when your 1Password app is locked on a device. Therefore, we not only need a button to trigger the fingerprint authentication but also a few div elements and the Ionic grid system to build a good looking login page.

Change your src/pages/login/login.html to:

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-row class="login-row" align-items-center>
    <ion-col col-5></ion-col>
    <ion-col class="lock-col">
      <div class="lock-bg"></div>
      <img src="assets/img/lock.png" class="lock-img" tappable (click)="login()">
    </ion-col>
    <ion-col col-5></ion-col>
  </ion-row>
</ion-content>

<ion-header>

<ion-navbar color="primary">

<ion-title>Login</ion-title>

</ion-navbar>

</ion-header>

<ion-content>

<ion-row class="login-row" align-items-center>

<ion-col col-5></ion-col>

<ion-col class="lock-col">

</ion-col>

<ion-col col-5></ion-col>

</ion-row>

</ion-content>

Now we just need some CSS to make everything take more space on the page. Also, you might need to add your own lockscreen image to the assets/img folder of your app!

Apply these changes to your src/pages/login/login.scss so the view is finished:

page-login {
    .login-row {
        height: 100%;
    }
    .lock-col {
        height: 100%;
    }
    .lock-bg {
        height: 100%;
        width: 2px;
        background: #cecece;
        margin-left: 50%;
    }
    .lock-img {
        position: absolute;  
        top: 0;  
        bottom: 0;  
        left: 0;  
        right: 0;  
        margin: auto;
        padding: 2px;
    }
}

page-login {

.login-row {

height: 100%;

}

.lock-col {

height: 100%;

}

.lock-bg {

height: 100%;

width: 2px;

background: #cecece;

margin-left: 50%;

}

.lock-img {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

padding: 2px;

}

Finally we take care of the actual functionality. As said before we don’t need any special handling for Android/iOS as this plugin will take care of talking to the right interfaces inside both environments.

The only thing we have to do is call the plugin with a few optional parameters here. The only thing needed here is clientId which gives your app an ID inside the keychain of the platform. The rest is optional, and you can check out all parameters on the page of the plugin again!

If the fingerprint authentication was successful, you can now guide your user to the next page of your app which could be something like an inside member area, so here we use setRoot() to move to a fresh navigation stack without any history.

Now go ahead and change your src/pages/login/login.ts to:

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

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public navCtrl: NavController, private faio: FingerprintAIO) {
  }

  login() {
    this.faio.show({
      clientId: 'Fingerprint-Demo',
      clientSecret: 'password', // Only Android
      localizedFallbackTitle: 'Use Pin', // Only iOS
      localizedReason: 'Please authenticate' // Only iOS
    })
      .then((result: any) => {
        this.navCtrl.setRoot('HomePage');
      })
      .catch((error: any) => {
        console.log('err: ', error);
      });
  }
}

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

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

@IonicPage()

@Component({

selector: 'page-login',

templateUrl: 'login.html',

})

export class LoginPage {

constructor(public navCtrl: NavController, private faio: FingerprintAIO) {

}

this.faio.show({

clientId: 'Fingerprint-Demo',

clientSecret: 'password', // Only Android

localizedFallbackTitle: 'Use Pin', // Only iOS

localizedReason: 'Please authenticate' // Only iOS

})

.then((result: any) => {

this.navCtrl.setRoot('HomePage');

})

.catch((error: any) => {

console.log('err: ', error);

});

}

Finally your app is ready, and if Touch ID or Anroid fingerprint is set up on your device you can now unlock the app like in the little video below!

Of course you can also find a video version of this article below.