微信小程序中用户登录及登录状态维护详解

更新时间：2017-05-17 09:13:29 作者：易进码

微信小程序的运行环境并不是运行在浏览器里，因此无法保持登录状态，下面这篇文章主要介绍微信小程序中如何做用户登录以及登录状态维护的相关内容，文章介绍的很详细，有需要的朋友可以参考学习。

总结

众所周知，对于有用户体系的软件应用来说，在开发过程中提供用户登录并维护用户的登录状态是常有的事。而对于微信这样的社交平台，如果做小程序应用，可能很少会做成一个完全脱离、抛弃与用户信息的联系的纯工具软件。

大多数小程序都会让用户登录，识别用户，获取用户信息，以用户为核心提供服务。今天我们就来学习一下小程序中如何进行用户登录，以及登录后如何保持会话状态。下面我们一起来看看详细的介绍吧：

在微信小程序中我们一般会涉及到以下三种登录方式：

第一种和第二种方式是目前 Web 应用中最常见的两种方式，在微信小程序中也可以使用，不过需要注意的是小程序中并没有这种机制，所以在使用这两种方式前请确认是否需要依赖自己或者第三方 API，另外小程序不支持 HTML 页面，需要页面跳转才能登录的第三方 API 需要修改或者无法使用。

今天我们主要来讨论第三种方式，也就是如何使用微信账号登录，因为这种方式和微信平台结合最为紧密，用户体验也更好。

登录流程

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

登录流程图

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

让我们逐步分解这个流程图。

步骤1：在客户端获取当前登录微信用户的登录凭证（code）

登录小程序的第一步就是获取登录凭证，我们可以使用wx.()方法，获取一个登录凭证。

我们可以在小程序的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 步：将登录凭据发送到您的服务器，并使用它们与微信服务器交换微信用户的唯一 ID 和会话密钥。

首先我们通过 wx.() 方法请求一个我们自己实现的后端 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/）需要使用传递的登录凭证调用微信接口进行兑换，接口地址格式如下：

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

下面是我使用Node.js构建的后台服务的代码，仅供参考：

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) } }) })

如果此后台代码执行成功，则可以获取到。此信息是当前微信账号在微信服务器上的登录状态。

但为了安全起见，请不要直接把这些信息作为你小程序的用户ID和ID传回给小程序客户端。我们应该在服务端自己搭建一层，针对微信账号登录态生成一个ID并维护在自己的机制中，再把这个ID分发给小程序客户端作为标识使用。

至于服务端如何实现这个机制，我们一般使用键值对存储工具来做，比如我们为每个键生成一个唯一的字符串作为键，然后我们可以将和作为值进行存储。为了安全起见，存储的时候应该设置一个超时时间。

步骤 3：在客户端保存

在开发 Web 应用时，我们一般会把 id 存储在客户端（浏览器），但是小程序没有这个机制，所以没法使用。不过小程序有一个本地的，所以我们可以利用它来保存，方便后续后台 API 调用。

后续在调用那些需要登录才有权限访问的后台服务的时候，就可以把 中保存的数据取出来携带在请求中（可以放在 中，也可以放在 body 中，根据自己的需求），传递给后台服务，后台代码拿到后检查是否存在，如果存在则确认有效，继续执行后续代码，否则处理错误。

这是一个需要验证的后台服务的例子，我的是传入的，所以这个例子中是从请求中获取的：

router.get('/wx/products/list', function (req, res, next) { let sessionid = req.header("sessionid") let sessionVal = redisStore.get(sessionid) if (sessionVal) { // 执行其他业务代码 } else { // 执行错误处理 } })

好了，以上就是通过微信账号登录小程序并维护状态的简单流程，理解了这些知识点之后，后续在此基础上的开发就会变得更加简单。

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

服务器端库 -

小程序库--

总结

以上就是本文的全部内容了，希望本文的内容能对大家的学习或者工作带来一些帮助，如果还有疑问可以留言交流，感谢大家对脚本之家的支持。