Titanium Alloy Widget - Android Fingerprint AlertDialog
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
ti.androidfingerprintalertdialog
README.md

README.md

"License"

ti.androidfingerprintalertdialog

Titanium Alloy Widget - Android Fingerprint AlertDialog

The purpose of this widget is to simply apply all the Material Style Guidelines for presenting a UI to request fingerprint authentication, failure, and success into a widget that could be added to any Titanium project.

Here is a detailed Medium article from Adam T Armstrong (the author) about its implementation.

Requirement

Some form of Android Fingerprint Authentication

NOTE: The example below is using the opensource Ti.Reprint Hyperloop module (free/open-source from: https://github.com/loop-modules/Ti.Reprint )

Usage

  • Download the latest release of the widget.
  • Unzip the folder to your project under app/widgets/ti.androidfingerprintalertdialog
  • Add the widget as a dependency to your app/config.json
  • Add widget to your project view (typically a login page)
<Widget id="androidFingerprint" src="ti.androidfingerprintalertdialog" />

You can also decide if you want to be able to support the password fallback or not by adding usePasswordFallback to your widget instanciation.

<Widget id="androidFingerprint" src="ti.androidfingerprintalertdialog" usePasswordFallback="true" />
  • Use the show() method to display the AlertDialog from the Widget - as well as define the methods to use for click events:
    • 'Cancel'
    • 'Use Password' (optional)
$.androidFingerprint.show(fingerprintCancel, fingerprintUsePassword);
  • Use the events, success or failure, to update the AlertDialog UI accordingly.
$.androidFingerprint.success();

or

$.androidFingerprint.failure();

Example

index.xml

<Alloy>
	<Window class="container">
		<Label id="label" text="Android Fingerprint AlertDialog Example" />
		<Widget id="androidFingerprint" src="ti.androidfingerprintalertdialog" />
	</Window>
</Alloy>

index.js

/*
 * Initialize Reprint library
 */
if (OS_ANDROID) {
	var Reprint = require('reprint');
	Reprint.initialize();
}

function postLayout(){
	if (OS_ANDROID) {
		/*
		 * Check for Fingerprint HW as well as registered fingerprints
		 */
		if (!Reprint.isHardwarePresent()) {
		    alert('Your device does not support fingerprint recognition.');
		}
		if (!Reprint.hasFingerprintRegistered()) {
		    alert('You do not have any fingerprint registered in this device.');
		}
		if (Reprint.isHardwarePresent() && Reprint.hasFingerprintRegistered()) {
				/*
				 * Show Alert Dialog and set callbacks for click events 'Use Password' & 'Cancel'
				 * Add Reprint listener for fingerprint authentication
				 */
				Reprint.authenticate(successCallback, failureCallback);
				$.androidFingerprint.show(fingerprintUsePassword, fingerprintCancel);

				/*
				 * Define success | failure | UsePassword | Cancel
				 */
				function successCallback(moduleTag) {
					$.androidFingerprint.success();
					//Continue login process
				}
				function failureCallback(failureReason, fatal, errorMessage, moduleTag, errorCode) {
					$.androidFingerprint.failure();
				}
				function fingerprintUsePassword(){
					Reprint.cancelAuthentication();
				}
				function fingerprintCancel(){
					Reprint.cancelAuthentication();
				}
		}
	}
}

$.index.open();

config.json

"dependencies": {
        "ti.androidfingerprintalertdialog": "1.0"
    }

Android Theming

As we're using a stock AlertDialog from Titanium you can easily theme the look and feel of it buy following titanium recommendations.

Example with a theme called my_custom_theme which you might have setup within your tiapp.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="my_custom_theme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
        ...
        <item name="android:timePickerDialogTheme">@style/AlertDialogCustom</item>
        <item name="android:datePickerDialogTheme">@style/AlertDialogCustom</item>
        <item name="alertDialogTheme">@style/AlertDialogCustom</item>
    </style>
    <style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorAccent">#F26522</item>
        <item name="colorControlActivated">#F26522</item>
        <item name="android:textColor">#000000</item>
        <item name="android:textColorPrimary">#6f6f6f</item>
    </style>
</resources>

This will set the color of the title to #000000, the color of the message to #6f6f6f and the button color to #f26522.