1.打开人脸识别页面
<template>
<view>
<web-view @message="getMessage" v-if="isWedView" :src="wedViewSrc"></web-view>
</view>
</template>
<script>
export default{
data(){
return{
isWedView:false,
id:0,
wedViewSrc:'',
type:1
}
},
onLoad(parameter) {
console.log(parameter)
uni.showLoading({
title: '加载中'
});
this.id = parameter.id;
this.type = parameter.type; //1考试人脸识别2看视频人脸识别
this.$http(this.$api.faceSwiping,{
api_token:uni.getStorageSync('token'),
url:'https://sheke.test03.qcw800.com/xxxx.html' //人脸识别成功后的回调地址
}).then(res=>{
console.log(res,'刷脸')
if(res.data.code == 0){
uni.hideLoading();
this.isWedView = true;
this.wedViewSrc = `https://sheke.test03.qcw800.com/xxxx.html?url=${res.data.data.url}`;
}else{
this.$toast(res.data.msg,'获取人脸识别url失败');
}
})
},
methods:{
getMessage(e) { //接收web-view传过来的参数
console.log(e.detail.data[0].options,'webView传回的参数');
this.$http(this.$api.faceResult,{
api_token:uni.getStorageSync('token'),
orderNo:e.detail.data[0].options
}).then(res=>{
console.log(res,'人脸扫面结果')
if (res.data.code == 0) {
if(this.type == 1){
this.$nav('/Apages/pages/examination/onlineExamination?id='+this.id+'&type=2&classify_id='+0,4);
}
} else{
this.$toast('人脸识别失败')
if(this.type == 2){
this.$nav('',3);
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
</style>
2.因为要用的是三方链接,而微信小程序的web-view业务域名无法添加三方链接域名,把后端返回的连接域名,就是替换三方的连接添加到业务域名上https://ida.qcw800.com
所以解决方法是写一个H5页面放到项目服务器中调用,H5页面内容
<html>
<head>
</head>
<body>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> //微信小程序依赖
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> //uniApp依赖
<script>
var searchStr = location.search;
console.log(searchStr,'参数',searchStr.slice(1,4));
if (searchStr.slice(1,4) == 'url') {
searchStr = searchStr.substr(5);
var form2 = document.createElement("form");
form2.method="post";
form2.action="https://sheke.test03.qcw800.com/ida.php?need302=1";
var url = document.createElement("input");
url.name="url";
url.type="hidden";
url.value = searchStr;
form2.appendChild(url);
document.body.appendChild(form2);
form2.submit(); //提交
}else{
searchStr = searchStr.substr(1);
searchStr = searchStr.split('&');
searchStr = searchStr[0].split('=');
// alert(searchStr[1]);
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
options:searchStr[1] //向微信小程序传参
}
});
uni.getEnv(function(res) {
console.log('当前环境:' + JSON.stringify(res));
});
});
uni.navigateBack({ //触发微信小程序传参
delta: 0
});
}
</script>
</body>
</html>
(H5写法二,这个方法是使用axios请求完成的,请求后会自动打开人脸识别链接,不推荐使用,因为写的不全,需要修改整理)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>人脸识别</title>
<style>
iframe{
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.2/jquery.min.js" type="application/javascript"></script>
<script>
//获取Location对象的search属性值,location对象中search属性返回的是问号之后的URL
var searchStr = location.search;
//去除无用的字符"?"
searchStr = searchStr.substr(1);
//将searchStr字符串分割成数组,数组中的每一个元素为一个参数和参数值
var searchs = searchStr.split("&");
//获得第一个参数和值
var address = searchs[0].split("=");
//将第一个value输出到h5
// document.write("<h3 style=\"text-align:center\">" + "第一个value的值:" + address[1] + "</h3>");
console.log(address,'参数',searchs);
$.post(
'https://sheke.test03.qcw800.com/ida.php',
{
url:'https://ida.webank.com/api/web/login?webankAppId=IDAPDSzC&version=1.0.0&nonce=a7e558a36393456c913440599558bd1d&orderNo=202212261515373785&h5faceId=wb00802ad7a79b72b56b8de80158bb5e&url=https%3A%2F%2Fwww.baidu.com&userId=4998aacb0b6b4fd7b10f52e4b941a050&sign=2E172788A188AA5DDFFE406934A3AA8ECDB451F6&from=browser&redirectType=1'
},
function(res){
window.location.href="https://ida.qcw800.com/s/web/h5/";
}
)
// if (searchs.length == 1) {
// axios.post('',"",
// // url: 'https://sheke.test03.qcw800.com/shualian.html'
// ).then(function (response) {
// // console.log(response.data)
// // console.log(response.data.data.url);
// // document.write(`<iframe style='width: 100%;height: 100vh;' src=""></iframe>`);
// // window.open(response.data.data.url,'_blank');
// }).catch(function (err) {
// console.log(err)
// });
// }else{
// console.log('返回小程序');
// }
</script>
</body>
</html>
3.因为在H5里使用三方链接进行人脸识别也会被微信小程序识别到,不被允许,所以要使用后端写一个三方链接替换,把三方链接替换成我们自己的服务器连接,这样既可以把我们的连接添加到微信小程序后台的业务域名(web-view)中使用,后端代码:
<?php
$url = $_POST['url'];
$need302 = @$_GET['need302'] ?: 0;
if(!$url || $url== ''){
echo "url不能为空,必须用post传";
die;
}
$url = urldecode($url);
$headerData = get_head($url);
$headerData = str_replace("webank.com",'qcw800.com',$headerData);
$headerArr = explode("\n",$headerData);
ob_start();
ob_clean();
ob_flush();
ob_end_clean();
foreach($headerArr as $key=>$val){
if(!$need302){
if($key > 3 && $key < 41) {
header($val,false);
contiue;
// usleep(100);
}
}
header($val,false);
}
print_r($headerArr);
die;
//header('Location:https://ida.qcw800.com/s/web/h5/#/action/h5pre/');
function get_head($sUrl){
$oCurl = curl_init();
// 设置请求头, 有时候需要,有时候不用,看请求网址是否有对应的要求
$header[] = "Content-type: application/x-www-form-urlencoded";
$user_agent = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.146 Safari/537.36";
curl_setopt($oCurl, CURLOPT_URL, $sUrl);
curl_setopt($oCurl, CURLOPT_HTTPHEADER,$header);
// 返回 response_header, 该选项非常重要,如果不为 true, 只会获得响应的正文
curl_setopt($oCurl, CURLOPT_HEADER, true);
// 是否不需要响应的正文,为了节省带宽及时间,在只需要响应头的情况下可以不要正文
curl_setopt($oCurl, CURLOPT_NOBODY, true);
// 使用上面定义的 ua
curl_setopt($oCurl, CURLOPT_USERAGENT,$user_agent);
curl_setopt($oCurl, CURLOPT_RETURNTRANSFER, 1 );
// 不用 POST 方式请求, 意思就是通过 GET 请求
curl_setopt($oCurl, CURLOPT_POST, false);
$sContent = curl_exec($oCurl);
// 获得响应结果里的:头大小
$headerSize = curl_getinfo($oCurl, CURLINFO_HEADER_SIZE);
// 根据头大小去获取头信息内容
$header = substr($sContent, 0, $headerSize);
curl_close($oCurl);
return $header;
}
4.开始人脸识别