• 浙江政务服务网(含单点登录、mgop、zwlog埋点)对接流程


    首先由业主单位在IRS平台上注册申请应用,等审批通过后,会给开发商提供开发商账号,使用开发商账号登录IRS平台,就可以进行应用的接口申请和部署了。

    一、API接口注册

    在IRS平台API管理界面中,新建API,设置生产环境、测试环境的服务地址,GET/POST类型,以及入参和出参。(我司没有定义入参和出参,仅通过在header中增加特定参数,然后通过网关转发api请求。)

    注册成功之后,可以进行在线调试,按接口参数定义规则,传入相应参数,调试获取结果。调试成功后,需要上线接口,这样才可以在页面中调用该接口。

    备注:经钉钉技术答疑群中相关人员确认,应用可不使用在IRS平台上定义的接口,并自行实现接口并调用后端服务,没有强制规定一定要在IRS上定义API并调用。

    二、mgop使用

    技术对接文档中已经给出了mgop的基本使用方法,我们要做的就是对mgop进行二次封装,方便使用。

    1. import { mgop } from '@aligov/jssdk-mgop';
    2. const request = function (config) {
    3. return new Promise((resolve, reject) => {
    4. mgop({
    5. api: 'mgop.xxxx.xxxx.xxxxApi', //IRS平台定义的api接口
    6. host: 'https://mapi.zjzwfw.gov.cn/', // 固定地址
    7. dataType: 'JSON',
    8. type: config.mgopApi == 'image' ? 'GET' : 'POST',
    9. appKey: 'xxxxxx', // 在IRS平台可获取到
    10. header: {
    11. 'xxxx': 'xxxx', //后端服务所需的请求头参数,可以有多个
    12. isTestUrl: '1' //测试环境必填,否则请求的是生产环境地址;
    13. },
    14. data: config.params ? config.params : '', //请求体参数
    15. onSuccess: (data) => {
    16. console.log('data', data);
    17. resolve(data.data);
    18. },
    19. onFail: (err) => {
    20. console.log(err, 'err');
    21. }
    22. });
    23. });
    24. };
    25. export default request;

    使用mgop无法进行本地调试,会出现跨域错误,只能将代码上传到IRS平台上,然后会得到测试地址,通过测试地址查看接口返回值。 

    备注:如果请求头中没有添加isTestUrl参数,则将连接生产环境后端地址。

    三、政务网header和footer的引入

    按照官方技术文档,在index.html中引入头部js尾部js,页面中将自动显示政务网的头部和底部,包含无障碍、长辈版等硬性上线要求,无需额外功能开发。

    备注:本地环境下头部城市切换、无障碍功能不可用,涉及到相关请求接口跨域,发布IRS平台后,即可正常使用。

     1. 长辈版样式修改

    切换长辈版的原理是,点击长辈版按钮时,会在在index.html的body标签上增加一个类名,类名可以使用政务网的类名zjzwOLD,也可以自定义类名,内部页面的长辈版样式,可以写在.zjzwOLD下。

    长辈版切换触发类名修改的方法(技术文档中已提供):

     2.页面标签设置

    1. <meta name="SiteName" content="浙江省人民政府 浙江政务服务网 IRS上的平台名称" />
    2. <meta name="SiteDomain" content="zwfw.zj.gov.cn,zjzwfw.gov.cn,mapi.zjzwfw.gov.cn" />
    3. <meta name="SiteIDCode" content="3300000069" />

    SiteName的值,最后一个要写IRS上你的应用的名字,写其它的会被驳回。

    四、单点登录

    1.首先由业主单位在IRS上申请单点登录组件。

    2.在前端页面中定义好单点登录回调路由地址,用于获取政务网登录成功后返回的回调信息。

    3.将前端代码上传到IRS平台后,需要提交审核,提交审核后,会拿到生产环境的前端页面访问地址,将此地址下的完整回调页面地址发给业主,由业主将回调地址提交申请,用于政务网登录成功后携带参数跳转到此回调地址。申请通过后,会得到一个appId,用于前端页面跳转到政务网登录页。

    4.单点登录跳转示例:

    公共登录地址是:

    https://portal.zjzwfw.gov.cn/uc/sso/login?appId=xxxxxxx&sp=/xxxxxxxx&userType=xxxxxxx

    其中appId是业主将回调地址提交申请审核通过后,得到的appId,不是IRS平台上的appId,切记。

    sp参数可传可不传,该参数会在政务网登录成功后,做为返回参数放在回调地址上。我们一般用来做为应用内单点登录成功后的页面跳转地址。

    userType参数的值有两个:person和legal(个人和法人)

    用户在政务网登录成功后,会自动跳转到回调地址页面,并在url地址上携带ticketId和sp参数。后端同学需要使用这个ticketId获取政务网上登录人信息,完成应用内的单点登录。

    回调地址示例:

    http://www.baidu.com/call/back?sp=xxxxxxx&ticketId=xxxxxxx

     上面的http://www.baidu.com/call/back就是我们上一步我们提供给业主的完整回调地址。redirectUrl是我们跳转政务网登录页时传入的sp参数,ticketId是政务网登录成功后返回的值。

    注意:跳转到政务网登录地址的时候,我们如果传入了sp参数,在登录成功返回到回调地址的时候,该参数的键值变成了redirectUrl。取值时不要取错

    五、埋点

    1.首先需要在index.html中引入zwlog.js链接地址

    2.由于埋点要求每个页面都要上报埋点信息,所以将埋点功能的调用放在了App.vue中,监听路由变化,当路由变化时发送埋点信息。

    3.经与技术人员核实,可以仅在登录情况下发送埋点数据,未登录情况下可不发送。

    4.使用方式(核心代码):

    1. let _this = this;
    2. this.zwlog = new ZwLog({
    3. _user_id: userId, //登录用户id(政务网返回)
    4. _user_nick: userNick //登录用户昵称(政务网返回)
    5. });
    6. this.$nextTick(() => {
    7. this.zwlog.onReady(function () {
    8. let params = {
    9. miniapp_start: '$$miniapp_start',//固定值
    10. page_start: '$$page_start', //固定值
    11. t2: Time2, //页面启动到加载完成的时间
    12. t0: Time0, //页面启动到页面响应完成的时间
    13. userType: 'legal', //或person
    14. miniAppId:'xxxxx', //IRS上appId
    15. miniAppName: 'xxxxxx', //IRS上应用名称
    16. pageId: 'xxxx', //页面id,可以取当前路由path
    17. pageName: 'xxxx',//页面名称,可以取当前路由名称
    18. _user_id: 'xxxxx', //当前登录人id
    19. miniapp_first_user: 'first_user' //如果用户是首次使用该应用,则传入,否则不传
    20. }
    21. _this.zwlog.sendPV(params);
    22. })
    23. })

    关于t2和t0的计算方法: 

    在mounted中获取当前时间,做为页面开始加载时间time1,在watch路由变化时获取当前时间time2,将time2-time1的值做为页面启动到加载完成的时间。但是,该算法仅在页面整体首次加载时有效,因为vue页面除首次加载,之后在切换路由时,页面加载时间可视为0.因此,t2的值在非首次加载时,直接设置为0即可。

    t0的算法,在上面nextTick中获取当前时间time3,当页面是首次加载时,t0=time3-time1,当页面是非首次加载时,t0=time3-time2

    最终单位要转换成秒

    六、其它审核相关内容

    1.跳转到政务服务网之外的第三方链接,在跳转之前要有弹窗提醒。技术群中有相关人员答复,原则上不允许跳转到站外地址。但没有明确禁止。

    2.长辈版模式下,字体不得小于18px。

    3.审核流程

    业主单位要先进行内部审核,内部审核通过之后才会提交到浙里办。

  • 相关阅读:
    OpenCV 颜色检测| color detection
    Vscode中注释变成繁体的解决方法
    产品创新设计:品牌价值提升的主要途径
    Android笔记(七)Android JetPack Compose组件搭建Scaffold脚手架
    信息学竞赛初中初赛模拟卷-有答案
    JZ6 从尾到头打印链表
    基于TMS320F28377D开发板的DSP CLA算法案例开发手册
    【机器学习基础】无监督学习(3)——AutoEncoder
    [跨数据库、微服务] FreeSql 分布式事务 TCC/Saga 编排重要性
    算法训练第六十二天
  • 原文地址:https://blog.csdn.net/xiao1215fei/article/details/137876482