Fingerprint Authentication on iOS and Android

The fingerprint is one of a good way to authenticate on mobile platforms. Both iOS and Android support fingerprint for awhile. Android supports fingerprint since Android Marshmallow (Android M, API 23) and iOS supports since iOS 7. In Smartface Native Platform, you can able to access TouchID for iOS and fingerprint for Android.

For Android, you should add to your manifest file on config/Android/AndroidManifest.xml.

FaceID

For iOS, if your device supports FaceID, you should add

NSFaceIDUsageDescription {DEVELOPER_PERMISSION_MESSAGE_FOR_FACEID}

to your Info.plist file.

fingerPrintAvailable

Indicates whether fingerprint-scanning related functions can be used in the device or not.

JavaScript
JavaScript
const System = require('sf-core/device/system');
console.log("Device.System.fingerPrintAvailable: " + System.fingerPrintAvailable);

validateFingerPrint

Asking for authentication with the fingerprint.

JavaScript
JavaScript
const System = require('sf-core/device/system');
if(System.fingerPrintAvailable){
System.validateFingerPrint({
android: {
title: "Title"
},
message : "Message",
onSuccess : function(){
console.log("Success");
},
onError : function(){
console.log("Error");
}
});
}

Here is the full page sample for fingerprint authentication:

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Button = require('sf-core/ui/button');
const FlexLayout = require('sf-core/ui/flexlayout');
const System = require('sf-core/device/system');
var pageFingerprint = extend(Page)(
function(_super) {
_super(this);
var myButtonFingerPrintAvailable = new Button({
text: 'FingerPrint Available',
height: 75,
width: 200,
margin: 15,
alignSelf: FlexLayout.AlignSelf.CENTER,
onPress: function() {
alert("System.fingerPrintAvailable: "+ System.fingerPrintAvailable);
}.bind(this)
});
var myButtonAuthFingerPrint = new Button({
text: 'Authenticate with FingerPrint',
height: 75,
width: 200,
margin: 15,
alignSelf: FlexLayout.AlignSelf.CENTER,
onPress: function() {
if(System.fingerPrintAvailable){
System.validateFingerPrint({
android: {
title: "Title"
},
message : "Message",
onSuccess : function(){
alert("You have been successfully logged in");
},
onError : function(){
alert("Login failed");
}
});
}
else{
if(System.OS === 'iOS'){
alert("Fingerprint is not available. You should enable TouchID to use this authentication.");
}
else{
alert("Fingerprint is not available. If your device supprorts fingerprint, you should add at least one fingerprint.");
}
}
}.bind(this)
});
this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.addChild(myButtonFingerPrintAvailable);
this.layout.addChild(myButtonAuthFingerPrint);
}
);
module.exports = pageFingerprint;