简单了解小程序+node梳理登陆流程


Posted in Javascript onJune 24, 2019

希望通过小程序+node来整体的了解下小程序登陆的流程。如有不对欢迎在评论区指出

1. client: wx.login()

wx.login({
success: ([code]) => {
// 发送 code 到后台换取 openId, sessionKey, unionId
}
})

2. service: request()

服务端请求,需要的参数(js_code:client传的code;appid:小程序唯一标识申请账号时拿到;secret:小程序密钥申请账号时拿到;grant_type:默认值为 authorization_code)

// 请求方法
const request = require('request')
const url = https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
module.exports = {
async getSession(code) {
return new Promise((resolve, reject) => {
request(url,{
method: 'GET',
json: true
},
(error, res, body) => {
if (error) {
reject(error)
} else {
if (body.errcode) {
reject(new Error(body.errmsg))
} else {
resolve(body)
}
}
}
)
})
}
}

3.service:加密解密处理

const crypto = require('crypto')
const secret = '2019_06'
const algorithm = 'aes-256-cbc'
function encode(id) {
const encoder = crypto.createCipher(algorithm, secret)
const str = [id, Date.now(), '2019'].join('|')
let encrypted = encoder.update(str, 'utf8', 'hex')
encrypted += encoder.final('hex')
return encrypted
}
function decode(str) {
const decoder = crypto.createDecipher(algorithm, secret)
let decoded = decoder.update(str, 'hex', 'utf8')
decoded += decoder.final('utf8')
const arr = decoded.split('|')
return {
id: arr[0],
timespan: parseInt(arr[1])
}
}
module.exports = {
encode,
decode
}

4.service:返回登陆态

const { encode } = require('./lib/crypto')
const jsonMine = 'application/json'
const now = Date.now()
function handle(ctx, data, code = 0, message = 'success') {
ctx.type = jsonMine
ctx.body = {
code,
data,
message
}
}
router.get('/login', async (ctx, next) => {
const { code } = ctx.request.query
const session = await login(code)
if (session) {
const { session_key, openid } = session
// 查找数据库中是否已经存有openid,如果 hasOpenid 为null说明是新用户
const hasOpenid = await User.findByPk(openid)
if(!hasOpenid){
// 数据库存储openid,时间戳
User.create({openid,timespan:Date.now()})
}
handle(ctx, { token: encode(openid) })
} else {
throw new Error('登陆失败')
}
})

5.client:存储登陆态在storage

import { LOGIN_TOKEN } from '../../utils/localStorage'
// 拿到token存储到客户端
wx.setStorageSync(LOGIN_TOKEN, token)

我在发起请求时将登陆态放在请求头中,相应的服务端可以从请求头中获取

header: {
'x-session': wx.getStorageSync(LOGIN_TOKEN)
},

6.service:校验登陆态

module.exports = async function(ctx, next) {
const sessionKey = ctx.get('x-session')
const { id, timespan } = decode(sessionKey)
// 查找数据库中是否存在该 openid,返回是一个数组,如果不存在则返回[]
const targetList = await getOpenid(id)
if (targetList.length > 0) {
// 如果超过设定的过期时间,标记isExpired字段为登陆过期
const oneHour = 1000 * 60 * 60 * 24
if (Date.now() - timespan > oneHour) {
ctx.state.isExpired = true
// 跟前台约定,如果code=2说明登陆过期跳登陆页面
handle(ctx, '', 2, '登陆过期')
} else {
handle(ctx, '', 0, '登陆成功')
}
} else {
// 通过ctx.throw可以直接抛出错误
ctx.throw(401, '登陆失败')
}

整体流程图

简单了解小程序+node梳理登陆流程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,

Javascript 相关文章推荐
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
jQuery表单验证功能实例
Aug 28 Javascript
javascript正则表达式总结
Feb 29 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
移动端手指操控左右滑动的菜单
Sep 08 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
vue基础知识--axios合并请求和slot
Jun 04 Javascript
JS数组扁平化(flat)方法总结详解
Jun 24 #Javascript
深入了解query和params的使用区别
Jun 24 #Javascript
如何使用JavaScript实现栈与队列
Jun 24 #Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 #Javascript
一次让你了解全部JavaScript的作用域
Jun 24 #Javascript
通过循环优化 JavaScript 程序
Jun 24 #Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 #Javascript
You might like
PHP 网页过期时间的控制代码
2009/06/29 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
理解Javascript的call、apply
2015/12/16 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
Python文件去除注释的方法
2015/05/25 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python中os包的用法
2020/06/01 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
介绍一下RMI的基本概念
2016/12/17 面试题
管理学院毕业生自荐信范文
2014/03/10 职场文书
协会周年庆活动方案
2014/08/26 职场文书
五年级学生评语大全
2014/12/26 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
高二数学教学反思
2016/02/18 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python