From 15c0e294129f3fdfa9346dadff71d1b0c2439a0f Mon Sep 17 00:00:00 2001 From: EddyVerbruggen Date: Tue, 30 Jan 2018 13:19:44 +0100 Subject: [PATCH] Custom UI for Fingerprint Auth #5 --- LICENSE | 2 +- README.md | 34 +++-- .../App_Resources/Android/values/strings.xml | 23 +++ demo/app/app.css | 19 ++- demo/app/main-page.xml | 10 +- demo/app/main-view-model.ts | 108 +++++++------- src/appcompat-activity.android.ts | 42 ++++++ src/fingerprint-auth.android.ts | 140 ++++++++++++++---- src/fingerprint-auth.common.ts | 22 ++- src/fingerprint-auth.ios.ts | 4 +- src/package.json | 4 +- src/platforms/android/AndroidManifest.xml | 7 +- src/platforms/android/include.gradle | 15 ++ 13 files changed, 321 insertions(+), 109 deletions(-) create mode 100644 demo/app/App_Resources/Android/values/strings.xml create mode 100644 src/appcompat-activity.android.ts create mode 100644 src/platforms/android/include.gradle diff --git a/LICENSE b/LICENSE index c2ac7f0..c636872 100755 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright 2017 Eddy Verbruggen +Copyright 2018 Eddy Verbruggen Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index e8ab703..b075b2c 100755 --- a/README.md +++ b/README.md @@ -69,20 +69,30 @@ class MyClass { Note that on the iOS simulator this will just `resolve()`. ```js -fingerprintAuth.verifyFingerprint({ - title: 'Android title', // optional title (used only on Android) - message: 'Scan yer finger', // optional (used on both platforms) - for FaceID on iOS see the notes about NSFaceIDUsageDescription - authenticationValidityDuration: 10 // optional (used on Android, default 5) -}).then( - function() { - console.log("Fingerprint was OK"); - }, - function() { - console.log("Fingerprint NOT OK"); - } -) +fingerprintAuth.verifyFingerprint( + { + title: 'Android title', // optional title (used only on Android) + message: 'Scan yer finger', // optional (used on both platforms) - for FaceID on iOS see the notes about NSFaceIDUsageDescription + authenticationValidityDuration: 10, // optional (used on Android, default 5) + useCustomAndroidUI: false // set to true to use a different authentication screen (see below) + }) + .then(() => console.log("Biometric ID OK")) + .catch(err => console.log(`Biometric ID NOT OK: ${JSON.stringify(err)}`)); ``` +#### A nicer UX/UI on Android (`useCustomAndroidUI: true`) +The default authentication screen on Android is a standalone screen that (depending on the exact Android version) looks kinda 'uninteresting'. So with version 6.0.0 this plugin added the ability to override the default screen and offer an iOS popover style which you can activate by passing in `useCustomAndroidUI: true` in the function above. + +##### Mandatory change +To be able to use this screen, a change to `App_Resources/Android/AndroidManifest.xml` is required as our NativeScript activity needs to extend AppCompatActivity (note that in the future this may become the default for NativeScript apps). + +To do so, open the file and replace ` + Fingerprint + Fingerprint + + Cancel + Use password + OK + Enter your password to continue + A new fingerprint was added to this device, so your password is required. + + Use fingerprint in the future + use_fingerprint_to_authenticate_key + + Touch da sensor + + + Security -> Fingerprint\' to set up a fingerprint\"]]> + Go to \'Settings -> Security -> Fingerprint\' and register at least one fingerprint + Fingerprint not initialised + Fingerprint not available + Fingerprint not recognized + Password can\'t be empty + \ No newline at end of file diff --git a/demo/app/app.css b/demo/app/app.css index 1bdcb5f..53dbe1d 100644 --- a/demo/app/app.css +++ b/demo/app/app.css @@ -2,6 +2,10 @@ background-color: #F4F4F4; } +label { + font-size: 14; +} + .tab-content { color: #808080; padding: 20; @@ -14,15 +18,14 @@ } .status { + border-radius: 8; font-size: 16; - margin: 14; - padding: 8; - color: white; - background-color: brown; -} - -label { - font-size: 14; + margin: 20; + padding: 18 12; + color: #444444; + background-color: #cccccc; + border-color: #aaaaaa; + border-width: 1px; } button { diff --git a/demo/app/main-page.xml b/demo/app/main-page.xml index 836271c..73387d5 100644 --- a/demo/app/main-page.xml +++ b/demo/app/main-page.xml @@ -5,7 +5,7 @@ -