Face ID and Touch ID Biometric Authentication in iOS using Ionic / Ionic biometric authentication in iOS / Ionic face recognition in iOS.
Ionic biometric authentication iOS plugin provides option to provide authenticate user using Touch ID or Face ID. Face ID and Touch ID are becoming new way of authentication, more and more app are using it and people feel safe when they use biometric authentication rather than the normal user credentials.
Face ID or Touch ID can be added on any ionic app using below mentioned plugin. It works for both iOS and android, but our example is more from the iOS prospective.
In you project directory run below mentioned commands to install fingerprint/ face recognition plugin.
ionic cordova plugin add cordova-plugin-fingerprint-aio
npm install @ionic-native/fingerprint-aioInject the dependency as mentioned below. You might need to add this dependency in you app component as well.
import { FingerprintAIO } from '@ionic-native/fingerprint-aio/ngx';
constructor(private faio: FingerprintAIO) { }Create a method in your file which will trigger biometric authentication. In our case it was login.ts.
showFingerPrint() {
const options: FingerprintOptions = {
clientId: 'BioMetrics_Demo',
localizedReason: 'Biometrics log on'
};
this.faio.isAvailable().then((isAvailable) => {
console.log('isAvailable', isAvailable);
if (isAvailable === "finger" || isAvailable === "face") {
this.faio
.show(options)
.then((result: any) => {
console.log('Inside success');
})
.catch(e => {
console.log('Inside failure on cancel');
});
}
}, error => {
console.log('isAvaialble error', error);
});
}Add a button which will trigger the function created above.
<button ion-button (click)="showFingerPrint()">
<ion-icon name="finger-print"></ion-icon> Use fingerprint ID
</button>Build your application and run it on simulator and use steps below to test biometric authentication in iOS app.
In iPhone 8 plus it should display Touch ID and in iPhone XR it should display Face ID. It depends upon the device which you are using to test you app.
Testing Touch ID or Face ID on iOS Simulator
If you don’t have a physical device such as the iPhone X or iPhone 5s and later, don’t worry. The iOS Simulator provides us with a feature that can bypass this kind of behavior
Run the app in simulator
Click on your Simulator and then go Hardware -> Touch ID or FaceID from the top menu bar
In the submenu there will be 3 options available:
Enrolled – enables the Touch ID or Face ID feature to test on simulator.
Matching Touch – This is used to simulate successful biometric authentication scenario.
Non-matching Touch – This is used to simulate failure biometric authentication scenario.
This article describes how to add biometric authentication in iOS app using IONIC.
Happy coding 🙂
Four our articles in Angular please visit our Angular section.