简单了解小程序+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 白痴级入门教程
Nov 11 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
PHP中的extract的作用分析
2008/04/09 PHP
php中定义网站根目录的常用方法
2010/08/08 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
大专生的学习自我评价
2013/12/04 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
中学教师请假制度
2014/02/03 职场文书
新学期开学演讲稿
2014/05/24 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
中班下学期个人总结
2015/02/12 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
js中Object.create实例用法详解
2021/10/05 Javascript
Python+pyaudio实现音频控制示例详解
2022/07/23 Python