当前位置： 正文

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

03-20 App/移动开发/跨端 342

本文概述

在智能手机中输入密码就像是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
);
扫描指纹

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

请注意, 你可以自行检查设备是否支持带有插件本身的指纹功能。

玩得开心

微信公众号
手机浏览(小程序)
0
分享到：

猜你喜欢

swift数据类型介绍 – Swift最新教程
App/移动开发/跨端

03-20 524
swift闭包和闭包函数 – Swift最新教程
App/移动开发/跨端

03-20 472
Swift编程语言的历史介绍
App/移动开发/跨端

03-20 434
Swift变量介绍和用法详解
App/移动开发/跨端

03-20 454
Swift数组介绍和用法详细示例
App/移动开发/跨端

03-20 564
swift数组的使用和操作全解 – Swift最新教程
App/移动开发/跨端

03-20 478
没有账号？ 忘记密码？