0
0

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

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

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"}
  1. 上传并编译成功后可以查看了，这时候页面可以显示，但是异步请求和单点登陆等功能没有实现，这些难点见下文。

三.异步请求mgop

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

1. 安装mgop

npm i --save @aligov/[email protected] --legacy-peer-deps

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

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

2. 引入

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

  1. url是irs上后端注册的url（要上线）
  2. method 是 GET 或者 POST
  3. data就是数据，get和post都用这个
  4. ak用你自己的，注意有2个ak，用格式像我这个的
  5. headers注意！是header，不是axios的headers
// request.jsimport{ mgop }from"@aligov/jssdk-mgop";exportdefaultfunction(url, method, data){let that =thisreturnnewPromise((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

流程：

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

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

// main.jsimport VueCookies from'vue-cookies';import mgop from'./utils/request';
Vue.config.productionTip =false// vue-cookies
Vue.use(VueCookies)// 浙里办网络请求接口Vue.prototype.$mgop = mgop

functiongetQuery(name){var reg =newRegExp("(^|&)"+ 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 ticket

        if(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";}}}})

注意：

  1. 这里回调地址填写的是测试地址，正式地址得要去irs上获取并改成新的
  2. 浙里办获取ticket跳转到一个地址，支付宝和微信小程序是跳转到另一个地址
  3. 浙里办获取的是ticket，支付宝和微信小程序获取的ticketId，这个ticketId在测试情况下是固定的，传给后端即可
  4. 浙里办和小程序，后端处理ticket的方式不一样，我这里是接口处加上另一个参数来判断。让后端不要傻傻的拿微信获取的ticketId去浙里办那边处理。
  5. 测试的时候回调地址一般填写自己服务器的地址，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 }= result
        console.log(uiStyle)
         store.dispatch('setuiStyle', uiStyle)}).catch((error)=>{
        console.log(error)
        store.dispatch('setuiStyle','normal')})})newVue({el:'#app',
  router,
   store,components:{App},template:'<App/>'})

store中的代码

import Vue from'vue'import Vuex from'vuex'

Vue.use(Vuex)const zwjs =newVuex.Store({state:{uiStyle:null,},mutations:{SET_UISTYLE:(state, style)=>{if(!style)return
      state.uiStyle = style
    }},actions:{setuiStyle(context, payload){
      context.commit('SET_UISTYLE', payload)}}})exportdefault 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 =newZwLog({_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: 微信和支付宝都是打开浙里办小程序后再进入咱们的项目，我们的小程序相当于运行在别人的小程序里

标签： javascript vue.js 前端
本文转载自: https://blog.csdn.net/dom_l_z/article/details/126655637
版权归原作者 dom_l_z 所有， 如有侵权，请联系我们删除。
登录后发布评论

“浙里办接入流程（施工完毕）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

零信任技术之fwknop单包认证敲门

PropEr：Erlang 的基于属性的测试工具

Java+selenium+chrome+linux/windows实现数据获取

10步教会你用visual studio写c文件

甘特图组件DHTMLX Gantt中文教程 - 如何实现持久UI状态

k8s使用本地docker私服启动自制的flink集群

Hive 判断某个字段长度

文章导航