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

浙里办（单点登录、适老化、埋点、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=回调地址'}- 微信小程序环境的判断 微信小程序登录需要引入zwjsbridge.js 在public文件夹里面index.html中添加<scripttype="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 =thisconst 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中接入

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

进行埋点操作

const zwlog =newZwLog({_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.jsexportdefaultnewVuex.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";exportdefault{computed:{...mapGetters({uiStyle:'getuiStyle'})}}</script><style lang="scss" scoped>.pages-normal{...}.pages-elder{...}</style>

4. mgop网关依赖

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

 npm i --save @aligov/[email protected]

封装@aligov/jssdk-mgop请求

import{ mgop }from'@aligov/jssdk-mgop'constrequest=(payload)=>{let xtoken ='登录后获取的xtoken'returnnewPromise((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)}})})}exportdefault 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);});