uni-app指纹识别登录

无所老魏 發表於 2020-12-11 22:15:00

uniapp使用指纹识别功能，一般有2种方式：官方api验证或用plus.fingerprint进行验证，下面分别讲解一下。
　　使用指纹识别的基础是需要开启指纹识别的权限：首先需要获取得到权限，在 manifest.json文件中配置
<img src="https://img2020.cnblogs.com/blog/1158910/202012/1158910-20201211221706450-1111659981.png">
<img src="https://img2020.cnblogs.com/blog/1158910/202012/1158910-20201211220352458-186865453.png">
<h3 class="title-article">一、官方生物认证API</h3>
　　官方生物认证说明：https://uniapp.dcloud.io/api/system/authentication
　　实现方式：
　　第一步：<code>uni.checkIsSupportSoterAuthentication:</code> 获取本机支持认证方式，<code>res.supportMode = ['fingerPrint']</code> 只支持指纹识别，<code>res.supportMode = ['fingerPrint', 'facial']</code> 支持指纹识别和人脸识别。
　　第二步: <code>uni.checkIsSoterEnrolledInDevice</code> : 获取设备内是否录入指纹信息
　　第三步：<code>uni.startSoterAuthentication</code>开始 SOTER 生物认证
　　具体实现代码及注释如下：
<div class="cnblogs_code">
<pre><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></pre>
</div>
　　其实比较简单，就是获取生物认证方式，判断是否有指纹识别，再进行指纹识别即可。
<h3>二、使用Fingerprint模块管理指纹识别</h3>
　　使用插件指纹模板：https://ext.dcloud.net.cn/plugin?id=358，Fingerprint模块管理指纹识别，要使用指纹识别功能需要具备条件：
<ul>
<li>确认当前设备环境是否支持指纹识别，</li>
<li>当前设备是否设置密码锁屏，</li>
<li>当前设备是否已经录入指纹。</li>
</ul>
　　（Android平台6.0及以上系统支持，只识别标准Android的指纹API，仅适配Google官方指纹识别的标准接口的设备）
　　以上条件都要满足才可以使用识别功能。识别功能指的是与手机中已录入的指纹进行比对检测，也就是说，只要与手机中录入任意指纹比对成功，便可进入成功回调。
　　因为目前市场上还是有很多设备不支持指纹，所以要先使用 plus.fingerprint.isSupport()  方法判断（以下三个方法均返回值为Boolean类型）
<div class="cnblogs_code">
<pre>// #ifdef APP-PLUS
if (!plus.fingerprint.isSupport()) {
plus.nativeUI.toast('此设备不支持指纹识别');
console.log('此设备不支持指纹识别')
}
// #endif</pre>
</div>
　　再使用plus.fingerprint.isKeyguardSecure()  判断是否开启密码锁屏
<div class="cnblogs_code">
<pre>// #ifdef APP-PLUS
if (!plus.fingerprint.isKeyguardSecure()) {
plus.nativeUI.toast('此设备未设置密码锁屏');
console.log('此设备未设置密码锁屏')
}
// #endif</pre>
</div>
　　然后使用 plus.fingerprint.isEnrolledFingerprints()  判断是否录入指纹
<div class="cnblogs_code">
<pre>// #ifdef APP-PLUS
if (!plus.fingerprint.isEnrolledFingerprints()) {
plus.nativeUI.toast('此设备未录入指纹');
console.log('此设备未录入指纹')
}
// #endif</pre>
</div>
　　指纹识别方法代码：
<div class="cnblogs_code">
<pre><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></pre>
</div>
  
来源：https://www.cnblogs.com/goloving/p/14123155.html

頁: [1]

琼殿技术论坛's Archiver

uni-app指纹识别登录