uniapp开发的App利用百度人脸实现认证功能_uniapp 调用百度云人脸识别

作者：知新_RL | 2024-03-23 09:10:49

踩

uniapp 调用百度云人脸识别

一：实现思路

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: '人脸检测调用失败！'
						})
					}
				});
			},

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/294317