浙里办使用RAX框架实现单点登录功能

记录一下浙里办单点登录完整过程。

因为是之前做好的H5，但是上架浙里办需要支持npm run build ，所以按照官方文档里使用RAX框架，有的写法上可能不大正规。

1. 创建RAX应用，官网文档里有，按照步骤进行就行。

2. 需找浙里办老师配置回调地址。

3.接口调用会有跨域问题，所以先要在后台配置一下

https://appapi.zjzwfw.gov.cn/sso/servlet/simpleauth

填写之后需要上线才能调用

4. 准备工作好了，下面是完整逻辑

//使用jsbridge方法前需要先初始化
const excuteBridge = () => {ZWJSBridge.onReady(() => {console.log('初始化完成后，执行bridge方法'); init();})
}

const init = () => {if (getQuery('ticket') == null && ticket == "") {if (bIsDtDreamApp) {watchApp();} else if (bIsAlipayMini) {watchApply();}}else{ticket = getQuery('ticket');getTonkenAndUserInfo(getTonkenAndUserInfoParams()).then(data => {return getTonkenAndUserInfo(getTonkenAndUserInfoParams('getUserInfo', data.token));}).then(data => {console.log('data.mobile', data.mobile);window.location.replace('已开发好的H5的地址'); //个人推荐使用replace}).catch(err => {console.log(err);});}
}

const getQuery = (name) => {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null;
}const watchApp = () => {window.onpageshow = (event) => {if (event.persisted || (window.performance && window.performance.navigation.type == 2)) {ZWJSBridge.close();}}isLoad();
}const watchApply = () => {window.onpageshow = (event) => {if (event.persisted || (window.performance && (window.performance.navigation.type == 1 || window.performance.navigation.type == 0))) {isLoad();} else {window.history.back();}}
}const isLoad = () => {if (bIsAlipayMini) {window.location.replace(`https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode=${AccessKey}&goto=`);} else {window.location.replace(`https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=${AccessKey}&goto=`);}
}const timeFormat = (dateTime = null, fmt = 'yyyy-mm-dd') => {// 如果为null,则格式化当前时间if (!dateTime) dateTime = Number(new Date());// 如果dateTime长度为10或者13，则为秒和毫秒的时间戳，如果超过13位，则为其他的时间格式if (dateTime.toString().length == 10) dateTime *= 1000;let date = new Date(dateTime);let ret;let opt = {"y+": date.getFullYear().toString(), // 年"m+": (date.getMonth() + 1).toString(), // 月"d+": date.getDate().toString(), // 日"h+": date.getHours().toString(), // 时"M+": date.getMinutes().toString(), // 分"s+": date.getSeconds().toString() // 秒// 有其他格式化字符需求可以继续添加，必须转化成字符串};for (let k in opt) {ret = new RegExp("(" + k + ")").exec(fmt);if (ret) {fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))};};return fmt;
}

const getTonkenAndUserInfoParams = (method = 'ticketValidation', token = '') => {let mTime = timeFormat(new Date(), 'yyyymmddhhMMss');let data = {method: method,servicecode: `${AccessKey}`,time: mTime,sign: md5Libs.hex_md5(`${AccessKey}${SecretKey}${mTime}`),datatype: 'json',st: '',token: ''}if (token == '') {data.st = ticket;} else {data.token = token;}return data;
}

const getTonkenAndUserInfo = (data) => {return new Promise((resolve, reject) => {mgop({api: '******', //上面新建的API自定义的名称host: 'https://mapi.zjzwfw.gov.cn/',dataType: 'JSON',type: 'POST',appKey: `${appKey}`, //在后台应用配置里面可以找到data: data,onSuccess: res => {if (res.data.result && res.data.result == 0) {resolve(res.data);}else{if (bIsDtDreamApp) {watchApp();} else if (bIsAlipayMini) {watchApply();}}},onFail: err => {reject(err);}});})
}

5. 打包发布

node_modules不需要打包

压缩的文件名改为project=>进入后台应用管理=>部署发布=>上传代码=>等待编译=>上线

（测试最好下载政务中台Debug工具）

浙里办使用RAX框架实现单点登录功能相关推荐

浙里办前端H5对接小结（复盘自用)
项目是老项目之前上线在浙政钉上的现在老板说要在浙里办也上线一版刚转正的前端就开始一脸懵逼得瞎搞现在整差不多了复盘一下目录政务中台debug工具测试下载及登录绑定查看日志调试工具浙 ...
浙里办微信小程序上架
一.概述本指南旨在为"浙里办"单点登录组件提供接入指南,"浙里办"单点登陆组件,上架在IRS,为上架在IRS的应用,提供统一的单点登录解决方案,现阶段仅支持微 ...
使用uniapp框架搭建浙里办微应用(单点登录、埋点、适老化、RPC网关)
文章目录前言一.前期准备二.浙里办-单点登录功能三.获取用户信息 Ⅰ.普通request调取用户数据 Ⅱ.浙里办RPC网关调用的实现 Ⅲ.浙里办官方单点登录组件接口网关调用四.埋点操作 Ⅰ. ...
浙里办单点登录-PHP-TP5-轻松上手
浙里办单点登录-PHP-TP5-轻松上手-复制即可使用流程 (1).单点登陆需要在IRS上申请对应的组件(这里申请的是个人用户单点登录组件) (2).审核流程通过后做下面的操作在irs上找到&qu ...
浙里办开发票据认证单点登陆、令牌获取用户信息
浙里办开发票据认证单点登陆.令牌获取用户信息(JAVA后端处理) 最近在搞浙里办开发,周边的人里都没人接触过,以至于自己摸索搞起来比较心累.浙里办单点登陆需要在IRS上走申请,审核流程通过后,和指 ...
Uniapp、Vue搭建浙里办微应用(单点登录、埋点)
目录 `一.前期准备` `二.浙里办-单点登录功能` `三.获取用户信息` `四.埋点操作` `五.JSBridge的引入及使用` 一.前期准备由于浙里办的微应用是必须前后端分离,且前端文件需要部署 ...
“浙里办“项目单点登录、埋点、二次回退的问题
已经有一段时间没有更新博客了,因为最近变成了某个项目的负责人,就突然忙了起来. 刚接到这个项目的开始,我还觉得自己一定能很出色的完成这个任务.刚过了几天我就发现事情并不是我想象的那么简单,我要做的事情 ...
浙里办接入 H5应用使用说明
参考官网链接: https://www.yuque.com/docs/share/525e3e8a-ad52-421b-90da-2d76808e3050 说明接入方式有两种: 1.使用Rax框架并 ...
H5浙里办对接流程和问题记录
使用框架介绍:vue3 + vite + vant 前端对接流程总结 1.环境准备 1.1 引入JSBridge 1.2 更改打包目录 2.单点登录 3.适老化(浙里办上架h5硬性要求) 4.MGOP ...
浙里办完整开发流程（仅前端）
开发之前一定要作的几点 1.添加浙里办钉钉对接群群号 34143965(有什么不定的地方就大胆问群里的几个负责人) 2.问钉钉群里面得的老师要开发流程相关文件和开发注意事项(浙里办适老化对ui有 ...

浙里办使用RAX框架实现单点登录功能

浙里办使用RAX框架实现单点登录功能相关推荐

最新文章

热门文章