Biometric Authentication (Face & Fingerprint) on iOS and Android using Ionic 3/Angular

Aug 08, 2018

Hi guys!

In this tutorial, I’d be explaining how to start up and integrate the Fingerprint and Face Biometric Authentication to an Ionic 3 App (Remember we used to work with Ionic 1?). Well, Ionic has in recent times made several upgrades to their Framework. Ionic 3 is their most stable upgrade for now, with Ionic 4 Beta version already released.

Ionic 3 uses Angular 4.0.0 upward and Typescript to replace the use of AngularJS, and now new Pages, Pipes, Components, Providers etc. are generated using the CLI. Another interesting feature of Ionic 3 is the use of Ionic Native which is a TypeScript wrapper for Cordova/PhoneGap plugins that makes integrating any native functionality you need to your Ionic mobile app easy.

Generating The New App

On your Command Line Interface, run;

ionic start BiometricDemoApp sidemenu

You can then go ahead to navigate into your project, generate and style the pages you want to work with as you wish.

My Demo app has 3/4 pages, with a Login Page which requires a user to input a Username. Once a User clicks on the Login button, the Fingerprint Modal comes up, if it’s an iPhone X the Face Modal comes up.

Once the Fingerprint or Face (for iPhone X) scanned matches the one registered on that device the User is logged in and navigated to the Dashboard page.

You can find the source code to my Demo App on GitHub following the URL below;

https://github.com/NihinlolaFaj/BiometricAuthenticationApp

Integrating The Plugin

When my Demo App is served, it looks like this;

The Login Page of My Demo App
The Login Page of My Demo App

And my project directory looks like;

My Project Directory
My Project Directory

You can now go ahead to install the Cordova Fingerprint AIO Plugin, by running the two commands below on your CLI;

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

Once this is done, this plugin can now be imported into the components it is to be used.

Firstly, it is to be added to the app.Module.ts of the project which is the root module of your application that starts up your project/App. My app.Module.ts looks like this;

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

@NgModule({
declarations: [
MyApp,
HomePage,
ListPage,
LoginpagePage
],

imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage,
LoginpagePage
],

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

export class AppModule {}

And secondly in the TypeScript page/module, it is to be used, it should also be initialized in the constructor of that component. My loginpage.ts looks like this;

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Injectable } from '@angular/core';
import { UtilityProvider } from '../../providers/utility/utility'
import { FingerprintAIO } from '@ionic-native/fingerprint-aio';
import { SettersandgettersProvider } from '../../providers/settersandgetters/settersandgetters';

@IonicPage()
@Component({
selector: 'page-loginpage',
templateUrl: 'loginpage.html',
})

export class LoginpagePage {
constructor(public navCtrl: NavController, public navParams: NavParams, public utility: UtilityProvider, public faio: FingerprintAIO, public setAndGet: SettersandgettersProvider) {
}
}

Implementation Of The Plugin

My “Login” button is tied to a function called login();

<button type="submit" (click)="login()">Login</button>

When this function is called, it does the following;

  • Checks if a user has entered a Username, if not the user is prompted to enter one.
  • Checks if the Fingerprint or Face (iPhone X) feature is available on the device, if not the user is prompted these features are not available on their device.
  • Scan the Fingerprint or Face and compare with the Fingerprint or Face registered on the device. If it matches the User is logged on and navigated to the Dashboard page. Else, the user is prompted of the error.

The login function implementation can be seen below;

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Injectable } from '@angular/core';
import { UtilityProvider } from '../../providers/utility/utility'
import { FingerprintAIO } from '@ionic-native/fingerprint-aio';
import { SettersandgettersProvider } from '../../providers/settersandgetters/settersandgetters';

@IonicPage()
@Component({
selector: 'page-loginpage',
templateUrl: 'loginpage.html',
})

export class LoginpagePage {
constructor(public navCtrl: NavController, public navParams: NavParams, public utility: UtilityProvider,
public faio: FingerprintAIO, public setAndGet: SettersandgettersProvider) {
}

data = { userName: "" }

//Login Function
login(){
if (!this.data.userName)
{
 this.utility.presentAlert("Please enter Username!");
 return;
}

 else {
 //Check if Fingerprint or Face  is available
 this.faio.isAvailable()
  .then(result => {
  if(result === "finger" || result === "face"){
    //Fingerprint or Face Auth is available
    this.faio.show({
      clientId: 'NihinDemoBioAuthApp',
      clientSecret: 'nihinBioAuthDemo', //Only necessary for Android
      disableBackup: true, //Only for Android(optional)
      localizedFallbackTitle: 'Use Pin', //Only for iOS
      localizedReason: 'Please Authenticate' //Only for iOS
  })
.then((result: any) => {
  if(result == "Success"){
   //Fingerprint/Face was successfully verified
   //Go to dashboard
   this.setAndGet.UserName = this.data.userName;
   this.navCtrl.push("DashboardPage")
  }
 else {
  //Fingerprint/Face was not successfully verified
  this.utility.presentAlert(result);
   }
 })

 .catch((error: any) => {
   //Fingerprint/Face was not successfully verified
   this.utility.presentAlert(error);
 });
 }

 else {
   //Fingerprint or Face Auth is not available
   this.utility.presentAlert("Fingerprint/Face Auth is not available on this device!");
   }
  })
  }
 }
}

Below are the implementation screenshots;

Fingerprint Auth Implementation on the iPhone 6
Fingerprint Auth Implementation on the iPhone 6

 

 

Face Auth Implementation on the iPhone X
Face Auth Implementation on the iPhone X

You can go ahead to build the App on both iOS and Android devices to test as it functions on both platforms. This plugin works perfectly for Authenticating both Fingerprint and Face since the next generation of iPhones now makes use of the Face Authentication.

I hope you found this article helpful, and remember the source code of my Demo App can be found on GitHub following the URL below.

https://github.com/NihinlolaFaj/BiometricAuthenticationApp

Developing An App using Ionic 1 and AngularJS (Part 2)

Jun 09, 2018

Hi guys!

We’d be taking off from where we stopped the last time. If you were able to start a new App like I explained in the previous article, congratulations!

Now I’d go ahead to explain the file/folder structure of the project you created, and then explain how to build the APK and IPA on your Android and Apple Devices (Tablets, Phones) respectively.

If you were able to start a new project in the last lesson and you successfully served your project with “ionic serve”, you should see the below App in your default web browser.

A new ionic app project currently being served

Also, your Ionic project folder should look like this;

Project Structure of an Ionic 1 App

Explanation of The Project Structure

  • bower.json: It is used for managing your app’s dependencies via the bower package management tool. By default, the Ionic Framework is the only dependency that is added in a fresh App.
  • config.xml: This is the configuration file for Cordova, it contains information about the App such as Name, Description, Author, Contact Information and Preferences.
  • gulpfile.js: This file is used for compiling SASS and other Ionic Framework specific tasks via the gulp task runner.
  • hooks: Contains Cordova files which allows you to execute javascript code during the multiple phases of building your app.
  • ionic.config.json: This is used for the configuration of the ionic CLI tool.
  • node_modules: This contains all NPM packages installed locally into your project. The package.json file in the app root defines what libraries will be installed into node_moduleswhen you run npm install .
  • pacakge.json: Contains file used by NPM where we define packages and dependencies to install and can specify scripts to run.
  • platforms: Contains the files for the various native platforms that the App would be installed upon.
  • plugins: It contains all the Cordova plugins installed in the App.
  • resources: Contains the splash screen images and App icons.
  • scss: Stores Ionic’s SCSS file, but you can (optionally) add your own SCSS files too.
  • www: This is is the heart of your project, the files and folders in it are discussed below.

The Heart of The Project

  • css: This is where you store all your css (stylesheet) files.
  • fonts: This contains the fonts used in your project.
  • img: Contains all your image assets.
  • index.html: This is the starting point for our application. It will load up all of the necessary Javascript, HTML and CSS files. Whenever you create a new Javascript or CSS file, you will need to ensure you are linking to it from the index.html file.
  • js: This contains all the Javascript files used by your App. It typically is scaffolded with an app.js file, and sometimes will have a controllers folder for your app’s controllers and a services folder for any services you have.
  • lib: Any external libraries will be placed in here. To start, only Ionic shows up in this folder. You can go ahead to customize your App.

You can go ahead to customize your App. Visit the Ionic Framework for a complete documentation.

Building For Android

Now to generate an APK that can be installed on your android device. Once inside your project directory, in your command prompt or Code Editor integrated terminal, run the following commands;

 ionic cordova platform add android

ionic cordova prepare android

ionic cordova build android

The generated APK to be installed on an Android device would be found in this directory;

/Users/MacBook/ionic-projects/development/SampleTestApp/platforms/android/build/outputs/apk

Building For iOS

To generate an IPA that can be installed on an iPhone. Once inside your project directory, in your command prompt or Code Editor integrated terminal, run the below commands;

ionic cordova platform add ios

ionic cordova prepare ios

ionic cordova build ios

You can get then go ahead to navigate to the below directory;

/Users/MacBook/ionic-projects/development/SampleTestApp/platforms/ios

Here you would find an XCode file usually of extension, projectname.xcodeproj this file should be opened with Xcode where you can then archive an IPA to be installed on an iPhone.

By now, you should have a functioning App both on your Android and Apple phones.

Hint: To avoid having to generate an APK or IPA to be installed on your phone every time before testing, you can install the Ionic DevApp on your mobile device. This allows your App to run on a device at real time as it is running on your local machine. Even changes you make in real time to your source code reflects automatically on the App running on you phone.

I hope the two articles have been helpful and would kickstart someone to begin the process of mobile development. Please drop your comments and suggestions in the comments section, if you have any.

Till Next Time! ✌

Developing An App Using Ionic 1 and AngularJS (Part 1)

Feb 26, 2018

Hi Guys!

In this write up we’d be discussing how to setup the development environment, and then building a simple hybrid app using Ionic Framework.

What is Ionic?

To begin with, What is Ionic? Ionic is a HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that has access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, the speed of development, and access to third-party code.

Unlike a responsive framework, Ionic comes with very native-styled mobile UI elements and layouts that you’d get with a native SDK on iOS or Android but didn’t really exist before on the web. Ionic also gives you some opinionated but powerful ways to build mobile applications that eclipse existing HTML5 development frameworks.

Since Ionic is an HTML5 framework, it needs a native wrapper like Cordova or PhoneGap in order to run as a native app. I recommend using Cordova proper for your apps, and the Ionic tools will use Cordova underneath.

Setting Up Your Development Environment

Now let’s get into the setup of our development environment. The Ionic Framework currently targets iPhone and Android devices. The minimum Phone Operating Systems it supports are iOS 7+, and Android 4.1+.

Let is also be known that to generate Android APKs after development either a MAC OS or Windows OS can be used, but to generate an iOS IPA, it can only be done on a MAC OS, as XCode is required to do this and it is not available on the Windows OS (Unless you want to use a VMWare on Windows). So I’d strongly recommend using a MAC Laptop as you can comfortably develop/build for both Android and IOS on a MAC.

The Three Most Important Installations

The 3 most important things you’d first need to install on your PC are;

  1. Node.js – This is required to be able to use npm (Node Package Manager), which is the portal/platform through every of our project dependency would be installed.
  2. Android Studio  – This is required to generate Android APKs.
  3. XCode – This is required to generate iOS IPAs

Once these 3 things have been installed, we’d be installing everything else we need going forward using the Command-Line Interface (CLI). If you are new to CLI you can read more about it here.

You can now open up your Command Prompt on Windows 0r Terminal on MAC OS.

First, we will install the most recent version of Apache Cordova, which will take our app and bundle it into a native wrapper to turn it into a traditional native app. Drop “sudo” from the below command if you’re running on Windows.

sudo npm install -g cordova

Next, we install Ionic. The utility framework required to start, build and package our Ionic apps.

sudo npm install -g ionic

Installing dependencies using the Terminal on a MAC

Starting a New Project

Now that our development environment has been set up, we would start a new project. I’d like to state that Ionic started initially with a version 1 of their Framework, of which apps were built using Ionic 1 and AngularJS. However, they have in recent times developed a version 3 of the Framework which runs alongside Angular 4/Typescript, which is a strongly typed strict syntactical superset of JavaScript when compared to the regular AngularJS. For the purpose of this write-up, we’d be developing using Ionic 1 and AngularJS.

From the Command Prompt or Terminal, we can navigate to the desired path where we want our project to be created using the ”cd” command, just like below;

Once inside the desired path, we run the below command to create an App project that comes by default with a side menu;

sudo ionic start appname sidemenu –type ionic1

The other types of default projects are;

  • sudo ionic start appname blank – Creates a blank project
  • sudo ionic start appname tabs – Creates a project with tabs.

Now that the project has been created, “cd” into the new project and run the below command from your Command Prompt;

ionic serve

Once you serve the project, it should launch in your default web browser like this;

Ionic 1 App with side menu

In my next post, I’d be explaining all that is contained in the new project folder and also make customizations to the new app we just created using HTML, CSS, and AngularJS.

Till Next Time! ✌

Introduction To Mobile Applications

Jan 31, 2018

Hi Guys!

Today, I’d be sharing the basics of mobile application development, the different types and subsequently how to build a simple mobile application using Ionic Framework and Angular. I would assume we all know what mobile applications are.

To begin with, there are different types of Mobile applications;

 

1. Native Applications:

These are applications developed to be used on a particular platform or operating system such as Android, iOS etc. Native apps are usually written in languages that the platform accepts. They are also built using the specific Integrated Development Environment (IDE) for the given operating systems, such as Android Studio for Android Apps and XCode for iOS Apps.

The principal advantage of native apps is that they optimize the user experience. By being designed and developed specifically for that platform, they look and perform better.

Examples of some popular Native Applications are Instagram for Android, VLC media player for Android, WordPress for iOS,  and 2048 game for iOS,

Native Apps are usually built using either of the following languages;

  1. Swift or Objective C for iOS applications
  2. Java for Android applications
  3. C# or VB.NET for Windows applications
    Building an IOS App on XCode

    Pros
    – They are very fast and responsive because they are built for that specific platform.
    – They have the best performance.
    – They are more interactive, intuitive and run much smoother in terms of user input and output.

    Cons
    – They are considerably more expensive to develop compared to cross-platform and web applications.
    – They require more time to develop as one application has to be written in different languages for different platforms.
    – They have a higher cost of maintenance and pushing out updates, due to multiple source code bases.


2. Hybrid Applications:

These are applications developed to be used across multiple platforms i.e can be deployed on both iOS and  Android platforms. Hybrid mobile applications are built in a similar manner as websites. Both use a combination of technologies like HTML, CSS, and JavaScript. However, instead of targeting a mobile browser, hybrid applications target a WebView hosted inside a native container. This enables them to do things like access hardware capabilities of the mobile device.

Today, most hybrid mobile applications leverage Apache Cordova, a platform that provides a consistent set of JavaScript APIs to access device capabilities through plug-ins, which are built with native code.

Examples of some popular Hybrid Applications are MarketWatch, Untappd, FanReact, and TripCase.

Some popular frameworks for building Hybrid applications include;

  • Xamarin
  • Ionic Framework
  • PhoneGap
  • Sencha Touch etc.
    Ionic + Angular = Hybrid Applications

    Pros
    – Adaptable to multiple platforms, as the same code can be re-used for Android, iOS, and Windows.
    – Unified and less expensive development, as the app only has to be developed once using one code base.
    – Faster development time when compared to native apps as only one development process is involved.

    Cons
    – Slower app performance when compared to Native Apps, because the hybrid framework acts as a bridge to communicate with the phone’s native features.
    – Apps with heavy animations and sound effects aren’t as seamless as their native counterparts.

 

3. Progressive Web Applications (PWAs):

A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users without requiring them to install an app from the AppStore/PlayStore. They are usually accessible by a web URL which can always be pinned or saved on your phone’s home screen. PWAs are usually built using HTML, CSS, JavaScript also.

Examples of some popular Progressive Web Applications are AliExpress’s PWA, Financial Times PWA, NASA’s PWA, and the recently just launched PayStack’s PWA.

Pros
– Easy to build.
– Easy to maintain.
– Works offline and performs well on low-quality networks.
– Build one app for all platforms – iOS, Android, etc. as long as it can run a browser.

Cons
– Needs a browser to run. Users have to take another step to type in the URL of the app which amounts to a poor user experience.
– Web apps are less interactive and intuitive than native apps.

In my next post, I’d be sharing how to build a simple hybrid mobile application using the Ionic Framework and Angular.

Till Next Time! ✌

Hello World! I am Nihinlola

Jan 06, 2018

Hello World!

I am Nihinlolamiwa Fajemilehin (yeah it’s a pretty long name), a Full-Stack developer with experience in both front-end and back-end development. I’m currently a developer with one of Nigeria’s foremost technology driven bank (We like to brag duh), where I work with a Team of fantastic people to create magical Web and Mobile applications for our customers (You most likely have used one of my creations before 😉).

Sometimes last year I felt the urge to create a personal website since I was a developer and it seemed pretty cool to own one. Lately, I have been questioned by a couple of people as to why I don’t write on Medium and other similar sites.

It has always been on my mind to give back to the tech community and I guess I have finally put my laziness to rest. Therefore, this year I have decided to share technical write-ups for two major reasons;

  • Share solutions to problems I have encountered and solved in the past
  • Share knowledge with everyone; practicing and upcoming developers especially

I have gained loads of knowledge and found solutions to a whole lot of problems from write-ups and articles written by others on platforms every day, noteworthy mentions are Stack Overflow, TutorialsPoint, CSharpCorner, Microsoft Developer Network (MSDN), Code Project, GitHub and so many others.

Therefore at this point, I have decided to share the little I have learned over the past couple of years too.

I would share posts at least once a month and at most twice a month due to my busy work schedule.

That being said, I look forward to my first Technical post at the end of the month. ✌️