您所在的位置:首页 / 知识分享

小程序用户登录如何做?

2018.10.02

4567

fc_lamp

哪些信息是敏感信息呢? 手机号, openId, unionId, 可以看出这些值都可以唯一定位一个用户, 而昵称, 头像这些不能定位用户的都不是敏感信息


用户登录是大部分完整 App 必备的流程

一个简单的用户系统需要关注至少这些层面

  • 安全性(加密)

  • 持久化登录态(类似cookie)

  • 登录过期处理

  • 确保用户唯一性, 避免出现多账号

  • 授权

  • 绑定用户昵称头像等信息

  • 绑定手机号(实名和密保方式)

很多的业务需求都可以抽象成 Restful 接口配合 CRUD 操作

但登录流程却是错综复杂, 各个平台有各自的流程, 反倒成了项目中费时间的部分, 比如小程序的登录流程



本文就以微信小程序这个平台, 讲述一个完整的自定义用户登录流程, 一起来啃这块难啃的骨头


名词说明:


先给登录流程时序图中出现的名词简单做一个解释

  • code 临时登录凭证, 有效期五分钟, 通过 wx.login() 获取

  • session_key 会话密钥, 服务端通过 code2Session 获取

  • openId 用户在该小程序下的用户唯一标识, 永远不变, 服务端通过 code 获取

  • unionId 用户在同一个微信开放平台帐号(公众号, 小程序, 网站, 移动应用)下的唯一标识, 永远不变

  • appId 小程序唯一标识

  • appSecret 小程序的 app secret, 可以和 code, appId 一起换取 session_key

  • rawData 不包括敏感信息的原始数据字符串,用于计算签名

  • encryptedData 包含敏感信息的用户信息, 是加密的

  • signature 用于校验用户信息是否无篡改

  • iv 加密算法的初始向量

相关函数:



  • wx.login

  • wx.getUserInfo

  • wx.checkSession

小程序的 promise


我们发现小程序的异步接口都是 success 和 fail 的回调, 很容易写出回调函数 因此可以先简单实现一个 wx 异步函数转成 promise 的工具函数:


这样我们就可以这样调用函数了


小程序登录

我们先实现一个基本的 oauth 授权登录 oauth 授权登录主要是 code 换取 openId 和 sessionKey 的过程

前端小程序登录

写在 app.js 中

服务端实现 oauth 授权

服务端实现上述 /oauth/login 这个接口


获取用户信息

登录系统中都会有一个重要的功能: 获取用户信息, 我们称之为 getUserInfo 如果已登录用户调用 getUserInfo 则返回用户信息, 比如昵称, 头像等, 如果未登录则返回"用户未登录"

小程序的用户信息一般存储在 app.globalData.userInfo 中(模板如此) 我们在服务端加上前置中间件, 通过 session 来获取对应的用户信息, 并放在 req 对象中


然后实现 /user/info 接口, 用来返回用户信息


小程序调用用户信息接口

小程序请求库:https://github.com/chunpu/http#readme


自定义登录态持久化

浏览器有 cookie, 然而小程序没有 cookie, 那怎么模仿出像网页这样的登录态呢? 这里要用到小程序自己的持久化接口, 也就是 setStorage 和 getStorage 为了方便各端共用接口, 或者直接复用 web 接口, 我们自行实现一个简单的读 cookie 和种 cookie 的逻辑 先是要根依据返回的 http response headers 来种上 cookie, 此处我们用到了 @chunpu/http 中的 response 拦截器, 和 axios 用法一样


当然我们还需要在发请求的时候带上所有 cookie, 此处用的是 request 拦截器



登录态的有效期

我们知道, 浏览器里面的登录态 cookie 是有失效时间的, 比如一天, 七天, 或者一个月 也许有朋友会提出疑问, 直接用 storage 的话, 小程序的登录态有效期怎么办? 问到点上了! 小程序已经帮我们实现好了 session 有效期的判断 wx.checkSession 它比 cookie 更智能, 官方文档描述如下:

通过 wx.login 接口获得的用户登录态拥有一定的时效性。用户越久未使用小程序,用户登录态越有可能失效。反之如果用户一直在使用小程序,则用户登录态一直保持有效。

具体在前端怎么操作呢? 代码写在 app.js 中


要注意, 这里的 session 不仅是前端的登录态, 也是后端 session_key 的有效期, 前端登录态失效了, 那后端也失效了需要更新 session_key


 如何获取都能获取到 userInfo

如果在新建小程序项目中选择 建立普通快速启动模板 我们会得到一个可以直接运行的模板 点开代码一看, 大部分代码都在处理 userInfo....


但这样的模板并不科学, 这样仅仅是考虑了首页需要用户信息的情况, 如果扫码进入的页面也需要用户信息呢? 还有直接进入跳转的未支付页活动页等... 如果每个页面都这样判断一遍是否加载完用户信息, 代码显得过于冗余 此时我们想到了 jQuery 的 ready 函数 $(function), 只要 document ready 了, 就可以直接执行函数里面的代码, 如果 document 还没 ready, 就等到 ready 后执行代码 就这个思路了! 我们把小程序的 App 当成网页的 document 我们的目标是可以这样在 Page 中不会出错的获取 userInfo

此处我们使用 min-ready2 来实现此功能 代码实现依然写在 app.js 中





注:csyt以上内容整理自:21TCO


相关新闻

前端之数据模拟之Mock.js

2018.12.21

2631

一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作。

平面小课堂!9种最常见的排版布局分割技巧

2018.10.09

2952

9种最常见的排版布局分割里的讲究。

JS函数节流和函数防抖

2018.09.14

2149

JS函数节流和函数防抖的原理与应用场景