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>

效果展示:

相关推荐
timeguys9 小时前
【前端】[vue3] [uni-app]使用 vantUI 框架
前端·uni-app
Aiden Targaryen11 小时前
Windows/MacOS WebStorm/IDEA 中开发 Uni-App 配置
java·uni-app·webstorm
想要飞翔的pig12 小时前
uniapp+vue3页面滚动加载数据
前端·vue.js·uni-app
会功夫的李白13 小时前
uniapp自动构建pages.json的vite插件
前端·uni-app·vite
TE-茶叶蛋13 小时前
Uniapp、Flutter 和 React Native 全面对比
flutter·react native·uni-app
特立独行的猫a17 小时前
uni-app 开发HarmonyOS的鸿蒙影视项目分享:从实战案例到开源后台
uni-app·开源·harmonyos·鸿蒙·影视
七七小报19 小时前
uniapp-商城-61-后台 新增商品(添加商品到数据库)
uni-app
hbcui198419 小时前
uni-app x正式支持鸿蒙原生应用开发
uni-app·harmonyos·uni-app x
lqj_本人19 小时前
鸿蒙OS&UniApp制作支持多图上传的图片选择器:打造高性能移动端上传体验#三方框架 #Uniapp
华为·uni-app·harmonyos
好好的哦1 天前
uni-app小程序登录后…
小程序·uni-app