微信小程序中做用户登录与登录态维护的实现详解


Posted in Javascript onMay 17, 2017

总结

大家都知道,在开发中提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情。像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件。

让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情。我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Session)状态。下面来看看详细的介绍:

在微信小程序中,我们大致会涉及到以下三类登录方式:

  • 自有的账号注册和登录
  • 使用其他第三方平台账号登录
  • 使用微信账号登录(即直接使用当前已登录的微信账号来作为小程序的用户进行登录)

第一和第二种方式是目前Web应用中最常见的两种方式,在微信小程序中同样可以使用,但是需要值的注意的是,小程序中没有Cookie的机制,所以在使用这2种方式前,请确认你们或第三方的API是否需要依赖Cookie;还有小程序中也不支持HTML页面,那些需要使用页面重定向来进行登录的第三方API就需要改造,或不能用了。

我们今天主要来讨论一下第三种方式,即如何使用微信账号进行登录,因为这种方式和微信平台结合最紧密,用户体验比较好。

登录流程

引用小程序官方文档的登录流程图,整个登录流程基本如下图所示:

微信小程序中做用户登录与登录态维护的实现详解
登录流程图

该图中,“小程序”指的就是我们使用小程序框架写的代码部分,“第三方服务器”一般就是我们自己的后台服务程序,“微信服务器”是微信官方的API服务器。

下面我们来逐步分解一下这个流程图。

步骤1:在客户端获取当前登录微信用户的登录凭证(code)

在小程序中登录的第一步,就是先获取登录凭证。我们可以使用wx.login()方法并得到一个登录凭证。

我们可以在小程序的App代码中发起登录凭证请求,也可以在其他任何Page页面代码中发起登录凭证请求,主要根据你小程序的实际需要。

App({
 onLaunch: function() {
 wx.login({
  success: function(res) {
  var code = res.code;
  if (code) {
   console.log('获取用户登录凭证:' + code);
  } else {
   console.log('获取用户登录态失败:' + res.errMsg);
  }
  }
 });
 }
})

步骤2:将登录凭证发往你的服务端,并在你的服务端使用该凭证向微信服务器换取该微信用户的唯一标识(openid)和会话密钥(session_key)

首先,我们使用wx.request()方法,请求我们自己实现的一个后台API,并将登录凭证(code)携带过去,例如在我们前面代码的基础上增加:

App({
 onLaunch: function() {
 wx.login({
  success: function(res) {
  var code = res.code;
  if (code) {
   console.log('获取用户登录凭证:' + code);

   // --------- 发送凭证 ------------------
   wx.request({
   url: 'https://www.my-domain.com/wx/onlogin',
   data: { code: code }
   })
   // ------------------------------------

  } else {
   console.log('获取用户登录态失败:' + res.errMsg);
  }
  }
 });
 }
})

你的后台服务(/wx/onlogin)接着需要使用这个传递过来的登录凭证,去调用微信接口换取openid和session_key,接口地址格式如下所示:

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

这里是我使用了Node.js Express构建的后台服务的代码,仅供参考:

router.get('/wx/onlogin', function (req, res, next) {
 let code = req.query.code

 request.get({
 uri: 'https://api.weixin.qq.com/sns/jscode2session',
 json: true,
 qs: {
  grant_type: 'authorization_code',
  appid: '你小程序的APPID',
  secret: '你小程序的SECRET',
  js_code: code
 }
 }, (err, response, data) => {
 if (response.statusCode === 200) {
  console.log("[openid]", data.openid)
  console.log("[session_key]", data.session_key)

  //TODO: 生成一个唯一字符串sessionid作为键,将openid和session_key作为值,存入redis,超时时间设置为2小时
  //伪代码: redisStore.set(sessionid, openid + session_key, 7200)

  res.json({ sessionid: sessionid })
 } else {
  console.log("[error]", err)
  res.json(err)
 }
 })
})

这段后台代码成功执行的话,就可以得到openid和session_key。这个信息就是当前微信账户在微信服务器那边的登录态了。

但是,为了安全方面的原因,请不要直接使用这些信息作为你小程序的用户标识和session标识回传到小程序客户端中去,我们应该在服务器端做一层自己的session,将这个微信账号登录态生成一个session id并维护在我们自己的session机制中,然后把这个session id派发到小程序客户端作为session标识来使用。

关于如何在服务器端做这个session机制,我们现在一般采用键值对存储工具来做,比如redis。我们为每个session生成一个唯一的字符串作为键,然后可以将session_key和openid作为值,存入redis中,为了安全,存入的时候还应设置一个超时的时间。

步骤3:在客户端保存sessionid

开发Web应用的时候,在客户端(浏览器)中,我们通常将session id存放在cookie中,但是小程序没有cookie机制,所以不能采用cookie了,但是小程序有本地的storage,所以我们可以使用storage来保存sessionid,以供后续的后台API调用所使用。

在之后,调用那些需要登录后才有权限的访问的后台服务时,你可以将保存在storage中的sessionid取出并携带在请求中(可以放在header中携带,也可以放在querystring中,或是放在body中,根据你自己的需要来使用),传递到后台服务,后台代码中获取到该sessionid后,从redis中查找是否有该sessionid存在,存在的话,即确认该session是有效的,继续后续的代码执行,否则进行错误处理。

这是一个需要session验证的后台服务示例,我的sessionid是放在header中传递的,所以在这个示例中,是从请求的header中获取sessionid:

router.get('/wx/products/list', function (req, res, next) {
 let sessionid = req.header("sessionid")
 let sessionVal = redisStore.get(sessionid)

 if (sessionVal) {
 // 执行其他业务代码
 } else {
 // 执行错误处理
 }
})

好了,通过微信账号进行小程序登录和状态维护的简单流程就是这样,了解这些知识点之后,再基于此进行后续的开发就会变得更容易了。

另外,腾讯前端团队也开源了他们封装的相关库,可以借鉴和使用。

服务器端库 weapp-session

小程序端库 weapp-session-client

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
jquery常用的12个小功能
Jul 22 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
js实现缓动动画
Nov 25 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
Angular获取手机验证码实现移动端登录注册功能
May 17 #Javascript
原生JS实现层叠轮播图
May 17 #Javascript
JavaScript手风琴页面制作
May 17 #Javascript
jQuery查找dom的几种方法效率详解
May 17 #jQuery
bootstrap的工具提示实例代码
May 17 #Javascript
js字符串与Unicode编码互相转换
May 17 #Javascript
JavaScript实现省市县三级级联特效
May 16 #Javascript
You might like
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
python发送HTTP请求的方法小结
2015/07/08 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
pycharm创建一个python包方法图解
2019/04/10 Python
python批量修改xml属性的实现方式
2020/03/05 Python
PHP笔试题
2012/02/22 面试题
linux系统都有哪些运行级别
2016/03/26 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
金融专业个人的自我评价
2013/10/18 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
大学生村官承诺书
2014/03/28 职场文书
幼儿园老师寄语
2014/04/03 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript