微信公众号、微信小程序调用第三方api（百度人脸实名认证），设置回调页面，页面交互处理

最新推荐文章于 2024-09-21 10:36:32 发布

无物勿吾

最新推荐文章于 2024-09-21 10:36:32 发布

阅读量4k

点赞数 1

分类专栏：小程序 VUE 文章标签：人脸识别

本文链接：https://blog.csdn.net/cmy120813/article/details/109083104

版权

VUE 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

小程序

4 篇文章 0 订阅

订阅专栏

本文介绍了在H5版人脸识别认证中，如何处理成功或失败的回调页面，以及如何通过uni-app与前端进行数据和功能交互。服务器端的回调页面使用uni.webview.1.5.2.js和uni.postMessage来实现页面跳转或消息传递。前端通过监听message事件来接收回调信息并进行相应处理。

摘要由CSDN通过智能技术生成

使用场景

在做人脸识别认证时，使用的是H5版，需要传给插件两个回调页面，一个成功认证后回调，一个失败后回调。这两个页面是要放在服务器的，此时页面与手机端的页面不好做数据和功能交互，于是就需要下面的处理方式。

首先是服务器需要的回调页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>成功回调页面</title>
  </head>
  <body>
    <!--微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。 -->
    <script
      type="text/javascript"
      src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"
    ></script>
    <!-- uni 的 SDK -->
    <script
      type="text/javascript"
      src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"
    ></script>
    <!-- 在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。-->
    <script type="text/javascript">
      document.addEventListener("UniAppJSBridgeReady", function () {
        //此处有两种方式
        //1，通过路由，跳转到前端的结果页
        uni.reLaunch({
          url: "/pages/success/success",
        });
        //2，通过传递消息方式
        uni.postMessage({
          data: {
            path: "/pages/success/success",
            message: "postMessage",
          },
        });
      });
    </script>
  </body>
</html>

前端加载人脸识别认证的H5版

<template>
	<web-view v-if="url" :src="url" @message="bindMessage"></web-view>
</template>

<script>
	import { CALLBACKURL, VERIFY_TOKEN } from '../../utils/common.js';
	export default {
		data() {
			return { 
				url: null 
			};
		},
		onLoad() { 
            //存储的后端回调地址
			const callback = uni.getStorageSync(CALLBACKURL); 
            //存储的调用人脸认证的参数token
			const token = uni.getStorageSync(VERIFY_TOKEN); 
            //小程序中，因为业务域名的关系，需要后台开辟一个地址，使用nginx代理到真正的认证H5地址
			const baseUrl = `https://XXXX/face/print/?token=${token}&successUrl=${callback}&failedUrl=${callback}`
			this.url = baseUrl;
			 
		},
		methods:{
			bindMessage(e){
                 //如果通过消息机制，可以在这里处理数据，和进行页面跳转逻辑
				 console.log('接收到的消息：' + JSON.stringify(e.detail.data));  
			}
		}
		
	}
</script>

<style lang="scss">

</style>