如何在Android和iOS的Cordova(Phonegap，ionic)中使用指纹认证

本文概述

要求
安卓系统
iOS
多平台包装

在智能手机中输入密码就像是2013-2014。由于对指纹传感器的支持已成为棉花糖(Marshmallow)中Android的本地组成部分, 在Apple中成为了Touch ID, 并且指纹传感器迅速成为了旗舰手机中的标准配置, 因此, 通过轻松地用手指触摸即可轻松解锁某些东西, 因此很容易被损坏。
如果我们的cordova应用程序中的设备上提供了此功能, 我们将不会忘记使用此功能, 而你的应用程序提供了使用它的方法。试想一下, 即时登录, 即时付款等。
要使用Cordova在我们的设备上使用指纹认证, 我们将使用2个插件(分别针对每个已知平台：Android和iOS)。
要求

具有指纹读取器支持的设备(iPhone> = 5s(对于苹果机为Apple, Android设备为带有指纹的Android设备))。

请注意, 在每个平台中, 都有一种方法可以检测是否支持指纹, 从而继续为旧设备提供支持。
值得一提的是, 如果你想在Cordova应用程序的初始化时实现此功能(即访问该应用程序, 你需要授予使用指纹的访问权限), 则需要在以下事件的ondeviceready事件期间或之后执行代码。文件：

document.addEventListener("deviceready", function(){ // Here the code to verificate the fingerprint }, false);

现在你已经了解了基础知识, 让我们开始吧！
安卓系统对于Android平台, 你需要使用cordova-plugin-android-fingerprint-auth。
该插件是根据Android 6.0 API网页引用的” 指纹对话框” 示例和” 确认凭据” 示例创建的。
该插件将打开一个本机对话框片段, 提示用户使用其指纹进行身份验证。如果设备具有安全的锁屏(模式, 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的文档中访问Global变量。该对象有4种可用方法：

isAvailable(isAvailableSuccess, isAvailableError)
加密(encryptConfig, successCallback, errorCallback)
解密(decryptConfig, successCallback, errorCallback)
删除(deleteConfg, successCallback, errorCallback)

使其工作的逻辑很简单, 检查设备是否具有指纹识别功能(如果已识别并已注册指纹), 然后使用crypto方法显示对话框, 该对话框可验证指纹并加密其中的一些数据, 你以后可以使用解密解密方法。
如果你想使用指纹设备进行身份验证, 那么你正在寻找加密方法。此方法需要一个具有其配置的对象, 下表列出了可用的属性：

参数	类型	default	描述
clientId	String	未定义	(必需)用作Android密钥存储区中应用程序密钥的别名。也用作” 共享首选项” 密钥的一部分, 用于用户加密用户凭据的密码。
用户名	String	未定义	用于创建加密令牌的凭证字符串, 并用作别名以检索密码。
密码	String	未定义	用于创建加密令牌的凭证字符串
代币	String	未定义	要解密的数据。对于delete()是必需的。
disableBackup	boolean	false	设置为true以删除” USE BACKUP” 按钮
maxAttempts	Number	5	设备最多可尝试5次。如果要允许少于5次尝试, 请设置此参数。
地区	String	” en_US”	更改身份验证对话框上显示的语言。英文：” en_US” 意大利语：” it” 西班牙语：” es” 俄语：” ru” 法语：” fr” 中文(简体)：” zh_CN” ” zh_SG” 中文(繁体)：” zh” ” zh_HK” ” zh_TW” ” zh_MO” 挪威文：” no” 葡萄牙语：” pt” 日语：” ja” 德语：” de”
userAuthRequired	boolean	true	要求用户使用指纹进行身份验证以授权密钥的每次使用。新的指纹注册将使密钥无效, 并且需要备份身份验证才能重新启用指纹身份验证对话框。
dialogTitle	String	未定义	设置指纹认证对话框的标题。
dialogMessage	String	未定义	设置指纹认证对话框的消息。
dialogHint	String	未定义	设置指纹认证对话框上的指纹图标显示的提示。

以下代码段显示了一个非常基本的实现, 并在所有可能的情况下(如果有用于检查指纹的设备并且已注册指纹)处理指纹认证：
注意以下代码段适用于最新版本。无论如何, 我们鼓励你检查插件的文档以进行可能的更改, 或者更多地了解插件的工作方式。此外, 如你所见, 有很多回调, 为了使代码更有条理, 我们建议你使用Javascript Promises来实现它。

// 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); });

执行加密方法后将显示对话框。简单快速的身份验证, 无需使用任何密码。

iOS 对于iOS平台, 你需要使用cordova-plugin-touch-id。
该插件可让你使用TouchID传感器(iPhone 5S)扫描用户的指纹。

与Cordova Plugman兼容。
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

成功安装后, 将在名为touchid的window.plugins中注册一个对象。
首先, 你需要检查用户是否已配置指纹扫描仪(为没有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。第一种方法将提供一个称为” 输入密码” 的后备选项, 该选项会在按下时显示默认的密码UI。第二种方法将提供一个称为” 输入密码” (不是密码)的后备选项, 使你可以提供自己的密码对话框。

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 );

如何在Android和iOS的Cordova(Phonegap，ionic)中使用指纹认证

上面方法的错误处理程序可能会收到错误代码-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"); } });

请注意, 你可以自行检查设备是否支持带有插件本身的指纹功能。
【如何在Android和iOS的Cordova(Phonegap，ionic)中使用指纹认证】玩得开心