企业微信H5授权登录:一出接一出的连续剧
最近在做 企微 第三方应用的 H5 登录,下面把整个流程梳理下
-
构造授权链接
- 首先 我们作为服务商的模式,需要构造第三方应用的 授权链接
- 第三方应用链接构造,需要传 appid:第三方应用id
-
拿到code授权登录
- 授权之后,拿到code,走我们的系统登录,这个时候,接口会根据code 告知我们 哪个企业授权的应用
-
初始化 js sdk
- 拿到解析后的 企业id ,以及我们自身应用的id 去初始化 js sdk
问题备注:
这里备注下:由于 我们开发中有更换过域名,当时初始化 js sdk的时候,一直报80001 错误,解决办法: 第三方应用修改应用内配置,这里修改可信域名 未上线的需要删除重新安装第三方应用,已上线的需要重新提交审核上线修改的配置才会生效
流程梳理如下:
代码如下:
//实现一个 拦截 url search 的参数方法
const getUrlSearchParams = key => {
const searUrlStr = window.location.search
const paramStr = searUrlStr.split('?')[1]
const searchParams = new URLSearchParams(paramStr)
const val = searchParams.get(key)
return val
}
//在页面初始化的时候,执行 getUrlSearchParams
mounted(){
const code = getUrlSearchParams('code')
if(code){
//执行登录逻辑
......
//执行初始化 js-sdk
.........
}else{
window.location.replace(AuthUrl)
}
}
第一集:上线
经过一个多星期的开发,项目顺利上线了,emm, 看着我写的登录流程觉得没问题,心里暗自窃喜。
第二集:为什么我们的登录这么慢,赶紧优化
领导对比了其他家的应用,觉得我们的应用太次,登录也很慢,转半天 才到首页。emm,既然领导来亲自找咱了,那就牺牲下划水的时间赶紧去优化吧
- 缓存登录态: 把登录信息 用 localStorage 缓存起来
- 登录失效重新授权
- 拆分接口:由于我们有涉及到海报分享,要用到头像,但是企微的这个头像会存在跨域问题,所以我们在登录接口 返回的是base64,所以这个响应时间就会有点长,就把这个头像 单独用一个接口去取
- 骨架屏设计:让用户可以先看到一些静态不变的Ui,动态的UI 做了一个骨架占位,告别了转一转 emm, 看起来没啥问题,那就上线吧,领导看到效果后,竖起了大拇指????????
第三集:企微多企业切换,让我发量--(减减)
登录优化刚上线不久,项目负责人跑过来,凉了,切换企业怎么登录信息还是之前的企业
咦,我当时反问他,切换企业为什么不重新登录?这可能是人受到攻击时的第一反应,问题推出去 ???? 后来我想了下,原来是我把 登录信息以及凭证信息都缓存了。清除缓存登录又慢,不清除,切换企业又受影响,太难了。还好天无绝人之路,想到的一个方案就是:如果jssdk初始化报错的话,就重新授权,因为初始化的凭证信息是和企业进行关联的,哦吼,有点道理。 在初始化jssdk的地方加了,错误捕获授权,如果存在缓存,并且报错为对应的状态码,重新走授权!ok,很快我就写完了,上线吧,负责人喊了声:快男... 。
第四集:被测试小姐姐疯狂怼
早上一大早,测试小姐姐就过来找我: 为什么我退出了我的企微账号,换成其他人的怎么h5展示的还是我的信息啊? 我: 解决不了,我怎么知道你切换了账号! 然后测试小姐姐被我怼的好委屈,事后想想确实属实不应该,应该使劲怼~
- 企微清除缓存时机:重新登录
- 为什么重新登录没清除呢?原来小姐姐用的是pc 工作台进入的,沃日啊,这企微的bug啊,pc的没清除掉
拖鞋方案:如果是pc,工作台进入的,就清除缓存,重新走授权逻辑!
推荐阅读