Ввод пароля в ваш смартфон — это, например, 2013-2014. Благодаря поддержке датчиков отпечатков пальцев, которые становятся неотъемлемой частью Android в Marshmallow, Touch ID в Apple и датчики отпечатков пальцев быстро становятся стандартной платой во флагманских телефонах, в результате чего вас легко испортить, просто разблокировав что-то одним прикосновением пальца.
Мы не можем забыть использовать эту функцию, если она доступна на устройстве в нашем приложении Cordova, и ваше приложение предлагает способ ее использования. Представьте себе, мгновенный вход в систему, мгновенный платеж и т. Д.
Чтобы использовать аутентификацию по отпечатку пальца на нашем устройстве с использованием cordova, мы собираемся использовать 2 плагина (соответственно для каждой известной платформы: Android и iOS).
Требования
- Устройство (iPhone> = 5 с для Apple и Android-устройство с отпечатком пальца) с поддержкой считывателя отпечатков пальцев.
Обратите внимание, что на каждой платформе есть способ определить, поддерживается ли отпечаток пальца или нет, чтобы обеспечить поддержку старых устройств.
Стоит сказать, что если вы хотите реализовать эту функцию при инициализации вашего приложения Cordova (то есть, чтобы получить доступ к приложению, вам нужно предоставить доступ по отпечатку пальца), вам необходимо выполнить код во время или после ondeviceready событие документа:
document.addEventListener("deviceready", function(){
// Here the code to verificate the fingerprint
}, false);Теперь, когда вы знаете основы, давайте начнем!
Android
Для платформы Android вам необходимо использовать Cordova-плагин-андроид-отпечатков пальцев аутентификации.
Этот плагин был создан со ссылкой на Образец «Отпечаток пальца» и Подтвердите образец учетных данных ссылается на Веб-страница API Android 6.0.
Этот плагин откроет собственный фрагмент диалога, предлагающий пользователю пройти аутентификацию с использованием своего отпечатка пальца. Если устройство имеет защищенный экран блокировки (шаблон, PIN-код или пароль), пользователь может выбрать аутентификацию, используя этот метод в качестве резервной копии.
Чтобы установить этот плагин в свой проект, выполните в командной строке следующую команду:
cordova plugin add cordova-plugin-android-fingerprint-auth
REM Or clone the repository
cordova plugin add https://github.com/mjwheatley/cordova-plugin-android-fingerprint-auth.gitПосле успешной установки глобальная переменная будет доступна в документе с именем FingerprintAuth. Этот объект имеет 4 доступных метода:
- isAvailable (isAvailableSuccess, isAvailableError)
- encrypt (encryptConfig, successCallback, errorCallback)
- decrypt (decryptConfig, successCallback, errorCallback)
- удалить (deleteConfg, successCallback, errorCallback)
Логика для его работы проста: проверьте, есть ли на устройстве распознавание отпечатков пальцев, в случае если оно имеет и зарегистрировало отпечатки пальцев, затем используйте метод шифрования, чтобы показать диалоговое окно, которое проверяет отпечаток пальца и зашифровывает некоторые данные внутри, которые вы можете расшифровать позже, используя метод расшифровки.
Если вы ищете что-то для аутентификации с помощью устройства идентификации по отпечаткам пальцев, вам нужен метод шифрования. Этот метод ожидает объект с его конфигурацией, доступные свойства перечислены в следующей таблице:
| ID клиента | строка | не определено | (ТРЕБУЕТСЯ) Используется в качестве псевдонима для секретного ключа вашего приложения в Android Key Store. Также используется как часть ключа Shared Preferences для шифрованного userd для шифрования учетных данных пользователя. |
| имя пользователя | строка | не определено | Используется для создания строки учетных данных для зашифрованного токена и в качестве псевдонима для получения шифра. |
| пароль | строка | не определено | Используется для создания строки учетных данных для зашифрованного токена |
| знак | строка | не определено | Данные для расшифровки. необходимые за decrypt(), |
| disableBackup | логический | ложный | Установите значение true, чтобы удалить кнопку «ИСПОЛЬЗОВАТЬ РЕЗЕРВ. |
| maxAttempts | число | 5 | Максимальное устройство составляет 5 попыток. Установите этот параметр, если вы хотите разрешить менее 5 попыток. |
| место действия | строка | «En_US» | Измените язык, отображаемый в диалоговом окне аутентификации.
|
| userAuthRequired | логический | правда | Требовать от пользователя аутентификации с помощью отпечатка пальца для авторизации каждого использования ключа. Новая регистрация отпечатка пальца сделает недействительным ключ и потребует резервного копирования аутентификации, чтобы повторно включить диалог аутентификации отпечатка пальца. |
| dialogTitle | строка | не определено | Задайте заголовок диалогового окна аутентификации по отпечатку пальца. |
| dialogMessage | строка | не определено | Установите сообщение в диалоговом окне аутентификации по отпечатку пальца. |
| dialogHint | строка | не определено | Установите подсказку, отображаемую значком отпечатка пальца в диалоговом окне аутентификации отпечатка пальца. |
Следующий фрагмент демонстрирует очень простую реализацию и обрабатывает аутентификацию по отпечатку пальца со всеми возможными случаями (если есть устройство, которое проверяет отпечаток пальца, и есть зарегистрированные отпечатки пальцев):
Заметка
Следующий фрагмент работает с последней версией. Мы рекомендуем в любом случае проверить документацию плагина на предмет возможных изменений или узнать больше о том, как работает плагин. Кроме того, как вы можете видеть, есть много обратных вызовов, чтобы сделать ваш код более организованным, мы рекомендуем вам реализовать его, используя Обещания JavaScript.
// Check if device supports fingerprint
/**
* @return {
* isAvailable:boolean,
* isHardwareDetected:boolean,
* hasEnrolledFingerprints:boolean
* }
*/
FingerprintAuth.isAvailable(function (result) {
console.log("FingerprintAuth available: " + JSON.stringify(result));
// If has fingerprint device and has fingerprints registered
if (result.isAvailable == true && result.hasEnrolledFingerprints == true) {
// Check the docs to know more about the encryptConfig object :)
var encryptConfig = {
clientId: "myAppName",
username: "currentUser",
password: "currentUserPassword",
maxAttempts: 5,
locale: "en_US",
dialogTitle: "Hey dude, your finger",
dialogMessage: "Put your finger on the device",
dialogHint: "No one will steal your identity, promised"
}; // See config object for required parameters
// Set config and success callback
FingerprintAuth.encrypt(encryptConfig, function(_fingerResult){
console.log("successCallback(): " + JSON.stringify(_fingerResult));
if (_fingerResult.withFingerprint) {
console.log("Successfully encrypted credentials.");
console.log("Encrypted credentials: " + result.token);
} else if (_fingerResult.withBackup) {
console.log("Authenticated with backup password");
}
// Error callback
}, function(err){
if (err === "Cancelled") {
console.log("FingerprintAuth Dialog Cancelled!");
} else {
console.log("FingerprintAuth Error: " + err);
}
});
}
/**
* @return {
* isAvailable:boolean,
* isHardwareDetected:boolean,
* hasEnrolledFingerprints:boolean
* }
*/
}, function (message) {
console.log("isAvailableError(): " + message);
}); Диалог будет показан после выполнения encrypt метод. Простая и быстрая аутентификация без использования пароля.
 |  |  |
IOS
Для платформы iOS вам необходимо использовать Cordova-плагин-сенсорный идентификатор.
Этот плагин позволяет сканировать отпечатки пальцев вашего пользователя с помощью датчика TouchID (iPhone 5S).
- Совместим с Кордова Плагман.
- Минимальная версия iOS — 8 (обратные вызовы ошибок будут изящно вызываться в более низких версиях).
- Требуется сканер отпечатков пальцев, поэтому требуется iPhone 5S или новее.
Чтобы установить этот плагин в свой проект, выполните в командной строке следующую команду:
cordova plugin add cordova-plugin-touch-id
#Or clone from the repo
cordova plugin add https://github.com/EddyVerbruggen/cordova-plugin-touch-idПосле успешной установки объект будет зарегистрирован в window.plugins названный touchid,
Сначала вы захотите проверить, есть ли у пользователя настроенный сканер отпечатков пальцев (чтобы обеспечить откат для пользователей без iPhone 5s или ниже), используйте обратный вызов успеха, чтобы использовать другие методы.
window.plugins.touchid.isAvailable(
function() {
alert('available!')
}, // success handler: TouchID available
function(msg) {
alert('not available, message: ' + msg)
} // error handler: no TouchID available
);Если был вызван обработчик onSuccess, вы можете отсканировать отпечаток пальца. Есть два варианта: verifyFingerprint а такжеverifyFingerprintWithCustomPasswordFallback, Первый метод предложит альтернативную опцию, называемую «введите пароль», которая при нажатии отображает пользовательский интерфейс пароля по умолчанию. Второй метод предлагает альтернативную опцию под названием «введите пароль» (не пароль), которая позволяет вам предоставить свой собственный диалог ввода пароля.
window.plugins.touchid.verifyFingerprint(
'Scan your fingerprint please', // this will be shown in the native scanner popup
function(msg) {
alert('ok: ' + msg);
}, // success handler: fingerprint accepted
function(msg) {
alert('Something is wrong: ' + JSON.stringify(msg));
} // error handler with errorcode and localised reason
);
Обработчик ошибок описанного выше метода может получить код ошибки -2 Это означает, что пользователь нажал кнопку возврата пароля.
window.plugins.touchid.verifyFingerprintWithCustomPasswordFallback(
'Scan your fingerprint please', // this will be shown in the native scanner popup
function(msg) {
alert('ok: ' + msg)
}, // success handler: fingerprint accepted
function(msg) {
alert('not ok: ' + JSON.stringify(msg))
} // error handler with errorcode and localised reason
);Будет отображена кнопка с надписью «Введите пароль», если отпечаток пальца не будет распознан. Если вы хотите указать свой собственный ярлык (возможно, «Введите PIN-код»), вы можете использовать названную функцию verifyFingerprintWithCustomPasswordFallbackAndEnterPasswordLabel (добавлено в версии 3.1.0):
window.plugins.touchid.verifyFingerprintWithCustomPasswordFallbackAndEnterPasswordLabel(
'Scan your fingerprint please', // this will be shown in the native scanner popup
'Enter PIN', // this will become the 'Enter password' button label
function(msg) {
alert('ok: ' + msg)
}, // success handler: fingerprint accepted
function(msg) {
alert('not ok: ' + JSON.stringify(msg))
} // error handler with errorcode and localised reason
);Повышение безопасности на iOS
Начиная с iOS9 можно проверить, изменился ли список зарегистрированных отпечатков пальцев с момента последней проверки. Рекомендуется добавить эту проверку, чтобы вы могли противостоять хакерским атакам в вашем приложении. Увидеть Эта статья Больше подробностей.
Так что вместо проверки отпечатка пальца после isAvailable добавить еще одну проверку. В случае didFingerprintDatabaseChange возвращаетсяtrue Вы, вероятно, хотите повторно аутентифицировать своего пользователя, прежде чем снова принимать действительные отпечатки пальцев.
window.plugins.touchid.isAvailable(
// success handler; available
function() {
window.plugins.touchid.didFingerprintDatabaseChange(
function(changed) {
if (changed) {
// re-auth the user by asking for his credentials before allowing a fingerprint scan again
} else {
// call the fingerprint scanner
}
}
);
},
// error handler; not available
function(msg) {
// use a more traditional auth mechanism
}
);Многоплатформенная оболочка
Поскольку код плагинов различается, вам необходимо проверить, является ли ОС устройства iOS или Android, чтобы избежать ошибок. Если вы работаете на обеих платформах, вы можете использовать следующую функцию-обертку, чтобы проверить, когда и какой код использовать:
function verifyFingerprint(callbacks){
var triggerCallbackIfExists = function(callback_name){
if(typeof(callbacks[callback_name]) == "function"){
// Execute function
callbacks[callback_name]();
}
};
// if IOS
if(!!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)){
triggerCallbackIfExists("ios");
// If Android
}else if(navigator.userAgent.toLowerCase().indexOf("android") > -1){
triggerCallbackIfExists("android");
// If other OS
}else{
triggerCallbackIfExists("others");
}
}
И используйте это как:
verifyFingerprint({
ios: function(){
// Here the code to verify the fingerprint only on IOS
},
android: function(){
// Here the code to verify the fingerprint only in Android
},
others: function(){
// alert("There's no plugin to verify fingerprint in this platform");
}
});Обратите внимание, что вам нужно проверить, поддерживает ли устройство функцию распознавания отпечатков пальцев с помощью самого плагина.
Повеселись
