uniapp开发的App利用百度人脸实现认证功能

一:实现思路

1.方案选择

百度智能云中针对H5、APP分别提供了人脸实名认证方案,H5的实名认证根据官网指示一步步进行即可完成,主要是通过跳转实名认证H5 URL即可实现,步骤如下图所示,在这里不多介绍。

2.离线采集sdk方式

官网给出的APP集成方案主要适用于原生Android与iOS开发,而我们采用的开发工具是uniapp,所以自己集成无法实现,另一种思路是通过官网给出的离线采集sdk方式先采集到用户的照片再调用人脸实名认证的接口。

二.方案实现

1.申请离线SDK

这里申请填入基本信息即可,通过是比较快的,大概几个小时。之后新建授权用于生成离线采集SDK需要的License ID。这里填入的包名需要与打包的包名一致,签名MD5需要与打包使用的证书一致,均需要统一。

2.插件市场使用插件

这里我使用的是付费插件(https://ext.dcloud.net.cn/plugin?id=3487),可根据自身需要选择,插件选择可以实现百度SDK 离线人脸采集功能的即可。如果选择收费的插件,先导入自己的项目试用,调试成功了再购买。

3.插件使用

下载刚才百度云离线SDK下申请的Android和Ios授权文件,按照目录放入,nativeplugins文件夹没有则新建一个,名称意思代表里面放置的是原生插件。

试用的话在此处选择导入的插件,后期购买后会出现在云端插件中,这两步完成后在合适的代码处引入插件处给出代码即可,要注意代码执行顺序,先初始化再调用。人脸识别代码的调试过程需要在自定义基座中进行。

4.效果图展示

三.代码示例

1.获取认证access_token

uni.request({ // 强烈建议此接口由后端访问并且维护token有效期,否则前端每次访问都会刷新token
					//此url为专门插件测试预览用的key和secret key, 请替换为自己申请的key
					url: 'https://aip.baidubce.com/oauth/2.0/token',
					method: 'POST',
					data: {
						grant_type: 'client_credentials',
						client_id: 'Tx599eMLSs2PhgKwwU4g2BXW',
						client_secret: 'AwGDduTh0ARBzo83BUNWQChXjD6SqPFz'
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						this.access_token = res.data.access_token
					},
					fail: (err) => {
						console.log('访问失败');
					}
				});

2.插件采集人脸图片

checkFace() {
				//初始化插件(请务必先执行一次,还原参数时也可调用)
				const _this = this
				const PPFace = uni.requireNativePlugin('PP-BaiduFaceV2');

				//检查权限(仅android使用)
				PPFace.checkRequestPermissions(res => {
					if (res.code == 200) {
						PPFace.init({
							androidLicenseFileName: 'idl-license.face-android',
							androidLicenseId: 'YlycFace-face-android', //*需要修改 android百度申请到的liceenseid
							iosLicenseFileName: 'idl-license.face-ios',
							iosLicenseId: 'YlycFace-face-ios', //*需要修改 ios百度申请到的liceenseid
						}, res => {
							console.log(res)
							if (res.code == 200) {
								//该方法参数并非每次全部要写,按需设置即可,注:该方法设置的参数在init后将重置
								PPFace.setFaceConfig({
									'VALUE_MIN_FACE_SIZE': 200, //设置可检测的最小人脸阈值 VALUE_MIN_FACE_SIZE 默认 200
									'VALUE_NOT_FACE_THRESHOLD': 0.6, // 设置可检测到人脸的阈值 VALUE_NOT_FACE_THRESHOLD 默认 0.6
									'VALUE_BLURNESS': 0.3, // 设置模糊度阈值 VALUE_BLURNESS 默认 0.3
									'VALUE_BRIGHTNESS': 82, // 设置光照阈值(范围0-255 仅android)VALUE_BRIGHTNESS 默认 82 
									'VALUE_OCCLUSION': 0.5, // 设置遮挡阈值 VALUE_OCCLUSION 默认 0.5
									'VALUE_HEAD_PITCH': 8, // 设置人脸姿态角阈值 VALUE_HEAD_PITCH 默认 8
									'VALUE_HEAD_YAW': 8, // 设置人脸姿态角阈值 VALUE_HEAD_YAW 默认 8
									'VALUE_CLOSE_EYES': 0.7, // 设置闭眼阈值 VALUE_CLOSE_EYES 默认 0.7 ios无效
									'VALUE_CACHE_IMAGE_NUM': 3, // 设置图片缓存数量 VALUE_CACHE_IMAGE_NUM 默认3
									'VALUE_OPEN_MASK': true, // 设置口罩判断开关 VALUE_OPEN_MASK 默认 true
									'VALUE_MASK_THRESHOLD': 0.7, // 设置口罩口罩阈值 VALUE_MASK_THRESHOLD 默认 0.7
									'VALUE_SCALE': 1.0, // 原图缩放系数 VALUE_SCALE 默认 1.0
									'VALUE_CROP_HEIGHT': 640, // 抠图高的设定,为了保证好的抠图效果,我们要求高宽比是4:3,所以会在内部进行计算,只需要传入高即可 VALUE_CROP_HEIGHT 默认640
									'VALUE_CROP_ENLARGERATIO': 1.5, // 抠图人脸框与背景比例 VALUE_CROP_ENLARGERATIO 默认1.5
									'VALUE_FAR_RATIO': 0.4, //  检测框远近比率 默认0.4 (v2.16新增参数)
									'livenessList': ['Eye', 'Mouth', 'HeadUp', 'HeadDown',
										'HeadLeft',
										'HeadRight'
									], //动作集合 livenessList 默认全部动作
									'isLivenessRandom': false, // 设置动作活体是否随机 isLivenessRandom 默认 false
									'isEnableSound': true, // 设置开启提示音 isEnableSound 默认 true
									'hasBottomText': true, // 设置是否显示底部文字 默认 true
									'bottomText': '— 修改了底部文字 —', // 设置底部文字内容 默认 "— 百度大脑技术支持 —"
									'COLOR_BG': '#8CD790', // 背景颜色 默认 #FFFFFF
									'COLOR_CIRCLE_LINE': '#77AF9C', //活体检测周围小竖线的颜色 默认 #CCCCCC
									'COLOR_CIRCLE_SELECT_LINE': '#285943', //活体检测周围小竖线完成后的颜色 默认 #00BAF2
									'topTextColor': '#383A3F', //顶部提示文字颜色 默认 #000000
									'topSecondTextColor': '#566270', // //顶部第二行小字提示颜色 默认 #666666
									'hasBottomImg': true, //是否显示底部图片 默认true(可通过替换res跟换图片)
								}, res => {
									console.log(res)
								})

								//活体识别+采集
								PPFace.faceliveness({
									livenessList: ["Eye",
										"Mouth",
									], //活体要求动作集合,可按需删减 注意:HeadLeftOrRight新版百度已经不支持
									isLivenessRandom: true, //是否开启动作随机 默认false
									isEnableSound: true, //是否开启语音播报 默认 true
									isBack: false, //是否开启后置摄像头 版本2.20以后支持
									//以下参数目前只针对android
									debug: false, //是否开启Debug模式,去除遮挡,看采集框位置,默认false
									cameraRatio: 0.75, //设置相机预览在屏幕中的大小,默认0.75 越小,成像越小 参考:横屏0.55f,debug模式下可预览
									circleRatio: 0.33, //设置中间镂空圆形的半径,默认0.33 越大 圆越小 参考:横屏0.75f,非debug模式下可预览
									detectAreas: [15, 20, 70,
										50
									] //参数:[x,y,w,h] x,w参考的宽度百分比,y,h,参考的高度百分比,不传入该参数,使用系统默认采集区域,自定义采集区域,debug模式下可见
								}, res => {
									console.log(res)
									_this.detect(res.base64Image)
									//res.base64Image //全景图像 可以加前缀 data:image/jpg;base64, 进行预览
									//res.base64ImageCrop //裁剪后图像(少量黑边,或者没有) 可以加前缀 data:image/jpg;base64, 进行预览
								})

								//人脸采集
								// PPFace.recycler({
								// 	isEnableSound: true, //是否开启语音播报 默认 true
								// 	isBack: false, //是否开启后置摄像头 版本2.20以后支持
								// 	//以下参数目前只针对android
								// 	debug: false, //是否开启Debug模式,去除遮挡,看采集框位置,默认false
								// 	cameraRatio: 0.75, //设置相机预览在屏幕中的大小,默认0.75 越小,成像越小 参考:横屏0.55f,debug模式下可预览
								// 	circleRatio: 0.33, //设置中间镂空圆形的半径,默认0.33 越大 圆越小 参考:横屏0.75f,非debug模式下可预览
								// 	detectAreas: [15, 20, 70,
								// 		50
								// 	] //参数:[x,y,w,h] x,w参考的宽度百分比,y,h,参考的高度百分比,不传入该参数,使用系统默认采集区域,自定义采集区域,debug模式下可见
								// }, res => {
								// 	console.log(res)
								// 	_this.detect(res.base64Image)
								// 	//res.base64Image //全景图像 可以加前缀 data:image/jpg;base64, 进行预览
								// 	//res.base64ImageCrop //裁剪后图像(少量黑边,或者没有) 可以加前缀 data:image/jpg;base64, 进行预览
								// })
							}
						})

					}
				})

			},

3.调用人脸认证接口

  需要输入姓名身份证信息:可选择手动输入或身份证ocr识别。

detect(obj) {
				const that = this
				uni.request({
					url: 'https://aip.baidubce.com/rest/2.0/face/v4/mingjing/verify?access_token=' + this
						.access_token,
					method: 'POST',
					data: {
						image: obj,
						image_type: "BASE64",
						id_card_number: this.form.idCard,
						name: this.form.lname,
						quality_control: "LOW",
						liveness_control: "LOW",
						spoofing_control: "LOW"
					},
					header: {
						"content-type": "application/json"
					},
					success: (res) => {
						if (res.data.error_msg) {
							var msg = res.data.error_msg
						}
						if (res.data.error_code) {
							uni.showToast({
								icon: 'error',
								title: '填写信息有误',
								duration: 3000
							})
						} else {
							if (res.data.result.score >= 80) {
								uni.showToast({
									icon: 'success',
									title: '人脸检测通过!',
									duration: 3000
								})
								that.issuccess = true
							} else {
								uni.showToast({
									icon: 'error',
									title: '人脸检测未通过!',
									duration: 3000
								})
							}
						}
					},
					fail: (err) => {
						console.log('访问失败:', err);
						uni.showToast({
							icon: 'none',
							title: '人脸检测调用失败!'
						})
					}
				});
			},

  • 5
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
你好!如果你想使用uniapp开发app,我可以为你提供一些相关信息。Uniapp是一个基于Vue.js的开发框架,它可以将代码编译为多个平台(包括iOS、Android、H5等)。通过使用uniapp,你只需要编写一次代码,就可以在不同平台上运行。 为了开始使用uniapp开发app,你需要安装uni-app开发环境。首先,确保你已经安装了Node.js和Vue CLI(如果你之前没有安装过)。然后,你可以通过以下命令安装uni-app: ``` npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue my-project cd my-project npm run dev ``` 上述命令中,我们首先全局安装Vue CLI,然后使用uni-preset-vue创建一个新的uni-app项目,并进入项目目录。最后,通过运行npm run dev命令,你就可以在本地启动一个开发服务器,并在浏览器中预览你的app。 在开始开发之前,你需要熟悉Vue.js的基本知识。如果你已经熟悉Vue.js,那么使用uniapp开发app会更加容易上手。 在uniapp中,你可以使用Vue的语法编写页面和组件。此外,uniapp还提供了一些平台特定的API和组件,以实现更深入的原生功能。 一旦你完成了app开发,你可以使用uniapp提供的命令来构建app。具体的构建命令将根据你要构建的平台而有所不同。例如,如果你要构建iOS应用,你可以运行以下命令: ``` npm run build:ios ``` 这是一个简单的介绍,希望能帮助到你开始使用uniapp开发app。如果你有进一步的问题,请随时提问!
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值