“浙里办“项目单点登录、埋点、二次回退的问题

已经有一段时间没有更新博客了，因为最近变成了某个项目的负责人，就突然忙了起来。
刚接到这个项目的开始，我还觉得自己一定能很出色的完成这个任务。刚过了几天我就发现事情并不是我想象的那么简单，我要做的事情比我想象的要多好几倍。对于一个没有经验的负责人来说，这无疑是一个坑，当然也是一个挑战。这个项目的难点并不在于它的代码有多难，也不在于业务逻辑有多复杂，而是他的规范太多，审核太严格。
这是一个什么样的项目呢？

大家可以看一看语雀《“浙里办”h5微应用接入流程》这篇文档。

接下来我将针对大多数人以及我个人遇到的一些问题做本篇文章的核心讲解：

1.单点登录，首先分为个人用户的单点登录和法人用户的单点登录：
个人单点登录分为app登录和支付宝小程序登录：
首先我们要判断当前环境是app环境还是支付宝小程序环境，然后跳转到不同的路径，个人用户登录我们采用的是直接跳转到前端页面，登录成功后会携带ticket等参数跳转到我们提供的路径，

 isLoad() {if (this.api.ticket == undefined ||this.api.ticket == null ||this.api.ticket == "") {const sUserAgent = window.navigator.userAgent.toLowerCase();const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里办APPconst bIsAlipayMini =sUserAgent.indexOf("miniprogram") > -1 &&sUserAgent.indexOf("alipay") > -1;if (bIsAlipayMini) {window.location.href ="https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&scope=1&servicecode=wlsw&go=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001812737/reserved/index.html";} else {window.location.href ="https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=wlsw&go=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001812737/reserved/index.html";}}
},

法人的单点登录（app和小程序是一样的）：
由于法人登录跳转到页面时，用的是post请求访问，但是web页面只能通过get访问，所以法人登录我们采用的方法是将提供的跳转路径为后台服务地址，后台服务将登录成功后通过get方式重定向到前端页面并携带前端需要的参数，

window.location.href ="http://essotest.zjzwfw.gov.cn/opensso/spsaehandler/metaAlias/sp?spappurl=http://192.168.8.37:8081/login?goto=https://mapi.zjzwfw.gov.cn/web/mgop/***/index.html?debug=true";

2.二次回退的问题：
我发现大多数人都遇到了二次回退的问题，有很多人解决了二次回退的问题后又出现了其它各种奇奇怪怪的问题，以下是我们解决这个问题的办法：
window.performance.navigation.type包含三个值：
0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式)
1 : TYPE_RELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面)
2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面)
首先还是判断是浙里办app还是支付宝小程序,根据不同的环境处理二次回退

 const sUserAgent = window.navigator.userAgent.toLowerCase();const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里办APPconst bIsAlipayMini =sUserAgent.indexOf("miniprogram") > -1 &&sUserAgent.indexOf("alipay") > -1;if (bIsDtDreamApp) {that.watchApp();} else if (bIsAlipayMini) {that.watchApply();}

解决app的二次回退问题，这个地方的逻辑是监听页面的跳转,判断当前页面是通过刷新或直接访问进入，还是通过返回进入。从而来判断是否是直接跳回app

   watchApp() {var that = this;window.addEventListener("pageshow",function (event) {if (event.persisted ||(window.performance && window.performance.navigation.type == 2)) {ZWJSBridge.close()//这个是浙里办内部的api，调用close()接口关闭通过openLink打开的页面.then((result) => {console.log(result);}).catch((error) => {console.log(error);});}that.isLoad();},false);},

解决支付宝小程序的二次回退问题，这个地方的逻辑是监听页面的跳转,判断当前页面是通过刷新或直接访问进入，还是通过返回进入。从而来判断是否是直接跳回浙里办小程序页面。

 watchApply() {var that = this;window.addEventListener("pageshow",function (event) {if (event.persisted ||(window.performance &&(window.performance.navigation.type == 1 ||window.performance.navigation.type == 0))) {that.isLoad();} else if (event.persisted ||(window.performance && window.performance.navigation.type == 2)) {my.navigateBack();} else {my.navigateBack();//支付宝小程序的api，需在index.html引入，通过此api直接跳回浙里办小程序页面}},false);},

3.埋点，由于有些埋点是通过JSBridge API 获取的，而JSBridge API 的方法都是异步的，所以可能会存在埋点不成功的问题。：
埋点主要是采集应用app的信息,日志，用户信息和地理位置等信息
web 端通用采集 SDK：https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085
使用vue开发的，这一段要写在埋点页面的script里面，尽量不要放在vue实例中，也不要放在index.html中，否则可能会存在埋点不成功的问题

  <script> (function(w, d, s, q, i) { w[q] = w[q] || [];var f = d.getElementsByTagName(s)[0],j = d.createElement(s);j.async = true;j.id = 'beacon-aplus';j.src = 'https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085';
f.parentNode.insertBefore(j, f); })(window, document, 'script', 'aplus_queue'); aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn'] });
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn'] }); aplus_queue.push({ action: 'aplus.setMetaInfo',
arguments: ['appId', '60506758'] }); </script>

“浙里办“项目单点登录、埋点、二次回退的问题相关推荐

浙里办(H5)上传流程
"浙里办"H5微应用迁移流程主要满足三点:(摘自官方文档) https://odynww.yuque.com/docs/share/caa2a215-bb8b-4739-a4e0 ...
使用uniapp框架搭建浙里办微应用(单点登录、埋点、适老化、RPC网关)
文章目录前言一.前期准备二.浙里办-单点登录功能三.获取用户信息 Ⅰ.普通request调取用户数据 Ⅱ.浙里办RPC网关调用的实现 Ⅲ.浙里办官方单点登录组件接口网关调用四.埋点操作 Ⅰ. ...
浙里办前端H5对接小结（复盘自用)
项目是老项目之前上线在浙政钉上的现在老板说要在浙里办也上线一版刚转正的前端就开始一脸懵逼得瞎搞现在整差不多了复盘一下目录政务中台debug工具测试下载及登录绑定查看日志调试工具浙 ...
新手小白H5微应用接入浙里办流程指南
第一步:前期准备工作 1.联系业主单位于irs业主-工作台(操作角色:业主单位-IRS 应用管理员,操作平台:irs.zj.gov.cn)创建H5微应用,相应资料填写,开发商可协助. 2.由业主单位[ ...
【浙里办】浙里办开发上架指南北西东，指乱七八糟。避坑手册Cookbook
注:你现在看到的写于2022-12-08,有效期不确定.毕竟你不知道浙里办侧还会搞出什么花样来. 自己看吧,不用逐行读下去,按需跳转你们能看到这篇乐色的原因主要流程应用编目(开发灾难的开始) 组 ...
浙里办接入 H5应用使用说明
参考官网链接: https://www.yuque.com/docs/share/525e3e8a-ad52-421b-90da-2d76808e3050 说明接入方式有两种: 1.使用Rax框架并 ...
浙里办H5应用开发中的注意事项
浙里办H5应用开发一.准备工作 1.从业主部门(需要开发应用的政府单位)申请浙政钉账号,最好是用自己的手机号去申请,因为浙政钉登录需要验证,如果用别人提供的账号,每次登录都很麻烦. 2.加入浙里办技 ...
浙里办对接H5微应用遇到的问题
最近在搞浙里办对接,在这个对接中遇到了以下问题,单点登录.埋点.二次回退问题 "浙里办"H5微应用接入文档:语雀注意:我们做的是app对接单点登录由于浙里办微应用需要对支付宝 ...
Uniapp、Vue搭建浙里办微应用(单点登录、埋点)
目录 `一.前期准备` `二.浙里办-单点登录功能` `三.获取用户信息` `四.埋点操作` `五.JSBridge的引入及使用` 一.前期准备由于浙里办的微应用是必须前后端分离,且前端文件需要部署 ...

“浙里办“项目单点登录、埋点、二次回退的问题

“浙里办“项目单点登录、埋点、二次回退的问题相关推荐

最新文章

热门文章