浙里办接入流程（施工完毕）

一. 工欲善其事，必先利其器

1. 文档

虽然文档写的烂，但还是有一定参考价值，找你的上级要。

2. 加入浙里办对接钉钉群

群号：31419900，这是3群，如果满了可以加其他群。

3. 下载浙里办DEBUG工具

群里有安装包，在这个调试工具上输入你的网址会模拟浙里办环境，找上级要登陆账号，关windows防火墙并在同一个局域网下手机扫码登陆，调试过程一定要在上面并登陆（腰马合一），不能在正常浏览器上，不然会出奇怪的bug（例如mgop没响应）而且无法做单点登陆

4. ak，sk准备。

注意这里的ak有两个，格式差异很大，一眼就看的出来

5. 实时性

浙里办更新速度快，要求也有变化，注意看博客更新时间

二. 代码上传

登陆IRS平台 IRS传送门

1.（账号找你的上级扫码登陆)，在发布管理->部署发布->上传代码。
2. 先保证自己的代码在 npm run build 打包后生成的index.html能正常的显示业务内容，我之前遇到了页面空白的现象，发现是config里面的文件目录写的不对。
3. 浙里办接收的文件目录是/build，但是我的vue-cli生成打包后文件的目录是dist，可以在文件夹根目录（和package.json同级）新增gbc.json文件告诉浙里办我的输出目录。

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

上传并编译成功后可以查看了，这时候页面可以显示，但是异步请求和单点登陆等功能没有实现，这些难点见下文。

三.异步请求mgop

原本前端代码是用axios发送的异步的请求，这里所有异步接口得要用浙里办的mgop，所以所有接口都需要重新改造。

1. 安装mgop

npm i --save @aligov/jssdk-mgop@3.0.0 --legacy-peer-deps

我在安装的过程中遇到了runtime的问题，再安装个包就行了

 npm install --save-dev @babel/runtime --legacy-peer-deps

2. 引入

导入包，并对mgop进行简单封装，我这里是在src下新建了utils文件夹，再在文件夹下建立了request.js，（这里的headers先不用，后面弄完单点登陆在加上）

url是irs上后端注册的url（要上线）
method 是 GET 或者 POST
data就是数据，get和post都用这个
ak用你自己的，注意有2个ak，用格式像我这个的
headers注意！是header，不是axios的headers

// request.js
import { mgop } from "@aligov/jssdk-mgop";export default function(url, method, data) {let that = thisreturn new Promise((resolve, reject) => {mgop({api: url, // 必须data: data,host: "https://mapi.zjzwfw.gov.cn/",dataType: "JSON",type: method,// header: {//   'Authorization': 'Bearer ' + that.$cookies.get("token"),// },appKey: "dyghti82+2002238306+yobxcs", // 必须onSuccess: (res) => {resolve(res);},onFail: (err) => {reject(err)},});});
}

3. 全局注册，在main.js中实现

import mgop from './utils/request'// 浙里办网络请求接口
Vue.prototype.$mgop = mgop

4. 调用实例

 let data = {start: this.start,pagesize: this.pagesize,type: this.type}let res = this.$mgop("mgop.sfkj.byzl.articleMore", 'GET', data)res.then(value => {console.log(value.data)}, reason => {console.log(reason)})

四.单点登陆

一定要加钉钉群！！！
一定要加钉钉群！！！
一定要加钉钉群！！！
测试过程找项晨老师，给他个回调地址，让他给你配置白名单
上线的时候也要找项晨老师配置地址，在irs上复制h5链接，把版本号改成reserved

流程：

前端跳转到浙里办传ak和回调地址
浙里办安排登陆，登陆成功后跳转到回调地址并带上ticket
我们获取ticket，传给后端，让后端处理完传给我们token
我们把token存到cookie，当作单点登陆的依据

代码（注意，这里是main.js中，不是vue中，注意this不同）：

// main.js
import VueCookies from 'vue-cookies';
import mgop from './utils/request';
Vue.config.productionTip = false// vue-cookies
Vue.use(VueCookies)// 浙里办网络请求接口
Vue.prototype.$mgop = mgopfunction getQuery(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var search = window.location.href.substr(1).match(reg);var sec = search[2].split('#')return sec[0]
}// 浙里办单点登陆
/*
* 有token 过
* 没有 token 有ticket， 去获取token 设置token，过
* 没有token 没有ticket  去获取ticket 跳走
* */
router.beforeEach((to, from, next) => {console.log('进入路由before')if (to.meta.title) {ZWJSBridge.setTitle({"title": to.meta.title}).then(res => {console.log(res)}).catch(err => {console.log(err)})document.title = to.meta.title;} else {ZWJSBridge.setTitle({"title": 'asdfa'}).then(res => {console.log(res)}).catch(err => {console.log(err)})}if (Vue.$cookies.get("token")) {console.log("有token")console.log(Vue.$cookies.get("token"))console.log('跳转')next()}else {console.log('没有token')let sUserAgent = window.navigator.userAgent.toLowerCase();let bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里办APPlet bIsAlipayMini = sUserAgent.indexOf("miniprogram") > -1 && sUserAgent.indexOf("alipay") > -1; // 支付宝小程序let weChartApply = sUserAgent.indexOf('micromessenger') > -1  //微信小程序let ticketif (window.location.href.includes('ticket')) {console.log('有ticket')console.log(window.location.href)let current_type = ''if (bIsDtDreamApp) {ticket = getQuery('ticket')current_type = 'zlb'} else {console.log('我在微信or支付宝')ticket = getQuery('ticketId')current_type = 'wx'}console.log('准备发送mgop请求，ticket为')console.log(ticket)let res = mgop("mgop.sfkj.asdf.getTokenByTicket",'POST',{'ticket': ticket,'type': current_type,})res.then(value => {console.log('moop请求成功，数据为')console.log(value.data)if (value.data['data']['token']) {Vue.$cookies.set("token", value.data['data']['token'], 60 * 60)next()}else {console.log('error')console.log('moop请求失败')console.log(res.data['data']['errmsg'])}}, reason => {console.log('promise moop请求失败')console.log(reason)})}else {console.log('没有ticket')if (bIsDtDreamApp) {console.log('我在浙里办')// window.location.href = "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=BCDSGA_f506c3casdf24asdfeb4c5208b47a388&redirectUrl=http://124.223.15.55:8080";// window.location.href = "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=BCDSGA_f506c3c0a482468aasdfc5208b47a388&redirectUrl=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2002238306/0.0.3/index.html?debug=true";window.location.href = "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=BCDSGA_f506casdf482468a4eb4c5208b47a388";} else {console.log('我在小程序')// window.location.href = "https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=BCDSGA_f506c3c0a482468a4eb4c5208b47a388&redirectUrl=http://124.223.15.55:8080";// window.location.href = "https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=BCDSGA_f506c3c0aasdf68a4eb4c5208b47a388&redirectUrl=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2002238306/0.0.3/index.html?debug=true";window.location.href = "https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=BCDSGA_f506asdfa4824asdfeb4c5208b47a388";}}}})

注意：

这里回调地址填写的是测试地址，正式地址得要去irs上获取并改成新的
浙里办获取ticket跳转到一个地址，支付宝和微信小程序是跳转到另一个地址
浙里办获取的是ticket，支付宝和微信小程序获取的ticketId，这个ticketId在测试情况下是固定的，传给后端即可
浙里办和小程序，后端处理ticket的方式不一样，我这里是接口处加上另一个参数来判断。让后端不要傻傻的拿微信获取的ticketId去浙里办那边处理。
测试的时候回调地址一般填写自己服务器的地址，irs上线后找项晨添加线上环境的回调地址，然后就可以不指定回调地址了。

五.适老化

1.index.html中加载cdn，一定要用1.1.0这个版本

<script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js"></script>

2.main.js中调用浙里办给的接口，获取状态并存入vuex

import store from './store/store'
//浙里办jsSDK
ZWJSBridge.onReady(() => {console.log('初始化完成后，执行bridge方法')ZWJSBridge.getUiStyle().then((result) => {const { uiStyle } = resultconsole.log(uiStyle)store.dispatch('setuiStyle', uiStyle)}).catch((error) => {console.log(error)store.dispatch('setuiStyle', 'normal')})
})new Vue({el: '#app',router,store,components: {App},template: '<App/>'
})

store中的代码

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const zwjs = new Vuex.Store({state: {uiStyle: null,},mutations: {SET_UISTYLE: (state, style) => {if(!style) returnstate.uiStyle = style}},actions: {setuiStyle(context, payload) {context.commit('SET_UISTYLE', payload)}}
})export default zwjs

获取状态代码

console.log(this.$store.state.uiStyle)

六.埋点

什么年代了还在用传统埋点啊，都用新的埋点方式
aplus_queue已经弃用，原来写在index.html中的代码都要删掉，用新的埋点方式
埋点的话每个页面都要埋，我这里的处理是埋在App.vue中
user_id和user_name是单点登陆返回的，t0, t1,什么的其他参数看钉钉群发的文档

1. index.html中导入这两库

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

2. App.vue中的created加入这段代码

 const zwlog = new ZwLog({_user_id: your_user_id,_user_nick: your_user_name})zwlog.onReady(() => {// sendPV⽅法将发送⼀条页面⽇志zwlog.sendPV({miniAppId: 'dyasti82+2002658307+yasdcs',Page_duration: 'your_page_duration',t2: 'your_t2',t0: 'your_t0',log_status: '02'});zwlog.record('yourTrackerEventCode', 'CLK', {Test1: '测试参数 1',});})

快速qa

q: irs线上地址苹果扫码可以正常显示，但是安卓扫码显示被代理系统不存在该用户
a: 去钉钉群问项晨，我跟他说了，他那边改了个东西就解决了

q: 我用document.title修改网页标题为什么没用鸭
a: 用ZWJSBridge.setTitle，在别人的环境下，遵守别人的规则

q: 浙里办需要上线微信小程序，那微信小程序的单点登陆怎么测试
a: 在微信中打开浙里办小程序，然后扫码测试（小程序中套小程序，真有你的）

q: 调试好麻烦，有什么方法么
a: 现在debug调试工具中调试，上线后有可能遇到问题，浙里办带上debug=true可以在右下角打开控制台，支付宝不清楚，我是alert来调试，微信的话先去复制irs上的h5地址，然后在网址后面拼接 ?debug=true&vconsole=true 就可以在微信的浙里办小程序中打开小控制台。

q: 线上环境，微信小程序环境出问题，只能修改代码等编译后才能调试么
a: 是的，老老实实等，我知道你很急，我也很急，你先别急，让我先急

q: 我mgop发送请求base64编码后的图片会卡住怎么办
a: mgop单次发送字节数有限制的，最大估计在100k左右，如果通过mgop上传图片建议压缩，或者走oss

q: 浙里办，微信，支付宝这三端好乱啊，调试方式也不一样
a: 微信和支付宝都是打开浙里办小程序后再进入咱们的项目，我们的小程序相当于运行在别人的小程序里