[移动开发]浙里办（单点登录、适老化、埋点、mgop网关依赖）

浙里办（单点登录、适老化、埋点、mgop网关依赖）

1.单点登录

• 个人单点登录
  个人单点登录分为支付宝小程序登录、APP登录还有微信小程序里面的浙里办小程序登录（新增）；
  首先我们判断是什么环境，进行登录跳转路径；个人用户登录是直接跳转到前端页面，登录成功后会携带ticket等参数回调到提供的路径地址；
  • 浙里APP和支付宝小程序的判断

    // 浙里APP和支付宝小程序环境的判断
    const sUserAgent = window.navigator.userAgent.toLowerCase()
    // 浙里办APP
    const bIsDtDreamApp = sUserAgent.indexOf('dtdreamweb') > -1
    // 浙里办支付宝小程序
    const bIsAlipayMini = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1
    if(bIsAlipayMini){
       location.href = "https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&citycode=&servicecode=接入码&redirectUrl=回调地址";
     }else{
       location.href = 'https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&servicecode=接入码&redirectUrl=回调地址'
     }
    

  • 微信小程序环境的判断
    微信小程序登录需要引入zwjsbridge.js
    在public文件夹里面index.html中添加

    <script type="text/javascript" src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js"></script>
    <script>
    	ZWJSBridge.onReady(() => {
          console.log('初始化完成后，执行bridge方法')
        })
    </script>
    

    使用ZWJSBridge进行微信小程序的登录

    if (ZWJSBridge.ssoTicket) {
    	let _self = this
       const ssoFlag = await ZWJSBridge.ssoTicket({});
       if (ssoFlag && ssoFlag.result === true) {
            //使用 IRS“浙里办”单点登录组件
            if (ssoFlag.ticketId) {
              _self.weiLogin(ssoFlag.ticketId)  //使用ticketId获取token
            } else {
              //当“浙里办”单点登录失败或登录态失效时调用 ZWJSBridge.openLink 方法重新获取 ticketId。
              ZWJSBridge.openLink({
                type: "reload"
              }).then(res => {
                _self.weiLogin(ssoFlag.ticketId) //使用ticketId获取token
              })
         }
      }
    

• 法人单点登录
  发人单点登录（APP和小程序是一样的）；

  // 测试
  location.href = 'https://essotest.zjzwfw.gov.cn/opensso/spsaehandler/metaAlias/sp?spappurl=' + url
  // 正式
  location.href = 'https://esso.zjzwfw.gov.cn/opensso/spsaehandler/metaAlias/sp?spappurl=' + url
  

2. 埋点

在public文件夹里面index.html中接入

<script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"></script>

进行埋点操作

const zwlog = new ZwLog({
  _user_id: '', // 用户Id
  _user_nick: ''// 用户昵称
})
zwlog.onReady(() => {
  // sendPV?法将发送?条页面?志
  zwlog.sendPV({
    miniAppId: 'IRS服务侧应用appid',
    Page_duration: '用户从进入到离开当前页面的时长',
    t2: '页面启动到加载完成的时间',
    t0: '页面启动到页面响应完成的时间',
    log_status: 'IRS服务侧应用appid'
  });
  zwlog.record('yourTrackerEventCode', 'CLK', {
    Test1: '测试参数 1',
  });
  let { metaInfo } = zwlog; // SDK 元配置的当前设置
})

3. 适老化

适老化是浙里办上架h5硬性要求的，必须做。
我这边使用vuex存放一个全局变量，在首页判断当前系统的uityle，然后设置vuex中的uistyle变量的值，根据值来改变class类名

// store.js
export default new Vuex.Store({
  state: {
    uiStyle: 'normal'
  },
  mutations: {
    setUiStyle (state, value) {
      state.uiStyle = value
    }
  },
  getters: {
    getuiStyle: state => {
      return state.uiStyle
    }
  }
})
//首页 index.vue
// 获取浙里办系统的uitype,改变vuex的值
import { mapMutations } from 'vuex';

mounted(){
	let _self = this;
	ZWJSBridge.getUiStyle().then(res => {
     if(res.uiStyle == 'elder'){
        _self.setUiStyle('elder')
        setUiStyle('适老模式');
      }else{
        _self.setUiStyle('normal')
        setUiStyle('标准模式');
      }
    }).catch(err => {
      console.log('getUiStyle--err', err)
    })
},
methods: {
	...mapMutations(['setUiStyle']),
}

//组件
<template>
	<div :class="[uiStyle == 'normal' ? 'pages-normal': 'pages-elder']">
		....
	</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
	computed: {
	   ...mapGetters({
	     uiStyle: 'getuiStyle'
	   })
	 }
}
</script>
<style lang="scss" scoped>
	.pages-normal{...}
	.pages-elder{...}
</style>

4. mgop网关依赖

浙里办必须使用@aligov/jssdk-mgop进行请求；

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

封装@aligov/jssdk-mgop请求

import { mgop } from '@aligov/jssdk-mgop'
const request = (payload) => {
  let xtoken = '登录后获取的xtoken'
  return new Promise((resolve, reject) => {
    mgop({
      api: 'mgop.zjxx.xhjf.' + payload.url, // 必须  换成浙里办接口
      host: 'https://mapi.zjzwfw.gov.cn/',
      dataType: 'JSON',
      type: payload.method,
      appKey: 'appkey', // 必须
      data: payload.method == 'post' ? payload.data : payload.params,
      header: {'XToken': xtoken},
      onSuccess: data => {
        console.log('mgopRequest-----------------data', data)
        resolve(data.data)
      },
      onFail: err => {
        console.log('mgopRequest-----------------err', err)
        reject(err.message)
      }
    })
  })
}
export default request

5. ZWJSBridge的一些常用api

// 获取登录类型
ZWJSBridge.getUserType({}).then(res => {
  // res.userType (0：公务员1：除公务员以外的个人2：法人)
}).catch((error) => {
  console.log('error', error);
});
// 适老化
ZWJSBridge.getUiStyle().then(res => {
 if(res.uiStyle == 'elder'){
    setUiStyle('适老模式');
  }else{
    setUiStyle('标准模式');
  }
}).catch(err => {
  console.log('getUiStyle--err', err)
})
//拨打电话(在首页底栏的位置需要使用)
ZWJSBridge.phoneCall({
  corpId:'*******'
}).then((result) => {
    console.log(result);
}).catch((error) => {
    console.log(error);
});
// 获取位置信息
ZWJSBridge.getLocation()
    .then((result) => {
    console.log(result);
    // result.longitude 经度
    // result.latitude 维度
    ...
}).catch((error) => {
    console.log(error);
});