请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

亿仁网

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 5194|回复: 0

微信小程序之登录态的探索

[复制链接]
  • TA的每日心情
    奋斗
    2019-3-14 22:24
  • 签到天数: 160 天

    [LV.7]常住居民III

    1074

    主题

    1139

    帖子

    1万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    18046
    发表于 2018-11-29 21:25:02 | 显示全部楼层 |阅读模式

    通常的登录都是通过一个表单,这很正常,但如果在小程序里你也这么做那就有点不可思议了,微信的一键登录对用户体验有多好你难道不知道?最主要——你要利用微信的生态必须需要用微信的登录,以获取相关信息来和微信交互。用户在小程序、小游戏中需要点击组件后,才可以触发登录授权弹窗、授权自己的昵称头像等数据。友情提示一下:wx.login并不需要点击组件,需要的是wx.getUserInfo,但通常我们都会用到UnionID、encryptedData、iv等信息完成完整的登录流程。

    怎么在需要的页面都能弹出登录按钮,应该很多人都能想到:抽离出组件,那怎么保证在需要的页面都有这个组件呢?错杀一千也不能放过一个!把登录组件集成到共用的父组件,然后在每个页面都使用。我也建议这么做,因为这个共用的父组件其实又很多用处,例如iPhoneX适配等,在哪里校验是否需要鉴权。

    官方的这张图已经做了很详尽的说明,但是看到session_key了吗?

    会话密钥 session_key 有效性

    开发者如果遇到因为 session_key 不正确而校验签名失败或解密失败,请关注下面几个与 session_key 有关的注意事项。

    wx.login 调用时,用户的 session_key 可能会被更新而致使旧 session_key 失效(刷新机制存在最短周期,如果同一个用户短时间内多次调用 wx.login,并非每次调用都导致 session_key 刷新)。开发者应该在明确需要重新登录时才调用 wx.login,及时通过 code2Session 接口更新服务器存储的 session_key。

    微信不会把 session_key 的有效期告知开发者。我们会根据用户使用小程序的行为对 session_key 进行续期。用户越频繁使用小程序,session_key 有效期越长。

    开发者在 session_key 失效时,可以通过重新执行登录流程获取有效的 session_key。使用接口 wx.checkSession可以校验 session_key 是否有效,从而避免小程序反复执行登录流程。

    当开发者在实现自定义登录态时,可以考虑以 session_key 有效期作为自身登录态有效期,也可以实现自定义的时效性策略。

    怎么保证session_key的有效性

    • 要保证调用接口时后端session_key不失效,只能在每次调用前先使用wx.checkSession检查是否有效

    • 实践中也发现wx.checkSeesion非常耗时,大约200ms,所以也不能每次接口调用前都使用wx.checkSession检查是否有效

    • 同时要注意前端不能随便重新执行wx.login,因为可能导致正在进行的其它后端任务session_key失效


    得知:在使用小程序期间session_key是不会失效的。1、在每个请求前去校验有效性;2、将校验有效性的结果存储起来;3、通过async/await和刚才存储起来的结果来保证不过多调用wx.checkSession。

    因为storage是永久的存储,而session_key的有效期却只是在使用小程序期间,所以你需要在小程序结束后手动重置该状态以重新校验其有效性,那是不是在app的onUnload里重置呢?不是!开发过小程序的应该都知道,那就是结束使用小程序的方式太多,不能保证每种方式都会触发onUnload,例如用户直接销毁了微信进程那用什么呢?直接用内存啊,借助内存的自动管理来智能管理,所以最终代码应该是这样的。

    1. // doRequest.js
    2. let wxSessionValid = null // 微信session_key的有效性
    3. // 带鉴权的请求封装
    4. async function doRequestWithCheckAuth() {
    5.   ...
    6.   if (typeof wxSessionValid !== 'boolean') {
    7.     wxSessionValid = await checkWxSession() // 检查微信session是否有效
    8.   }
    9.   if (!wxSessionValid) {
    10.     await reLogin() // 重新登录
    11.   }
    12.   wxSessionValid = true // 重新登陆后session_key一定有效
    13.   ...
    14. }
    复制代码

    怎么校验完整的认证体系:校验微信端的session_key略有麻烦,但不应该把它抛给服务端;服务端不能直接校验session_key的有效性而是通过调用接口发现错误了才知道失效了,这是被动的;服务端需要同时维护两个session。而放在前端我们只需要校验两个session的有效性即可,任何一个失效就重新登录,这是积极主动有效的操作,应该被提倡。

    基本上梳理的差不多了,就差弹登录按钮了,这个简单,调用刚才封装的组件的方法就行了嘛,bingo,可是,点完允许后呢?怎么继续用户的操作呢?怎么能让用户的体验不被打断呢?先回放下刚才reLogin的代码

    1. async function reLogin() {
    2.   // 确保有用户信息
    3.   await new Promise(resolve => { // ⚠️注意开头有await!!!
    4.     wx.getSetting({
    5.       success: (res) => {
    6.         // 如果用户没有授权或者没有必要的用户信息
    7.         if (!res.authSetting['scope.userInfo'] || !_.isRealTrue(wx.getStorageSync('userInfoRes').userInfo)) {
    8.           navToLogin(resolve) // 去提示用户点击登录按钮,⚠️注意:并把当前的resolve带过去
    9.         } else {
    10.           resolve() // 静默登录
    11.         }
    12.       }
    13.     })
    14.   })
    15.   return new Promise((resolve) => {
    16.     wx.login({
    17.       success: res => {
    18.         login(res.code).then((jwt) => {
    19.           resolve(jwt) // resolve jwt
    20.         }) // 通过code进行登录
    21.       },
    22.       fail(err) {
    23.         wx.showToast({
    24.           title: err.errMsg,
    25.           icon: 'none',
    26.           duration: 2000
    27.         })
    28.       }
    29.     })
    30.   })
    31. }
    32. function navToLogin(resolve) {
    33.   /* eslint-disable no-undef */
    34.   const pages = getCurrentPages()
    35.   const page = pages[pages.length - 1] // 当前page
    36.   page.openLoginModal(resolve) // 打开登录按钮弹框,并把当前的resolve带过去
    37. }
    复制代码

    通过回调的方式当用户同意授权了就继续余下的逻辑,如果被拒绝了,则安利他,再拒绝就终止操作,下次需要授权也会继续弹出授权。

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    造物之前,必先造人。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|亿仁网 ( 粤ICP备16098737  

    GMT+8, 2020-8-3 17:06 , Processed in 0.178397 second(s), 25 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表