zoukankan      html  css  js  c++  java
  • “指纹登录“ -- 项目中用到的两个cordova插件基本使用

    1. 概要:   

           最近项目中需要实现指纹登录,用到了两个cordova插件

        cordova-plugin-android-fingerprint-auth

        cordova-plugin-touch-id

           简单记录一下它们的基本使用过程;

    2. 实现流程:

    • 初始化 -- 获取手机指纹识别支持情况(传感器支持,API支持,用户设置支持等)
    • 用户凭证登录(通常是用户名+密码)成功,调取系统指纹验证,验证通过,本地存储用户凭证;
    • 登录画面调用系统指纹验证,验证通过,使用本地存储的用户凭证执行登录。

           对手机指纹验证的个人理解是:指纹认证通过的用户,对手机而言是可信用户;而对我们的系统而言,拥有合法有效凭证的人才是可信用户。第2步中,在用户使用凭证登录成功后,调取指纹验证,意在让用户“授权”我们的程序,能够在指纹验证通过的情况下使用其凭证,在用户授权程序后,程序才可以把用户凭证记录下来,以用于之后的登录过程。这两个可信用户联系起来,就相当于手机的可信用户就是我们系统的可信用户,在用户通过指纹验证后,就可以成功登录系统。

    3. 插件使用

    1) cordova-plugin-android-fingerprint-auth
     

           文档地址:https://www.npmjs.com/package/cordova-plugin-android-fingerprint-auth

           这个插件将打开一个本地对话框,提示用户使用指纹进行身份验证。如果设备有安全锁屏(模式、PIN或密码),用户可以缩退选择使用其他方法,进行身份验证。

           注意:此插件仅适用于制造商已实现Android 6.0指纹认证API的设备。这个插件不支持Samsung Pass SDK,也不是所有的三星设备都实现Android 6.0指纹认证API。

        

    // 插件安装
    cordova plugin add cordova-plugin-android-fingerprint-auth

           插件安装后,会自动在 window 上绑定 FingerprintAuth 属性,使用它访问插件                       

    // 使用插件
    Call isAvailable() to check the fingerprint status.
     
    Call encrypt() or decrypt() show the Authentication Dialog.
     
    Call delete() when you want to delete the cipher for the user.

           另外,值得一提的是,该插件在指纹验证过程中提供了凭证加密解密的功能;

           即在保存凭证的指纹验证过程中将用户凭证作为参数传给它,success 回调时会得到 password 加密后的 token;

           在执行指纹验证登录的过程中将该token传给它,在 success 回调时会得到解密后的 password;

           相当于插件给本地存储的凭证加了个签名。                

                    

    // 检查指纹验证可用性
    FingerprintAuth.isAvailable(isAvailableSuccessCallback, isAvailableErrorCallback);
    
    // 检查指纹验证可用性的成功回调
    function isAvailableSuccessCallback(result) {
        // result = {
        // isAvailable:boolean, // Fingerprint Authentication Dialog is available for use.
        // isHardwareDetected:boolean, // Device has hardware fingerprint sensor.
        // hasEnrolledFingerprints:boolean // Device has any fingerprints enrolled.
        // }
    }
    
    // 指纹验证;如果需要加解密凭证,需要传入clientId,usename,password
    // 验证成功的回调中可以获得加密过的token
    FingerprintAuth.encrypt(encryptConfig, encryptSuccessCallback, encryptErrorCallback);
    // encryptConfig 参数是一个参数对象
    var encryptConfig = {
    
        clientId         : undefined, // 在使用凭证加解密时是必须的,用于访问使用android key store,并且是加密的盐;
        usename          : undefined, // 在使用凭证加解密时是必须的,加密的盐;
        password         : undefined,// 加密时需要,解密时不需要
        token            : undefined, // 加密时不需要,解密时是必须的,
        disableBackup    : false, // 是否允许用户使用缩退方案,即当指纹验证有问题时是否提供用户密码等方式验证的按钮;
        maxAttempts      : '5', // 最大重试次数,默认为5次,可以比5小
        locale           : "en_US", // 对话框的语言,默认是英文en_US
        userAuthRequired : "false",
        encryptNoAuth    : "false",
        dialogTitle      : 'title', // 对话框标题
        dialogMessage    : 'message', // 对话框的提示文字
        dialogHint       : 'hintIconMsg' // 对话框的指纹图标显示的文字
    };
    
    // 验证成功的回调
    function encryptSuccessCallback(result) {
        // result = {
        // withFingerprint:boolean, // 使用指纹验证的.
        // withBackup:boolean, // 使用缩退方案验证的.
        // token:boolean // 验证成功获得的token.
        // }
    }
    
    // 指纹验证,解密时,token参数是必须的
    // 如果不需要解密凭证,请使用encrypt(不传入相应option值)
    // 验证成功的回调中可以获得解密得到的凭证信息
    FingerprintAuth.decrypt(decryptConfig, encryptSuccessCallback, encryptErrorCallback);
    function encryptSuccessCallback(result) {
    
        // result = {
        // withFingerprint:boolean, // 使用指纹验证的.
        // withBackup:boolean, // 使用缩退方案验证的.
        // password:boolean // 验证成功,解密得到password
        // }
    }
    
    FingerprintAuth.delete(config, successCallback, errorCallback);
    FingerprintAuth.dismiss(successCallback, errorCallback);
    FingerprintAuth.ERRORS = {
        Key : value
    }

    2)cordova-plugin-touch-id
                    

           文档地址:https://github.com/EddyVerbruggen/cordova-plugin-touch-id

    // 安装后,在使用 window.plugins.touchid 访问插件
    cordova plugin add cordova-plugin-touch-id
                    

           注意:         

           ios插件提供了指纹验证的功能,不提供上边android插件里加解密凭证的能力;

           插件支持iphoneX(有人脸,没指纹);

           isAvailable函数的successCallback中可以获得检测到验证类型:iphoneX得到是‘face’, 其他是‘touch’,可以在初始化时执行该函数,检证使用的什么验证,进而给用户显示合适的文字等;

           

    // 初始化
    window.plugins.touchid.isAvailable(
        function (type) {
            alert(type); // 成功回调: 'face'(iPhone X), 'touch'(others) 
        },
        function (msg) {
            alert('not available, message: ' + msg); // 错误回调
        }
    );
    
    // 指纹(人脸)验证,指纹验证识别可以提供缩退策略的按钮,使用passcode(解锁密码)验证
    window.plugins.touchid.verifyFingerprint(
        'Scan your fingerprint please', 
        function (msg) {
            alert('ok: ' + msg); //成功回调
        }, 
        function (msg) {
            alert('not ok: ' + JSON.stringify(msg));  
        }
    );
    
    // 指纹验证失败是,对话框中提供用户使用“password”进行登录的按钮,用户点击后会在errorCallback中收到error code 为-2,我们可以利用该信息弹出我们自己的密码输入框;
    
    window.plugins.touchid.verifyFingerprintWithCustomPasswordFallback(
        'Scan your fingerprint please', // 提示指纹验证 
        function (msg) {
            alert('ok: ' + msg);
        },
        function (msg) {
            alert('not ok: ' + JSON.stringify(msg));
        }
    );
    
    // 功能类似上边的方法,多了一个case: “password”的按钮文字我们可以定制
    window.plugins.touchid.verifyFingerprintWithCustomPasswordFallbackAndEnterPasswordLabel(
        'Scan your fingerprint please', // 提示指纹验证 
        'Enter PIN', // 自定义输入密码的按钮文字 
        function (msg) {
            alert('ok: ' + msg);
        },
        function (msg) {
            alert('not ok: ' + JSON.stringify(msg));
        }
    );

     
    ------------------------  补充:20200426

    最近用到了插件  cordova-plugin-fingerprint-aiohttps://www.npmjs.com/package/cordova-plugin-fingerprint-aio

    这个插件参考了上边两个插件,把android和ios统一了,尽可能的抹平了之前两个插件处理逻辑上的差异点,并且在github上相对活跃的多,建议使用这个;

    注意:这个插件目前最新3.0.1版本,对应cordova-android版本要求8.0.0以上

  • 相关阅读:
    sql函数 StringSplit(SELECT * from Split('黄色,蓝色,黑色',','))
    跨表循环写插入sql语句
    将ExCel导入数据库
    行转列
    js正则匹配
    ASP.NET下载远程图片保存到本地的方法、保存抓取远程图片
    C# 解析json类型字符串
    上传图片
    存储过程学习
    //js验证数字输入,以及保留俩位
  • 原文地址:https://www.cnblogs.com/petunsecn/p/10419700.html
Copyright © 2011-2022 走看看