uniapp生物识别示例(人脸识别、指纹识别)

准备工作:

mainfest.json设置勾选:

勾选完成后打 App自定义调试基座测试包

示例代码:

html 复制代码
<template>
	<view class="content">
		<button v-if="supportSoterAuthenticationArray.includes('facial')" @click="SoterAuthenticationFunction('facial')">人脸识别</button>
		<button v-if="supportSoterAuthenticationArray.includes('fingerPrint')" @click="SoterAuthenticationFunction('fingerPrint')">指纹识别</button>
	</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue';
	
	onShow(()=>{
		checkIsSupportSoterAuthentication()
	})
	
	const supportSoterAuthenticationArray = ref([])
	const checkIsSupportSoterAuthentication = () => {
		uni.checkIsSupportSoterAuthentication({
			success(res) {
				supportSoterAuthenticationArray.value = res.supportMode
			}
		})
	}
	
	const SoterAuthenticationFunction = (type) => {
		uni.checkIsSoterEnrolledInDevice({
			checkAuthMode: type,
			success(res) {
				res.isEnrolled && uni.startSoterAuthentication({
					requestAuthModes: [type],
					challenge: '123456',
					authContent: '生物解锁',
					success(res) {
						console.log(res,'成功回调','执行相关逻辑');
					}
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	
</style>

效果展示:

相关推荐
KongHen0213 分钟前
uniapp-x实现自定义tabbar
前端·javascript·uni-app·unix
RuoyiOffice4 小时前
SpringBoot+Vue3+Uniapp实现PC+APP双端考勤打卡设计:GPS围栏/内网双模打卡、节假日方案、定时预生成——附数据结构和核心源码讲解
java·spring·小程序·uni-app·vue·产品运营·ruoyi
2501_915921437 小时前
2026 iOS 上架新趋势 iOS 发布流程模块化
android·ios·小程序·https·uni-app·iphone·webview
窝子面1 天前
uni-app的初体验
uni-app
笨笨狗吞噬者1 天前
【uniapp】微信小程序实现自定义 tabBar
前端·微信小程序·uni-app
雪芽蓝域zzs1 天前
uniapp MD5加密 加密传输 密码加密
uni-app
2501_915909061 天前
iOS 抓包不越狱,代理抓包 和 数据线直连抓包两种实现方式
android·ios·小程序·https·uni-app·iphone·webview
给钱,谢谢!1 天前
记录uni-app Vue3 慎用 Teleport,会导致页面栈混乱
前端·vue.js·uni-app
AI人工智能+1 天前
一种基于手机屏幕主动光源的炫彩活体检测技术,通过随机彩色光码序列激发人脸皮肤的光学响应特征,结合深度学习模型实现非配合式身份验证
人脸识别·炫彩活体检测
郑州光合科技余经理1 天前
海外O2O系统源码剖析:多语言、多货币架构设计与二次开发实践
java·开发语言·前端·小程序·系统架构·uni-app·php