本文概述
- 要求
- 安卓系统
- iOS
- 多平台包装
如果我们的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)
如果你想使用指纹设备进行身份验证, 那么你正在寻找加密方法。此方法需要一个具有其配置的对象, 下表列出了可用的属性:
参数 | 类型 | 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);
});
执行加密方法后将显示对话框。简单快速的身份验证, 无需使用任何密码。
该插件可让你使用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
);
上面方法的错误处理程序可能会收到错误代码-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)中使用指纹认证】玩得开心
推荐阅读
- 如何在Cordova应用程序中使用Dropbox
- android studio错误(无法启动守护程序进程)
- Android Studio-JAVA_HOME没有指向有效的JVM安装
- Sinatra APP与树莓上的工头一起运行在家庭网络中无法访问
- Android应用程序中的底部导航栏
- Ionic Cordova构建android无法正常工作
- Jersey初始化功能(在Application对象或ServletContextListner中)
- Jersey Exception Mapper不处理Resource Constructor中的异常
- java.lang.NoSuchMethodError(org.glassfish.jersey.server.ApplicationHandler。)