一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。
微信小程序-用户登录案例
案例目的
(一)掌握微信用户登录流程。
(二)掌握微信小程序中数据缓存。
(三)掌握微信小程序中wx.login()API和wx.getUserInfo()API的使用。
实验内容
(1)掌握用户登录流程序需要小程序、开发者服务器和微信接口服务3个角色参与，它们的作用分别是：
小程序：用户使用的客户端，由于小程序运行在微信之上，可以通过API获取用户的身份信息。
开发者服务器：小程序的对应的后端服务器，用于为小程序用户提供服务。
微信接口服务：微信为开发者服务器提供的接口。****
(2掌握用户登录的具体流程。
a)小程序获取code：小程序通过wx.logi()获取登录凭证code，它由内部生成，每次调用wx.login()获取的code都不同，code的有效期为5分钟，且被微信接口服务验证一次后失效。
b)小程序将code发送给开发者服务器：使用wx.request()将code发送给开发者服务器。
c)开发者服务器通过微信接口服务校验登录凭证：开发者服务器将Appid(小程序唯一表示)和AppSecret(小程序的秘钥)（对于微信接口服务而言，相当于小程序账号和密码）以及code发送给微信接口服务校验登录凭证，如果校验成功，返回session_key(用户的会话秘钥)和openid(用户的唯一标识)，同一个微信用户在不同Appid小程序中的openid是不同的。
d)开发者服务器自定义登录状态：开发者服务器将sesson_key和openid保存，生成一个自定义登录状态的token(令牌)相应给小程序，通过token可以查询到服务器中存储的sesson_key和openid，小程序下次请求时只要携带token,就可以证明用户已经登录。
下面通过开发一个“用户登录”的案例来掌握用户登录流程和小程序数据缓存以及相关API的使用。
步骤1：新建一个微信小程序项目，对项目文件中不需要的文件和代码进行删除。
步骤2：搭建开发者服务器
①下载Node.js(nodejs.org)，选择长期支持版下载。
②安装Node.js，双击下载的安装包安装即可，安装选项全部使用默认值。
③在小程序项目所在文件夹的在路径下创建一个空文件夹(例如form-server)来存放小程序项目对应的服务器端文件。
④在服务器端文件所在文件夹(例如form-server)下进入DOS命令界面。
⑤初始化服务器端项目，将会自动创建package.json配置文件。 npm init -y
⑥安装Express框架，用于快速搭建HTTP服务器。 npm install express --save
⑦安装request模块。npm install request --save
⑧安装nodemon监控代码修改。 npm install nodemon -g
在服务器端文件所在文件夹(例如form-server)中创建index.js文件，利用sublime、Vscode或Notepad++等软件编写简单的服务器端代码如下。
const express=require('express') //加载express模块
const request= require('request') //加载request模块
const bodyParser=require('body-parser') //加载bodyParser模块用来解析客户端发过来的实体信息
const app=express() //创建express实例，保存在app中
app.use(bodyParser.json()) //将bodyParser解析模块加入到app中，采用json格式，
//因为微信小程序提交给服务器的信息采用json格式
const wx = {
appid: '', //填写自己的appID
secret: '' //填写自己的AppSecret
}
var db = {//模拟数据库
session: {},//保存openid和sesson_key
user: {}
}
//处理post请求
app.post('/login', (req, res) => { //接收post请求，第一个参数为请求路径，第二个参数为回调函数 // 注意：小程序端的appid必须使用真实账号，如果使用测试账号，会出现login code错误
console.log('login code: ' + req.body.code)
var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + wx.appid + '&secret=' + wx.secret + '&js_code=' + req.body.code + '&grant_type=authorization_code'
request(url, (err, response, body) => {
console.log('session: ' + body) //body里面存放sesson_key和openid
var session = JSON.parse(body) //转换为JSON格式
if(session.openid) {
var token = 'token_' + new Date().getTime()
db.session[token] = session //将sesson_key和openid存到数据库
// **保存用户记录，相当于服务器注册了一个新用户并设置初始积分为** **100**
if(!db.user[session.openid]) {
db.user[session.openid] = {
credit: 100
}
}
}
res.json({
token: token //将生成的token相应给小程序
})
})
})
//监听3000端口
app.listen(3000,()=>{
console.log('server running at http://127.0.0.1:3000')
})
①启动服务器。nodemon index.js
上述命令执行后，如果看到server running at http://127.0.0.1:3000 表示启动成功。
步骤3： 在项目的app.js文件中编写代码，实现小程序启动时自动执行登录操作。这里用到了wx.login()API 和在小程序数据缓存中进行存储数据的**wx.setStorage()**方法。
onLaunch: function () {
this.login()
}) ,
login: function () {
wx.login({
success: res => {
console.log('login code: ' + res.code)
wx.request({
url: 'http://127.0.0.1:3000/login',
method: 'post',
data: { code: res.code },
success: res => {
console.log('token: ' + res.data.token)
// 将token保存为公共数据（用于在多页面中访问）
this.globalData.token = res.data.token
// 将token保存到数据缓存（下次打开小程序无需重新获取token）
wx.setStorage({ key: 'token', data: res.data.token })
}
})
}
})
} ,
globalData: {
token: null // 保存token
}
运行小程序，在小程序控制台中可以看到code和token。如图所示
在服务器的控制台中，可以看到login code和session的值，如图所示
在图中可以看到用户的openid已经获取，说明用户登录凭证验证成功。在图中可以看到token的值，说明小程序收到服务器返回的token(令牌)。
步骤4：测试小程序通过token 获取服务器上的用户信息，在服务器端的index.js文件中的app.listen()方法前面添加如下代码，根据token获取用户积分。
app.get('/credit', (req, res) => {
console.log(req.query.token)
var session = db.session[req.query.token]
if(session && db.user[session.openid]) {
res.json({
credit: db.user[session.openid].credit
})
}
else {
res.json({
err: '用户不存在，或未登录。'
})
}
})
步骤5：在项目的pages/index/index.wxml文件中编写“获取积分按钮”，代码如下：
<button bindtap="credit">获取用户的积分</button>
步骤6：在项目的pages/index/index.js文件中编写credit()函数。
const app=getApp()
credit: function () {
wx.request({
url: 'http://127.0.0.1:3000/credit',
data: { token: app.globalData.token },
success: res => {
console.log(res.data)
}
})
}
保存上述代码，运行小程序单击“获取用户积分”按钮，可以在控制台中看到服务器返回的用户积分。
步骤7：检查用户是否已经登录，即小程序成功登录后将服务器返回的token保存在数据缓存了，下次启动小程序，可以判断数据缓存中是否存在token，如果存在，直接取出token即可，不需要在执行登录操作。需要注意token有可能会过期，需要重新登录，需要从缓存中取出token后，先验证是都过期，再使用token。
(1)在服务器的index.js文字中的app.listen()方法前面添加代码，用于为小程序提供接口检查token是否有效。
app.get('/checklogin', (req, res) => {
var session = db.session[req.query.token]
console.log('checklogin: ', session)
// 将用户是否已经登录的布尔值返回给客户端
res.json({
is_login: session !== undefined //根据token取出的sesson是否为undefined，如果是说明token过期，否则有效
})
})
(2)在项目的app.js文件中编写checkLogin()函数，用于判断token是否存在，如果存在token，ze请求服务器判断是否有效。这里用到了从小程序的数据缓存中取数据的 wx.getStorageSync() 方法。
checkLogin: function (callback) {
var token = this.globalData.token
if (!token) {
// 从数据缓存中获取token
token = wx.getStorageSync('token')
if (token) {
this.globalData.token = token
} else {
callback({ is_login: false })
return
}
}
wx.request({
url: 'http://127.0.0.1:3000/checklogin',
data: { token: token },
success: res => {
callback({ is_login: res.data.is_login })
}
})
}
(3)修改项目app.js中的onLaunch()函数的代码，用于小程序启动后检查是否已经登录，如果没有登录则执行登录操作。
this.checkLogin(res => {
console.log('is_login: ', res.is_login)
if (!res.is_login) {
this.login()
}
})
保存代码，运行小程序，在数据缓存中已经保存token，且token有效的情况下，会在小程序控制台显示is_login:true。
尾言
这是微信小程序的用户登录的前半部分，如果觉得还不错的话，欢迎点赞收藏哦。
