uniapp人脸与指纹的方法
<template>
<view class="content">
<button type="primary" @click="checkIsSupportSoterAuthentication">检查支持的认证方式</button>
<button type="primary" @click="checkIsSoterEnrolledInDeviceFingerPrint">检查是否录入指纹</button>
<button type="primary" @click="checkIsSoterEnrolledInDeviceFaceID">检查是否录入FaceID</button>
<button type="primary" @click="startSoterAuthenticationFingerPrint">开始指纹认证</button>
<button type="primary" @click="startSoterAuthenticationFaceID">开始FaceID认证</button>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
checkIsSupportSoterAuthentication() {
uni.checkIsSupportSoterAuthentication({
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
complete(res) {
console.log(res);
}
})
},
checkIsSoterEnrolledInDeviceFingerPrint() {
uni.checkIsSoterEnrolledInDevice({
checkAuthMode: 'fingerPrint',
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
complete(res) {
console.log(res);
}
})
},
checkIsSoterEnrolledInDeviceFaceID() {
uni.checkIsSoterEnrolledInDevice({
checkAuthMode: 'facial',
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
complete(res) {
console.log(res);
}
})
},
startSoterAuthenticationFingerPrint() {
uni.startSoterAuthentication({
requestAuthModes: ['fingerPrint'],
challenge: '123456',
authContent: '请用指纹解锁',
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
complete(res) {
console.log(res);
}
})
},
startSoterAuthenticationFaceID() {
uni.startSoterAuthentication({
requestAuthModes: ['facial'],
challenge: '123456',
authContent: '请用FaceID解锁',
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
},
complete(res) {
console.log(res);
}
})
}
}
}
</script>
另一种方法
<template>
<view class="content">
<u-modal v-model="show" :show-title="false" :show-confirm-button="false" :show-cancel-button="true"
:content-style="{ 'justify-content': 'center','align-items': 'center',height:'300rpx',display:'flex'}"
@cancel="printCancel">
<u-icon name="fingerprint" color="red" size="150rpx"></u-icon>
</u-modal>
<image class="logo" src="/static/logo.png"></image>
<view style="color:red;">{{ result }}</view>
<button @tap="fingerprint()" :disabled="disabled">开启指纹验证</button>
</view>
</template>
<script>
export default {
data() {
return {
result: '',
disabled:true,
show:false,
}
},
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: {
printCancel:function(){
plus.fingerprint.cancel();
this.result="停止指纹识别"
},
fingerprint: function() {
let that=this;
// #ifdef APP-PLUS
plus.fingerprint.authenticate(function() {
plus.nativeUI.closeWaiting(); //兼容Android平台关闭等待框
that.show=false;
that.result='指纹识别成功'
//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) {
this.show=true;
/* 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>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>