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.
For iOS, if your device supports FaceID, you should add
NSFaceIDUsageDescription {DEVELOPER_PERMISSION_MESSAGE_FOR_FACEID}
to your Info.plist file.
Indicates whether fingerprint-scanning related functions can be used in the device or not.
import System = require('sf-core/device/system');console.log("Device.System.fingerPrintAvailable: " + System.fingerPrintAvailable);
Asking for authentication with the fingerprint.
import 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:
import PageSampleDesign from 'generated/pages/pageSample';import FlexLayout = require('sf-core/ui/flexlayout');import Application = require('sf-core/application');import System = require('sf-core/device/system');import Button = require('sf-core/ui/button');​//You should create new Page from UI-Editor and extend with it.export default class Sample extends PageSampleDesign {​myButtonAuthFingerPrint: Button;myButtonFingerPrintAvailable: Button;​constructor() {super();// Overrides super.onShow methodthis.onShow = onShow.bind(this, this.onShow.bind(this));// Overrides super.onLoad methodthis.onLoad = onLoad.bind(this, this.onLoad.bind(this));​this.layout.flexDirection = FlexLayout.FlexDirection.COLUMN;this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;this.layout.alignItems = FlexLayout.AlignItems.CENTER;}}​/*** @event onShow* This event is called when a page appears on the screen (everytime).* @param {function} superOnShow super onShow function* @param {Object} parameters passed from Router.go function*/function onShow(superOnShow: () => void) {const { headerBar } = System.OS === "Android" ? this : this.parentController;superOnShow();Application.statusBar.visible = true;headerBar.visible = true;}​/*** @event onLoad* This event is called once when page is created.* @param {function} superOnLoad super onLoad function*/function onLoad(superOnLoad: () => void) {superOnLoad();​this.myButtonFingerPrintAvailable = new Button({text: "FingerPrint Available",onPress: function () {alert("System.fingerPrintAvailable: " + System.fingerPrintAvailable);}});​this.myButtonAuthFingerPrint = new Button({text: "Authenticate with FingerPrint",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.");}}}});​​this.layout.addChild(this.myButtonFingerPrintAvailable, "myButtonFingerPrintAvailable", ".sf-button", {height: 75,width: 200,margin: 15,flexProps: {alignSelf: "CENTER"}});​this.layout.addChild(this.myButtonAuthFingerPrint, "myButtonAuthFingerPrint", ".sf-button", {height: 75,width: 200,margin: 15,flexProps: {alignSelf: "CENTER"}});}​
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;
​