cordova 指纹验证登录

APP 专栏收录该内容
1 篇文章 0 订阅

           关键词:指纹验证登录

           需求:在APP上实现指纹验证登录

           指纹验证登录,顾名思义,基于手机系统提供的指纹认证API,实现方便用户登录的功能。

           实现流程:

                        1:初始化 -- 获取手机指纹识别支持情况(传感器支持,API支持,用户设置支持等)

                       

                        2:用户凭证登录(通常是用户名+密码)成功,调取系统指纹验证,验证通过,本地存储用户凭证;

                       

                        3:登录画面调用系统指纹验证,验证通过,使用本地存储的用户凭证执行登录。

                 

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

           使用的插件:

                   

                   android: cordova-plugin-android-fingerprint-auth

                   ios: cordova-plugin-touch-id

 

            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.

                                // }

                        }

                FingerprintAuth.encrypt(encryptConfig, encryptSuccessCallback, encryptErrorCallback)

                        encryptConfig 参数是一个参数对象:

                        {

                                clientId: string // 在使用凭证加解密时是必须的,因为他作为android key store使用,并且是加密是的盐;

                                usename: string // 在使用凭证加解密时是必须的,因为他作为android key store使用,并且是加密是的盐;

                                password: string // 加密时需要,解密时不需要

                                token: string // 加密时不需要,解密时是必须的,

                                disableBackup: boolean // 是否允许用户使用缩退方案,即当指纹验证有问题时是否提供用户密码等方式验证的按钮;

                                maxAttempts:number // 最大重试次数,默认为5次,可以比5小

                                locale: string // 对话框的语言,默认是英文en_US

                                userAuthRequired: boolean

                                encryptNoAuth: boolean

                                dialogTitle: string // 对话框标题

                                dialogMessage: string // 对话框的提示文字

                                dialogHint: string // 对话框的指纹图标显示的文字

                        }

                        

                        function encryptSuccessCallback(result) {

                                // result = {

                                        // withFingerprint:boolean, // 使用指纹验证的.

                                        // withBackup:boolean, // 使用缩退方案验证的.

                                        // token:boolean // 验证成功获得的token.

                                // }

                        }

                FingerprintAuth.decrypt(decryptConfig, encryptSuccessCallback, encryptErrorCallback)

                        encryptConfig 参数在encrypt中已经描述,token是必须的

                        function encryptSuccessCallback(result) {

                                // result = {

                                // withFingerprint:boolean, // 使用指纹验证的.

                                // withBackup:boolean, // 使用缩退方案验证的.

                                // password:boolean // 验证成功,解密得到password

                                // }

                FingerprintAuth.delete(config, successCallback, errorCallback)

                FingerprintAuth.dismiss(successCallback, errorCallback)

                FingerprintAuth.ERRORS JSON Object

                2: cordova-plugin-touch-id

                

                https://github.com/EddyVerbruggen/cordova-plugin-touch-id

                

                cordova plugin add cordova-plugin-touch-id

                安装后,在使用 window.plugins.touchid 访问插件

                

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

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

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

                // 初始化

                window.plugins.touchid.isAvailable(

                         function(type) {

                                 alert(type)

                        }, // type returned to success callback: 'face' on iPhone X, 'touch' on other devices 

                         function(msg) {

                                 alert('not available, message: ' + msg)

                        } // error handler: no TouchID available 

                 );

                // 指纹(人脸)验证,指纹验证识别可以提供缩退策略的按钮,使用passcode(解锁密码)验证

                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('not ok: ' + JSON.stringify(msg))

                        } // error handler with errorcode and localised reason 

                 );

                // 指纹验证失败是,对话框中提供用户使用“password”进行登录的按钮,用户点击后会在errorCallback中收到error code 为-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 

                 );

                // 功能类似上边的方法,多了一个case: “password”的按钮文字我们可以定制

                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 

                 );

 

                Since plugin version 3.3.0 the success callback of isAvailable receives the type of biometric ID, which is either touch or face.

                You can use this to display "Face ID" or "Touch ID" as appropriate in your app.

 

 

 

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

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

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

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

  • 2
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

鬼神童子

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值