简单了解小程序+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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
淘宝搜索框效果实现分析
Mar 05 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
javascript string字符串优化问题
Jul 31 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
终于实现了!精彩的jquery弹幕效果
2016/07/18 Javascript
jsTree使用记录实例
2016/12/01 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
哈弗商学院毕业生求职信
2014/02/26 职场文书
建筑结构施工求职信
2014/07/11 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python