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

1.单点登录

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

    // 浙里APP和支付宝小程序环境的判断const sUserAgent = window.navigator.userAgent.toLowerCase()// 浙里办APPconst bIsDtDreamApp = sUserAgent.indexOf('dtdreamweb') > -1// 浙里办支付宝小程序const bIsAlipayMini = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1if(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=回调地址' }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

  • 微信小程序环境的判断
    微信小程序登录需要引入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>
    1
    2
    3
    4
    5
    6

    使用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          })     }  }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

• 法人单点登录
  发人单点登录（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
  1
  2
  3
  4

2. 埋点

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

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

进行埋点操作

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 元配置的当前设置})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. 适老化

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

// store.jsexport 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

4. mgop网关依赖

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

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

封装@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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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);});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34