uni-app指纹识别登录

时间:2024-03-08 08:33:56

  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="width: 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>