登录涉及的面比较多:触发场景上,各种页面各种交互路径都可能触发登录;交互过程上,既需要用户提供/证明id,也需要后端记录维护,还需要保证安全性;复用场景上,既是通用功能,需要多场景多页面甚至多小程序复用,又是定制功能,需要各场景/页面/小程序区分处理。要做到各种情形下都有良好的交互体验,且健壮、高效、可复用、可扩展、可维护,还是相对比较复杂的。
本文将探讨小程序登录过程中的一些主要需求和问题,以渐进迭代的方式提出并实现一个健壮、高效的登录方案。
顺带一提,es6语法中的async/await、Promise、decorator等特性对于复杂时序处理相当有增益,在本文中也会有所体现。
基础流程
如上图所示,基础登录流程为:调用微信登录接口wx.login获取微信登录态
调用微信用户信息接口wx.getUserInfo获取微信用户信息
调用后端登录接口,根据微信用户标识及信息,记录维护自己的用户体系
该流程主要基于以下考虑:交互上,用户只需在微信的授权弹窗上点击确认,不需要输入账号密码等复杂操作;
体验上,可以直接获取微信昵称头像等作为初始用户信息,使用起来更亲切,传播时好友辨识度也更高;
开发上,可以直接使用或映射微信用户标识,无需自己进行标识的生成和验证;
安全上,微信已经在用户信息的获取、传输、解密等环节做了许多处理,安全性相对有保障。
健壮流程
拒绝授权问题
问题:
获取微信用户信息时,会出现一个授权弹窗,需要用户点击“允许”才能正常获取;
若用户点击“拒绝”,不仅当次登录会失败,一定时间内后续登录也会失败,因为短期内再次调用微信用户信息接口时,微信不会再向用户展示授权弹窗,而是直接按失败返回。
这样导致用户只要拒绝过一次,即使后来对小程序感兴趣了愿意授权了,也难以再次操作。
方案:
如上图所示,增加以下流程以处理拒绝授权问题:获取微信用户信息失败时,判断是否近期内拒绝授权导致;
若为拒绝授权导致,则提示并打开权限面板,供用户再次操作;
若用户依然未授权,则本次登录失败,否则继续后续流程。
这样,用户拒绝授权只会影响本次登录,不至于无法进行下次尝试。
登录态过期问题
问题:微信登录态有效期不可控
上图截自微信官方文档,从中可以看出:后端session_key随时可能失效,什么时候失效开发者不可控;
要保证调用接口时后端session_key不失效,只能在每次调用前先使用wx.checkSession检查有效期或直接重新执行微信登录接口;
前端不能随便重新执行微信登录接口,可能导致正在进行的其它后端任务session_key失效;
此外,实践中发现,wx.checkSession平均耗时约需200ms,每次接口调用前都先检查一遍,开销还是蛮大的。
如何既保证接口功能正确有效,又不用每次耗费高额的查询开销,成为了一个问题。后端登录态过期
后端自身的登录态有效期也存在类似的问题,有可能在调用接口时才发现后端登录态已过期。
方案:
</