浙里办H5对接单点登录
- 准备工作
- vue.config中设置 publicPath: './', outputDir: 'build',
- 路由改为Hash模式
-
准备好key值 ，问申请组件的人要
appKey: 'dwee5343434fc7+333333+sxqcua', /servicecode: 'BCDSGA_333333',servicePassword: 'BCDSGS_33332b8a',开始代码得编写1.index.html 中引入浙里办Js<script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js"></script><script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"></script>
2.新建空白页面用于跳转 我这里是loading.vue 代码如下<!-- * @Author: your name * @Date: 2021-06-28 09:19:46 * @LastEditTime: 2021-09-27 16:08:05 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: /h5/src/App.vue --> <template> <div ></div> </template> <script> import { mgop } from '@aligov/jssdk-mgop'; import utils from '@/utils/utils'; import md5 from 'js-md5'; import api from '@/api/api'; export default {
// 解决二次回退， 有二次回退的前提是，自己加了跳转的中间页，比如我这里是loading.vue beforeRouteEnter(to, from, next) { console.warn(to, 'toform'); console.warn(from, 'toform'); const sUserAgent = window.navigator.userAgent.toLowerCase(); const bIswxpayMini = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('wx') > -1;// 支付宝浙里办小程序 if (to.name === 'loading' && from.name === 'Home') { if (sUserAgent.indexOf('dtdreamweb') > -1 || bIswxpayMini) { ZWJSBridge.onReady(() => { ZWJSBridge.close(); }); } else { my.navigateBack(); } } next(); }, data() { return { appKey: 'dwee5fc7+23442五4234qcua', // 找申请组件得人要 servicecode: 'BCDSGA_4653453453453459e1', // 找申请组件得人要 servicePassword: 'BCDSGS_3cc54543543543a75532b8a', // 找申请组件得人要 ticket: null, userInfo: {}, accessToken: false, ticketId: '', WxAccessToken: '', accessTokenBool: false, zlbToken: '', }; }, created() { }, mounted() { localStorage.removeItem('token'); // 每次进入清除token localStorage.removeItem('userInfo');// 每次进入清除用户信息 ZWJSBridge.onReady(() => { console.log('初始化完成后，执行bridge方法'); // 设置H5的标题 ZWJSBridge.setTitle({ title: '青田鞋业综合服务平台', }).then((res) => { console.log(res); }).catch((err) => { console.log(err); }); // 执行获取ticket方法 this.getTicket(); }); }, methods: { // 获取允许跳转得ticket, accessToken getTicket() { const url = window.location.href;// 获取页面路由 // 用于判断普通用户得单点登录 if (url.indexOf('ticket') !== -1 && url.indexOf('ssoticket') == -1 && url.indexOf('ticketId') == -1) { // 线上环境的 const tic = url.split('=')[2].split('#')[0]; this.ticket = tic; // 测试环境的 // const reg1 = new RegExp('&debug', 'g'); // 加'g'，删除字符串里所有的"a" // this.ticket = tic.replace(reg1, ''); } // 用于判断法人用户得单点登录 if (url.indexOf('accessToken') !== -1) { this.accessTokenBool = true; // 第一次进入 到法人的url路由有accessToken accessTokenBool设置为true，用于下面再次跳转时，直接去自己项目的路由 // localStorage.setItem('token', url.split('=')[2].split('#')[0].split('&')[0]); // 测试的token取法 localStorage.setItem('token', url.split('?')[1].split('#')[0].split('&')[0].split('=')[1]); // 线上的token取法 } // 个人普通用户得单点登录 if (this.ticket !== '' && this.ticket !== null) { // 个人单点登录请求后端 this.getZLBuserInfo(); } else { // 去执行登录得地址 this.loginFun(); } }, async loginFun() { const sUserAgent = window.navigator.userAgent.toLowerCase(); const bIsDtDreamApp = sUserAgent.indexOf('dtdreamweb') > -1; // 浙里办APP const bIsAlipayMini = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1;// 支付宝浙里办小程序 const bIswxpayMini = sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('wx') > -1;// 支付宝浙里办小程序 // 用于获取微信得ticketId if (ZWJSBridge.ssoTicket) { var ssoFlag = await ZWJSBridge.ssoTicket({}); } // 浙里办APP if (bIsDtDreamApp) { // 用于判断是何种用户 1是普通用户， 2 是法人用户 ZWJSBridge.getUserType().then((result) => { if (result && result.userType == 1) { // window.location.replace(`https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=${this.servicecode}&redirectUrl=https://343454354354354352756/v1.0.0demo/index.html?debug=true`); window.location.replace(`https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=${this.servicecode}&redirectUrl=https://mapi.zjzwfw.sdfsafdsa2756/v1.0.0demo/index.html`); } else if (result && result.userType == 2) { if (this.accessTokenBool) { // 后端返回的地址url 中有 accessToken 去往自己的页面 this.$router.push('/home'); } else { // 没有时跳的地址， // ?spappurl=https://324354:8080/back/rest/zlbCallBack/getSSOToken 这个是后端的地址，需要找法人登录对接人去配置 // ?goto=https://zj/2002292756/v1.0.3/index.html 这个是IRS生成的联调地址也是后端成功后需要去往的地址 记得给给后端 // window.location.replace('https://esso.zjzwfw.gov.cn/opensso/spsaehandler/metaAlias/sp?spappurl=https://324354:8080/back/rest/zlbCallBack/getSSOToken?goto=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2002292756/v1.0.0demo/index.html?debug=true'); window.location.replace('https://esso.zjzwfw.gov.cn/opensso/spsaehandler/metaAlias/sp?spappurl=https://32:8080/back/rest/zlbCallBack/getSSOToken?goto=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2002292756/v1.0.3/index.html'); } } }).catch((error) => { console.log(error); }); } else if (bIsAlipayMini) { // 普通用户登录 去往的地址 &redirectUrl=https://mapi.z333jzwfw.gov.cn/web/mgop/gov-open/zj/2002292756/v1.0.0demo/index.html 这个也是IRS生成的联调地址 window.location.replace(`https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=${this.servicecode}&redirectUrl=https://m3434343/gov-open/zj/2002292756/v1.0.0demo/index.html`); // window.location.replace(`https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=${this.servicecode}&redirectUrl=https://m343434v-open/zj/2002292756/v1.0.0demo/index.html?debug=true`); } else if (bIswxpayMini && ssoFlag.result) { // ssoFlag.result为真代表是微信登陆，并且能拿到tiketId if (ssoFlag && ssoFlag.result === true) { this.ticketId = ssoFlag.ticketId; // 去调后端地址换取token成功 api.postAction(`/rest/auth/login?ticketId=${this.ticketId}`).then((res) => { this.WxAccessToken = res.sessionAccessToken; if (this.WxAccessToken !== '') { localStorage.setItem('token', res.sessionAccessToken); // 成功则去往自己项目的地址 this.$router.push('/home'); } else { // 失败 重新法发起单点登录 // 当“浙里办”单点登录失败或登录态失效时调用 ZWJSBridge.openLink 方法重 ZWJSBridge.openLink({ type: 'reload' }).then((res) => { this.ticket = res.ticketId; }); } }); } } }, // 个人点登录 前端换取token 的过程 // 这里最好也交给后端，前端不好调试，发版要很久，一点错，直接白屏，浪费时间 getZLBuserInfo() { this.getTonkenAndUserInfo(this.getTonkenAndUserInfoParams()).then((data) => this.getTonkenAndUserInfo(this.getTonkenAndUserInfoParams('getUserInfo', data.token))).then((data) => { // console.log('---------------浙里办返回的userInfo-----------------') console.warn(data); if (data.username) { this.userInfo = { ...data }; this.$set(data, 'token', this.zlbToken); this.$router.push('/home'); localStorage.setItem('userInfo', JSON.stringify(data)); } this.setZlbUserInfo(data); // 浙里办用户信息设置埋点 this.setUserAplus(data); this.setLoading(true); this.login({ idcard: data.idnum, name: data.username, tel: data.mobile, callback: (res) => { console.log(res); this.setLoading(false); this.$router.push('/home'); }, }); }).catch((err) => { console.log(err); }); }, getTonkenAndUserInfo(data) { return new Promise((resolve, reject) => { mgop({ api: 'mgop.l23434.sso', host: 'https://mapi.zjzwfw.gov.cn/', data, dataType: 'JSON', type: 'POST', appKey: this.appKey, onSuccess: (res) => { if (res.data.result && res.data.result == 0) { resolve(res.data); } }, onFail: (err) => { reject(err); }, }); }); }, getTonkenAndUserInfoParams(method = 'ticketValidation', token = '') { const mTime = utils.getDateTimeToString(new Date(), 'yyyymmddhhMMss'); const data = { method, servicecode: this.servicecode, time: mTime, sign: md5(`${this.servicecode}${this.servicePassword}${mTime}`), datatype: 'json', }; if (token == '') { data.st = this.ticket; } else { data.token = token; this.zlbToken = token; localStorage.setItem('token', token); } return data; }, getLocation() { ZWJSBridge.getLocation().then((result) => { this.userLocation = result; }).catch((error) => { console.log(error); }); }, // 重定向 不需要了 gobackByPageshow() { window.onpageshow = (event) => { console.warn(`navigation.type=${window.performance.navigation.type}`); console.warn('navigation.type= 11111'); if ( event.persisted || (window.performance && window.performance.navigation.type == 2) ) { ZWJSBridge.close(); } }; }, }, }; </script> <style lang="less"> </style>
