使用vue框架搭建浙里办微应用(单点登录、埋点、适老化、RPC网

1、前期准备:

浙里办对接h5官方开发文档: https://odynww.yuque.com/docs/share/525e3e8a-ad52-421b-90da-2d76808e3050?

H5前端源代码包（编译前 支持npm run build） 部署在应用开发管理平台 。服务端代码包 部署在应用自有服务器。前后端分离，服务端透出的API接口通过注册在应用开发管理平台API网关（RPC接入） 向部署前端H5应用提供接口服务（API网关入参没有文件类型，文件上传接口可自行实现，保障可用）。如应用有使用单点登录能力 回调地址 需要使用 应用开发管理平台 线上环境访问地址拼接回调。

1.1、由于浙里办编译默认输出位置是build，但是vue的构建命令默认输出位置是dist。我的解决办法是在项目的根目录下新建gbc.json文件向浙里办指定输出目录

image.png

{
  "type":"gov-build-config",
  "version":"1",
  "outputPath":"dist",
  "entryHtml": "/index.html"
}

1.2、由于前端项目部署在浙里办服务器上，所以还需要对vite.config.js文件进行如下修改（注：不同的框架解决办法可能不一样，本项目是使用的vue3+vite）

image.png

如果是Uniapp项目的话，

{
    "name" : "xxxxxxxx",
    "appid" : "",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "transformPx" : false,
    "h5" : {
        "publicPath" : "./", // 修改1 不修改此处会出现应用白屏的情况
        "router" : {
            "base" : "./", // 修改2 不修改此处会出现图片拿不到的情况
            "mode" : "hash" // 修改3 浙里办只支持hash路由
        }
    }
}

二、浙里办-单点登录功能

由于浙里办微应用需要对支付宝浙里办小程序与浙里办APP进行双端适配，而不同环境下的单点登录跳转链接也不同，所以需要进行应用环境的检测

 let sUserAgent = window.navigator.userAgent.toLowerCase()
 let bIsDtDreamApp = sUserAgent.indexOf('dtdreamweb') > -1 // 浙里办APP
 let bIsAlipayMini = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1//支付宝浙里办小程序

2.1主要代码实现：

在mounted()方法中判断有没有ticket来判断是否进行登录

getTicket() {
   var url = window.location.href// 获取页面路由
   if (url.indexOf('ticket') != -1) {
      this.ticket = url.split('=')[2].split('#')[0]
   }
  //如果有票据的话那么进行获取个人信息操作，如果没有的话那么进行登录
   if (this.ticket != '') {
     this.getZLBuserInfo()
  } else {
     // 先登录 判断当前所处环境
     this.loginFun()
    }
 },

注：接入码是跟浙里办申请服务接入通过之后给的，goto参数是单点登录跳转的回调地址，如果不指定就以后台设置的sp参数作为回调地址跳转。（sp参数自己无权限修改，必须找服务接入对接人设置，且不设置单点登录登录成功将显示“无权访问业务系统”的提示字样）

loginFun() {
   if (bIsDtDreamApp) {
window.location.replace(`https://puser.zjzwfw.gov.cn/sso/mobile.doaction=oauth&scope=1&servicecode=jkxw`) 
}
 else if (bIsAlipayMini) {
      window.location.replace(`https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=jkxw`)
     }
},

三、配置RPC网关依赖后续进行个人信息的获取

这里是可以和后台配合进行个人信息的获取，但是当时公司后台忙不过来，就在政务中台研究一下使用RPC网关调用实现个人信息的获取。

3.1 首先需要在浙里办的中控新建一个RPC系统

image.png

3.2 新建API

image.png

3.3 填写API基本信息，其中API名称是之后需要调用的参数

image.png

3.4 填写服务信息，目标地址均填写：https://appapi.zjzwfw.gov.cn/sso/servlet/simpleauth

image.png

3.5 填写参数映射关系，传参方式选择query透传，入参和途图中设置一致

image.png

3.6 出参按照自己的需求进行设置即可，基本类型，String类型，名称与原浙里办SSO接口规范一致，按需增减即可。其中框选参数必选，后续埋点需要用到。

image.png

3.7 设置完成API以后，点击上线即可在前端使用网关API进行调用。上线后如需修改，点击升级即可重新编辑。(先点击上线，然后提交审核，审核通过之后会显示已上线）

image.png

3.8 设置完成api之后，接入服务：（先点击“去接入”，接入成功之后会显示接入服务个数）

image.png

3.9 设置网关白名单

image.png

四、获取个人信息

4.1首先要安装网管依赖

 npm i --save @aligov/jssdk-mgop@3.0.0

4.2 在登录页进行调用

import { mgop } from '@aligov/jssdk-mgop';

getZLBuserInfo() {
        this.getTonkenAndUserInfo(this.getTonkenAndUserInfoParams()).then(data => {
          return this.getTonkenAndUserInfo(this.getTonkenAndUserInfoParams('getUserInfo', data.token))
        }).then(data => {
          // console.log('---------------浙里办返回的userInfo-----------------')
          this.setZlbUserInfo(data)
          //浙里办用户信息设置埋点
          this.setUserAplus(data)
          this.setLoading(true)
          this.login({
            idcard: data.idnum,
            name: data.username,
            tel: data.mobile,
            callback: (res) => {
              // console.log(res)
              this.setLoading(false)
              this.$router.push('/health/archives')
            },
          })
        }).catch(err => {
          console.log(err)
        })
      },
 getTonkenAndUserInfo(data) {
        return new Promise((resolve, reject) => {
          mgop({
            api: 'mgop.yzh.home.ticket',
            host: 'https://mapi.zjzwfw.gov.cn/',
            data: data,
            dataType: 'JSON',
            type: 'POST',
            appKey: this.appKey,
            onSuccess: res => {
              if (res.data.result && res.data.result == 0) {
                resolve(res.data)
              }
            },
            onFail: err => {
              reject(err)
            }
          })
        })
      },
      getTonkenAndUserInfoParams(method = 'ticketValidation', token = '') {
        let mTime = this.timeFormat(new Date(), 'yyyymmddhhMMss')
        let data = {
          method: method,
          servicecode: this.servicecode,
          time: mTime,
          sign: this.$md5(`${this.servicecode}${this.servicePassword}${mTime}`),
          datatype: 'json'
        }
        if (token == '') {
          data.st = this.ticket
        } else {
          data.token = token
          this.zlbToken = token
        }
        return data
      },
      getLocation() {
        ZWJSBridge.getLocation().then((result) => {
          this.userLocation = result
        }).catch((error) => {
          console.log(error)
        })
      },

4.3 浙里办j基础信息埋点和用户信息埋点

基础埋点放在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-waiting', 'MAN']
    });
    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']
    })
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['_hold', 'BLOCK']
    })
  </script>

用户信息的埋点（用户的username、userid、用户的经纬度和用户类型)

//浙里办用户信息设置埋点
      setUserAplus(userInfo) {
        // 设置用户信息埋点
        aplus_queue.push({
          action: 'aplus.setMetaInfo',
          arguments: ['_user_nick', userInfo.username]
        })
        aplus_queue.push({
          action: 'aplus.setMetaInfo',
          arguments: ['_user_id', userInfo.userid]
        })
        aplus_queue.push({
          'action': 'aplus.sendPV',
          'arguments': [{
            is_auto: false
          }, {
            miniAppId: '2001936819',
            miniAppName: '健康小屋',
            long: this.userLocation.longitude,
            lati: this.userLocation.latitude,
            userType: this.userType,
          }]
        })
        aplus_queue.push({
          action: 'aplus.setMetaInfo',
          arguments: ['_hold', 'START']
        })
      },

获取用户经纬度和用户的类型

 getLocation() {
        ZWJSBridge.getLocation().then((result) => {
          this.userLocation = result
        }).catch((error) => {
          console.log(error)
        })
      },
      getUserType() {
        ZWJSBridge.getUserType().then((result) => {
          // console.log(result, 'userType---------')
          this.userType = result.userType
        }).catch((error) => {
          console.log(error)
        })
      },

4.4、AppId、AppName及AppKey参数位置

image.png

5、二次回退（所谓的二次回退指的是可以用户在应用首页需要点击两次才可以回到浙里办首页）

这里我是在正确获取用户信息之后，跳转到档案页，此处必须用push！！！这是我跳得坑！！

image.png

我的解决办法是在路由配置文件中给两个页面配置meta，然后在beforeRouteEnter中进行监听，如果监听到是从首页返回的话，就调用浙里办api和支付宝api进行关闭自己的应用。
具体实现：

image.png

在路由配置文件中：

image.png

在浙里办login页监听到用户从档案页点击返回的时候就调用api关闭:

image.png

6、适老化（适老化是浙里办上架h5硬性要求的，必须做）

我用的是vuex中存储一个变量，在登录页判断当前系统的uityle，然后设置vuex中的uistyle变量的值

image.png

在单点登录页：

image.png

在页面上获取vuex中的uistyle变量，从而选择使用哪一个选择器

image.png
image.png