• uni-app指纹识别登录


      uniapp使用指纹识别功能,一般有2种方式:官方api验证或用plus.fingerprint进行验证,下面分别讲解一下。

      使用指纹识别的基础是需要开启指纹识别的权限:首先需要获取得到权限,在 manifest.json文件中配置

    一、官方生物认证API

      官方生物认证说明:https://uniapp.dcloud.io/api/system/authentication

      实现方式:

      第一步:uni.checkIsSupportSoterAuthentication: 获取本机支持认证方式,res.supportMode = ['fingerPrint'] 只支持指纹识别,res.supportMode = ['fingerPrint', 'facial'] 支持指纹识别和人脸识别。

      第二步: uni.checkIsSoterEnrolledInDevice : 获取设备内是否录入指纹信息

      第三步:uni.startSoterAuthentication开始 SOTER 生物认证

      具体实现代码及注释如下:

    <template>
      <view>
        <view>{{ result }}</view>
      </view>
    </template>
    <script>
    export default {
      data() {
        return {
          result: ''
        }
      },
      onLoad() {
        this.checkIsSupportSoterAuthentication()
      },
      methods: {
        /**
          * uni.checkIsSupportSoterAuthentication:  获取本机支持认证方式( 
          *         res.supportMode = ['fingerPrint'] 只支持指纹识别
          *         res.supportMode = [] 不具备任何被SOTER支持的生物识别方式
          *         res.supportMode = ['fingerPrint', 'facial'] 支持指纹识别和人脸识别
          * )
          * 需求: 当前业务只要求指纹识别功能,(如你的业务中需要人脸识别,此方法也可以验证)
          *
        */
        checkIsSupportSoterAuthentication(){
            // #ifdef APP-PLUS || MP-WEIXIN
            uni.checkIsSupportSoterAuthentication({
              success(res) {
              console.log(res);
              // 如果当前设备支持生物识别方式,且支持指纹识别方式
              if(res.supportMode && res.supportMode.includes('fingerPrint')){
                /** 
                  * uni.checkIsSoterEnrolledInDevice : 获取设备内是否录入指纹信息
                  *  checkAuthMode: 'fingerPrint', // 检验指纹信息
                  * */
                uni.checkIsSoterEnrolledInDevice({
                  checkAuthMode: 'fingerPrint', // 检验指纹信息
                  success(res) {
                    console.log(res.isEnrolled)
                    if(res.isEnrolled == true){
                      /** 
                        * 开始 SOTER 生物认证
                        * 执行成功,进行后续操作
                        * */
                      uni.startSoterAuthentication({
                        requestAuthModes: ['fingerPrint'],
                        challenge: '123456',
                        authContent: '请用指纹解锁',
                        success(res) {
                            console.log(res);
                            uni.showToast({
                                title: "识别成功",
                                duration: 5000,
                                icon:'none'
                            })
                            //指纹识别成功后,进行后续工作
                        },
                        fail(err) {
                            console.log(err,'66666666666666666');
                        },
                        complete(res) {
                            console.log(res);
                        }
                      })
                    }else{
                      this.result = '此设备未录入指纹,请到设置中开启';
                    }
                  },
                  fail(err) {
                    uni.showModal({
                      title:'温馨提示',
                      content:'此设备未录入指纹,请到设置中开启',
                      showCancel: false,
                      success:function(res){
                          // 进行后续逻辑
                      }
                    })
                  }
                })
              }
              else{
                this.result = "此设备不支持指纹识别功能"
              }
            },
            fail(err) {
              uni.showModal({
                title:'温馨提示',
                content:'此设备不支持指纹识别功能',
                showCancel: false,
                success:function(res){
                    // 进行后续逻辑
                }
              })
            }
          })
          // #endif
          
          // #ifndef APP-PLUS || MP-WEIXIN
          this.result = '此平台不支持指纹识别';
          // #endif
        }
      }
    }
    </script>

      其实比较简单,就是获取生物认证方式,判断是否有指纹识别,再进行指纹识别即可。

    二、使用Fingerprint模块管理指纹识别

      使用插件指纹模板:https://ext.dcloud.net.cn/plugin?id=358,Fingerprint模块管理指纹识别,要使用指纹识别功能需要具备条件:

    • 确认当前设备环境是否支持指纹识别,
    • 当前设备是否设置密码锁屏,
    • 当前设备是否已经录入指纹。

      (Android平台6.0及以上系统支持,只识别标准Android的指纹API,仅适配Google官方指纹识别的标准接口的设备)

      以上条件都要满足才可以使用识别功能。识别功能指的是与手机中已录入的指纹进行比对检测,也就是说,只要与手机中录入任意指纹比对成功,便可进入成功回调。

      因为目前市场上还是有很多设备不支持指纹,所以要先使用 plus.fingerprint.isSupport()  方法判断(以下三个方法均返回值为Boolean类型)

    // #ifdef APP-PLUS
    if (!plus.fingerprint.isSupport()) {
       plus.nativeUI.toast('此设备不支持指纹识别');
       console.log('此设备不支持指纹识别')
    }
    // #endif

      再使用plus.fingerprint.isKeyguardSecure()  判断是否开启密码锁屏

    // #ifdef APP-PLUS
    if (!plus.fingerprint.isKeyguardSecure()) {
       plus.nativeUI.toast('此设备未设置密码锁屏');
       console.log('此设备未设置密码锁屏')
    }
    // #endif

      然后使用 plus.fingerprint.isEnrolledFingerprints()  判断是否录入指纹

    // #ifdef APP-PLUS
    if (!plus.fingerprint.isEnrolledFingerprints()) {
       plus.nativeUI.toast('此设备未录入指纹');
       console.log('此设备未录入指纹')
    }
    // #endif

      指纹识别方法代码:

    <template>
        <view>
            <button type="primary" @tap="fingerprint()" :disabled="disabled">按下开始识别指纹</button>
            <view style=" 100%;text-align: center;">
                {{result}}
            </view>
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    result:"",
                    disabled:true
                }
            },
            onLoad() {
                // #ifdef APP-PLUS
                if (!plus.fingerprint.isSupport()) {
                    this.result = '此设备不支持指纹识别';
                    this.disabled = true;
                }
                else if (!plus.fingerprint.isKeyguardSecure()) {
                    this.result = '此设备未设置密码锁屏,无法使用指纹识别';
                    this.disabled = true;
                }
                else if (!plus.fingerprint.isEnrolledFingerprints()) {
                    this.result = '此设备未录入指纹,请到设置中开启';
                    this.disabled = true;
                }
                else {
                    this.result = '此设备支持指纹识别';
                    this.disabled = false;
                }
                // #endif
                // #ifdef MP-WEIXIN
                this.disabled = false;
                this.result = '请在微信真机中使用,模拟器不支持';
                // #endif
                // #ifndef APP-PLUS || MP-WEIXIN
                this.result = '此平台不支持指纹识别';
                // #endif
            },
            methods: {
                fingerprint: function() {
                    // #ifdef APP-PLUS
                    plus.fingerprint.authenticate(function() {
                        plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
                        plus.nativeUI.alert('指纹识别成功');
                    }, function(e) {
                        switch (e.code) {
                            case e.AUTHENTICATE_MISMATCH:
                                plus.nativeUI.toast('指纹匹配失败,请重新输入');
                                break;
                            case e.AUTHENTICATE_OVERLIMIT:
                                plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
                                plus.nativeUI.alert('指纹识别失败次数超出限制,请使用其它方式进行认证');
                                break;
                            case e.CANCEL:
                                plus.nativeUI.toast('已取消识别');
                                break;
                            default:
                                plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
                                plus.nativeUI.alert('指纹识别失败,请重试');
                                break;
                        }
                    });
                    // Android平台手动弹出等待提示框 
                    if ('Android' == plus.os.name) {
                        plus.nativeUI.showWaiting('指纹识别中...').onclose = function(){
                            plus.fingerprint.cancel();
                        }
                    }
                    // #endif
                    
                    // #ifdef MP-WEIXIN
                    wx.startSoterAuthentication({
                        requestAuthModes: ['fingerPrint'],
                        challenge: '123456',
                        authContent: '请用指纹解锁',
                        success(res) {
                            uni.showToast({
                                title: '识别成功',
                                mask: false,
                                duration: 1500
                            });
                        }
                    })
                    // #endif
                },
            }
        }
    </script>
  • 相关阅读:
    React实现新闻网站--使用动态路由获取不同列表内容
    Bootstrap4 轮播+模态框+提示框+弹出框
    JDK 升级问题小结
    JDK8 指南(译)
    如何学习一门编程语言
    redis 系列5 数据结构之字典(上)
    sql server 临时表(上) Tempdb概述
    redis 系列4 数据结构之链表
    redis 系列3 数据结构之简单动态字符串 SDS
    redis 系列2 知识点概述
  • 原文地址:https://www.cnblogs.com/goloving/p/14123155.html
Copyright © 2020-2023  润新知