简单了解小程序+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刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
javascript实用方法总结
Feb 06 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
代码整洁之道(重构)
Oct 25 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绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP小教程之实现链表
2014/06/09 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
php实现微信公众号无限群发
2015/10/11 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
php post换行的方法
2020/02/03 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
int在python中的含义以及用法
2019/06/27 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
python中必要的名词解释
2019/11/20 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
sort命令的作用和用法
2013/08/25 面试题
行政管理人员精品工作推荐信
2013/11/04 职场文书
幼儿园门卫制度
2014/01/29 职场文书
五好家庭申报材料
2014/12/20 职场文书
后进生评语大全
2015/01/04 职场文书
项目战略合作意向书
2015/05/08 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
vue的项目如何打包上线
2022/04/13 Vue.js