mui嵌入外链h5调用腾讯人脸核身（活体检测）

已于 2024-01-09 09:28:50 修改
阅读量937 收藏 23
点赞数 20
文章标签： 前端 uniapp web app
于 2024-01-08 18:46:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42385482/article/details/135460440
版权

mui打开外链一共有以下4种方式可以进行活体检测，一个最优方案，一个次选方案

1. a标签直接打开

效果：安卓返回会直接退出app，支持活体检测

2. plus.webview.currentWebview方式打开（次选方案）

效果：安卓返回会退出webview，支持活体检测，外链进入页面后返回上一页只能点击h5页面自带的返回，可以使用mui.back进行拦截，物理返回点击两次返回app即退出webview。不拦截系统返回一次就会退出webview。

方法：

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();

			function currentWebview() {
				mui.openWindow({
					url: "urlview.html?url=" + "https://hellouniapp.dcloud.net.cn/",
					id: "urlview.html",
					waiting: {
						autoShow: true,
						title: '加载中...'
					},
				});
			}
		</script>
	</head>
	<body>
		<div class="mui-content">
			<div class="mui-content-padded">
				<button type="button" onclick="currentWebview()">currentWebview打开外部链接</button>
				<div>安卓返回会退出webview,支持活体检测</div>
			</div>
		</div>
	</body>
</html>

urlview.html

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>目标页面</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			var str = window.location.search;
			var myid = str.substring(str.indexOf('=') + 1)
			mui.init();
			var embed = null;
			mui.plusReady(function() {
				embed = plus.webview.currentWebview();
				var bankWV = plus.webview.create(myid, "snccb", {
					bottom: 0,
					top: 0
				});
				embed.append(bankWV);
				requestPermission();
			});
			//首页返回键处理
			//处理逻辑：1秒内，连续两次按返回键，则退出应用；
			var first = null;
			var old_back = mui.back;
			mui.back = function() {
				//首次按键，提示‘再按一次退出应用’
				if (!first) {
					first = new Date().getTime();
					mui.toast('再按一次退出');
					setTimeout(function() {
						first = null;
					}, 1000);
				} else {
					if (new Date().getTime() - first < 1000) {
						old_back();
					}
				}
			};

			//获取相机权限
			function requestPermission() {
				plus.android.requestPermissions(
					["android.permission.CAMERA"],
					function(resultObj) {
						for (var i = 0; i < resultObj.granted.length; i++) {
							var grantedPermission = resultObj.granted[i];
							console.log('已获取的权限：' + grantedPermission);
						}
						for (var i = 0; i < resultObj.deniedPresent.length; i++) {
							var deniedPresentPermission = resultObj.deniedPresent[i];
							console.log('拒绝本次申请的权限：' + deniedPresentPermission);
						}
						for (var i = 0; i < resultObj.deniedAlways.length; i++) {
							var deniedAlwaysPermission = resultObj.deniedAlways[i];
							console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
						}
						// 若所需权限被永久拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限  
						if (resultObj.deniedAlways.length > 0) {
							var Intent = plus.android.importClass("android.content.Intent");
							var Settings = plus.android.importClass("android.provider.Settings");
							var Uri = plus.android.importClass("android.net.Uri");
							var mainActivity = plus.android.runtimeMainActivity();
							var intent = new Intent();
							intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
							var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
							intent.setData(uri);
							mainActivity.startActivity(intent);
						}
					},
					function(error) {
						console.log('申请权限错误：' + error.code + " = " + error.message);
					});
			}
		</script>
	</body>
</html>

3. openWebview方式打开

效果：安卓返回两次会退出app，支持活体检测

方法：

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.plusReady(function() {
			requestPermission();
			});
			});

			function openViewWindow() {
				mui.openWindow({
					url: 'https://hellouniapp.dcloud.net.cn/',
					id: 'OLMPLogin',
					show: {
						autoShow: true,
						aniShow: 'slide-in-right',
						duration: 200
					},
					waiting: {
						autoShow: true,
						title: '加载中...'
					}
				});
			}

			function requestPermission() {
				plus.android.requestPermissions(
					["android.permission.CAMERA"],
					function(resultObj) {
						for (var i = 0; i < resultObj.granted.length; i++) {
							var grantedPermission = resultObj.granted[i];
							console.log('已获取的权限：' + grantedPermission);
						}
						for (var i = 0; i < resultObj.deniedPresent.length; i++) {
							var deniedPresentPermission = resultObj.deniedPresent[i];
							console.log('拒绝本次申请的权限：' + deniedPresentPermission);
						}
						for (var i = 0; i < resultObj.deniedAlways.length; i++) {
							var deniedAlwaysPermission = resultObj.deniedAlways[i];
							console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
						}
						// 若所需权限被永久拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限  
						if (resultObj.deniedAlways.length > 0) {
							var Intent = plus.android.importClass("android.content.Intent");
							var Settings = plus.android.importClass("android.provider.Settings");
							var Uri = plus.android.importClass("android.net.Uri");
							var mainActivity = plus.android.runtimeMainActivity();
							var intent = new Intent();
							intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
							var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
							intent.setData(uri);
							mainActivity.startActivity(intent);
						}
					},
					function(error) {
						console.log('申请权限错误：' + error.code + " = " + error.message);
					});
			}
		</script>
	</head>
	<body>
		<div class="mui-content">
			<div class="mui-content-padded">
				<button type="button" onclick="openViewWindow()">openWindow外部链接</button>
				<div>安卓返回两次退出app,支持活体检测</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" id="tab2">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">主页</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">邮件</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
	</body>
</html>

4.使用iframe嵌入（最佳方案）

效果：可以正常的的使用物理返回操作外链，返回到最上层后退出webview，支持活体检测。

方法：

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			function openViewiframe() {
				mui.openWindow({
					url: "iframe.html",
					id: "iframe.html"
				});
			}
		</script>
	</head>
	<body>
		<div class="mui-content">
			<div class="mui-content-padded">
				<button type="button" onclick="openViewiframe()">iframe外部链接</button>
				<div>安卓返回正常,支持活体检测</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" id="tab2">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">主页</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">邮件</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>
	</body>
</html>

iframe.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-content">
			<iframe src="https://hellouniapp.dcloud.net.cn/" frameborder="0"
				allow="camera https://kyc.qcloud.com;autoplay https://kyc.qcloud.com;geolocation;"
				style="width:100%;height:100vh;" id="iframe"></iframe>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init();
			var iframe = document.getElementById('iframe');
			window.addEventListener('message', function(event) {
				if (event.source === iframe.contentWindow && event.data === 'faceCamera') {
					requestPermission();
				}
			});
			//获取相机权限
			function requestPermission() {
				plus.android.requestPermissions(
					["android.permission.CAMERA"],
					function(resultObj) {
						for (var i = 0; i < resultObj.granted.length; i++) {
							var grantedPermission = resultObj.granted[i];
							console.log('已获取的权限：' + grantedPermission);
						}
						for (var i = 0; i < resultObj.deniedPresent.length; i++) {
							var deniedPresentPermission = resultObj.deniedPresent[i];
							console.log('拒绝本次申请的权限：' + deniedPresentPermission);
						}
						for (var i = 0; i < resultObj.deniedAlways.length; i++) {
							var deniedAlwaysPermission = resultObj.deniedAlways[i];
							console.log('永久拒绝申请的权限：' + deniedAlwaysPermission);
						}
						// 若所需权限被永久拒绝,则打开APP设置界面,可以在APP设置界面打开相应权限  
						if (resultObj.deniedAlways.length > 0) {
							var Intent = plus.android.importClass("android.content.Intent");
							var Settings = plus.android.importClass("android.provider.Settings");
							var Uri = plus.android.importClass("android.net.Uri");
							var mainActivity = plus.android.runtimeMainActivity();
							var intent = new Intent();
							intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
							var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
							intent.setData(uri);
							mainActivity.startActivity(intent);
						}
					},
					function(error) {
						console.log('申请权限错误：' + error.code + " = " + error.message);
					});
			}
		</script>
	</body>

</html>

在H5中触发权限调用

parent.postMessage('faceCamera', '*');

iframe中最核心的逻辑就是 allow=“camera https://kyc.qcloud.com;autoplay https://kyc.qcloud.com;”，否则只允许录制视频的方式进行人脸核身；

注意点：

1. 使用iframe时会无cookie登录需要使用orderNo，

前端传给后端：
{userId: 系统的用户,url: 核身返回时的链接地址}
后端返回以下参数：
{optimalDomain,faceId,orderNo,userId,sign,appId}
跳转链接地址拼接：
let faceUrl =https://kyc.qcloud.com/s/web/h5?appId=${appId}&version=1.0.0&orderNo=${orderNo}&faceId=${faceId}&userId=${userId}&sign=${sign}

2. 将https://hellouniapp.dcloud.net.cn/替换成要跳转的H5项目

sea_lichee
关注
活体检测H5文档及示例代码--人脸识别
03-07
活体检测H5简介 人脸识别 微信官方Demo 微信公众平台（视频接口）开发编程文档
H5 mui通过蓝牙调用打印机printUtil.js
04-29
H5 mui通过蓝牙调用打印机
h5 视频活体检测（人脸认证）的前端
cn594740的博客
07-22 5573
调百度云h5视频活体检测接口，功能是在H5场景下，通过用户新录制并上传一个视频，来进行活体检测的判断。 兼容性比较好的做法是通过input去打开手机系统原生的录像界面 <input type="file" accept="video/*" capture="camcorder" ref="videoFile" @change="changeVideo($event)"> 还有一种做法就是使用h5的新属性getUserMedia、MediaRecorder getUserMedia兼容目
人脸识别中的活体检测技术的重要性是什么
alysone的博客
11-25 914
人脸识别技术在实际应用中，为提高应用的安全性，防止他人利用道具对人脸识别进行攻击，会将人脸识别技术与活体检测技术结合使用，用户在使用时更加的放心。那么，由畅视智能与大家分享人脸识别中的活体检测技术有哪些重要性？ 人脸活体检测主要是通过识别活体上的生理信息来进行判断该人脸是否为活体，活体检测技术可以把生理信息作为生命特征来区分用照片、硅胶、塑料等非生命物质假装的生物特征。 在人脸识别技术实际场景应用...
人脸识别活体检测技术探讨：多物理特征融合加分类器的算法技术
weixin_33963189的博客
01-16 269
随着人脸识别、人脸解锁等技术在金融、门禁、考勤、人证合一等日常生活中的广泛应用，人脸防伪/活体检测（Face Anti-Spoofing）技术在近年来得到了越来越多的关注。简单来说，活体检测就是要识别出成像设备（摄像头、手机等）上检测到的人脸图像是来自真实的人脸，还是某种形式的攻击或伪装。这些攻击形式主要包括照片（包括纸质照片和手机、平板等电子设备上的照片）攻击、视频回放攻击、面具攻击等。活体检测...
h5接入腾讯云人脸核身
最新发布
FinelyYang的专栏
04-01 1125
跳转前端页面，监听BizToken参数和自助传入的参数，获取核验结果。如果通过，则可以进行考试。跳转url核验，核验完成后，会根据实名核身鉴权接口传入的RedirectUrl，点击“开始考试”后，读取本次考试 是否需要进行人脸核验。接口时，必须传入认证人姓名和身份证号。，接口会返回用于发起核身流程的URL。3.填写用户授权信息，选择对比源。
基于mui写的H5移动端全国地区三级联动菜单
02-28
标题中的“基于mui写的H5移动端全国地区三级联动菜单”是指使用mui框架开发的一个适用于移动设备的HTML5页面，该页面包含一个具有三级结构的地区选择菜单。这个菜单设计能够帮助用户快速、方便地选择他们所在的省份...
支付宝集合mui调用h5+支付的服务端（旧版接口）
01-30
本主题聚焦于“支付宝集合mui调用h5+支付的服务端（旧版接口）”，我们将详细介绍这个过程中的关键知识点。 1. **支付宝SDK**： 支付宝SDK是支付宝为开发者提供的集成支付功能的工具包，它包含了处理支付请求、...
H5调用手机相机识别二维码
07-23
其中，“H5调用手机相机识别二维码”是移动互联网中常见的功能，广泛应用于各种场景，如登录验证、商品信息查询等。本篇文章将详细探讨如何在H5页面中实现这一功能，并结合“jsqrcode-master”这个库来解析二维码。 ...
百度H5活体检测-语音校验码
shuleijia的博客
06-27 701
H5活体检测-语音校验码
H5人脸识别+活体检测（眨眼&摇头）
05-28
1.眨眼和摇头 2.使用的是clmtrackr.js 3.眨眼或摇头成功校验后请重新刷新页面或自行修改初始化逻辑
HTML5 的人脸识别活体认证实例
02-10
HTML5 的人脸识别活体认证实例，将其部署到TOMCAT下运行index.html即可使用
H5活体验证页面，测试demo
12-22
用于测试下载，H5活体页面，自测使用。欢迎下载。这里只是页面，后端请使用自己的验证方式，可以对接百度人脸识别，或者使用Java的openCV验证活体
调用百度h5活体检测
ligongke513的博客
04-19 1611
百度h5活体检测
H5利用face++和腾讯云慧眼实现活体检测（人脸识别）的流程总结
博哥的二进制世界
05-26 3664
H5利用face++和腾讯云慧眼paas模式实现活体检测（人脸识别）的流程总结背景paas模式活体检测流程（以数字模式的活体检测为例）saas模式活体检测流程 背景 随着当前业务安全以及风控的要求，在做一些业务特别是涉及金融领域的业务，需要对用户进行OCR身份证上传识别，活体检测辨别真人，以规避风险和风控评估。 再说说为何不使用face++或者腾讯云慧眼的saas模式，因为saas模式集合了身份证OCR，银行卡OCR，活体检测于一体，不可拆分，自定义空间不多，因此我们公司使用的多是paas模式，借用face
H5视频活体检测-Java实现(SpringBoot 2.0.1 + thymeleaf 百度AI接口)
小帅丶的专栏
06-05 9626
能力介绍 业务能力 H5视频活体检测产品，是由两个接口组合而成，主要用于在H5场景下，通过用户新录制并上传一个视频，来进行活体检测的判断。相对于APP有动作校验+静默图片活体、静默图片活体这两种方式，H5视频活体方案比APP方案更加灵活，同时比单张图片活体方式更加安全。其主要功能如下所示： 语音校验码：为防止用户提交非当前操作的视频，在录制视频时，随机分配一个数字，用户需要读出这个数字，...
H5活体检测前端页面
wuxinfuchen的博客
05-08 6511
前端H5人脸活体检测功能
php活体检测,基于HTML5 的人脸识别活体认证的实现方法
weixin_39658318的博客
03-10 393
近几年，人脸识别技术在身份认证领域的应用已经有了较多应用，例如：支付宝、招行的取款、养老金领取等方面，但在杜绝假冒、认证安全性等方面，目前还是一个比较需要进一步解决的课题，特别是在移动端的活体认证技术方面。本文介绍了在HTML5 环境下可以采用clmtrackr.js 检测工具，结合人脸模型，实现人脸的跟踪检测。同时采用动作识别实现活体认证。但本方案只能够在Firefox 或者Chrome中使用。...
探索操作系统接口：CUI、MUI与系统调用详解
本PPT主要介绍操作系统（OS）接口的相关内容，包括用户接口（UI）、控制台界面（CUI）、菜单界面（MUI，即图形用户界面VUI和图形用户界面GUI）、交互式用户接口（IUI）以及程序接口（PI）和系统调用。章节详细探讨了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sea_lichee

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值