微信小程序接入易云章（H5）人脸识别 uniApp

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.开始人脸识别

微信小程序接入易云章（H5）人脸识别 uniApp

猜你喜欢