小程序微信登录前后端流程

参见小程序文档小程序文档
注:代码示例为node.js
首先通过小程序前端wx.login获取临时登录凭证code并传回开发者服务器

wx.login({
  success: function (res) {
        if (res.code) {
          // 得到code发送到服务端
        }
      }
    })

服务端通过小程序服务端接口auth.code2Session完成登录流程
请求地址GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

const url = "https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=前端&grant_type=authorization_code"
...
const result = await axios.get(url)   // 可得到用户的openid

服务端在拿到用户的openid之后需要为用户建立一份档案,即要把用户相关的信息写到数据库中,同时需要为用户生成一个编号,即我们自己的uid(数据插入到数据库时的主键id),此时我们先通过openid向数据库执行查询操作,若数据库中已经存在该用户则执行登录操作,若该用户不存在就执行注册操作,即将该用户的openid插入到数据库的用户表中。openid可以用来作为uid,但是并不建议,因为openid比较长,用来作为主键查询的时候效率比较低,而且openid作为比较机密的数据在前后端传递是不安全的。

登录成功后向前端返回一个JWT令牌,关于JWT令牌请移步JWT令牌

// 生成JWT令牌
const jwt = require('jsonwebtoken')
/**
 * @param {int} uid        用户id(用户表中的主键id)
 */
const generateToken = function (uid) {
    const secretKey = global.config.security.secretKey
    const expiresIn = global.config.security.expiresIn
    const token = jwt.sign({
        uid
    }, secretKey, {
        expiresIn
    })
    return token
}

前端获取token

wx.login({
  success: function (res) {
        if (res.code) {
           wx.request({
            url: 'http://localhost:3000/token',
            method: 'POST',
            data: {
              code: res.code,
            },
            success: (res) => {
              const code = res.statusCode.toString()
              if (code.startsWith('2')) {
                wx.setStorageSync('token', res.data.token)
                console.log(res.data.token)
              }
            }
          })
        }
      }
    })

小程序前端拿到token之后,将token存储在本地,在每次向服务器发送请求的时候,如果该接口需要用户权限,则需要在header(注:并非只能在header中)中携带该token

服务端在接收到前端的请求后需要对token进行有效性验证,包括token是否合法以及token是否过期。

你可能感兴趣的:(小程序微信登录前后端流程)