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.
TypeScript
TypeScript
import System = require('sf-core/device/system');
console.log("Device.System.fingerPrintAvailable: "       + System.fingerPrintAvailable);
validateFingerPrint
Asking for authentication with the fingerprint.
TypeScript
TypeScript
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:
TypeScript
JavaScript
TypeScript
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 method
        this.onShow = onShow.bind(this, this.onShow.bind(this));
        // Overrides super.onLoad method
        this.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 === System.OSType.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 === System.OSType.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"
        }
    });
}
​
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;
​
Application Permission Management
Inter-app Communication and Using Custom URL Schemes/Intents
Last updated 3 months ago