简单了解小程序+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 相关文章推荐
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
node.js中的buffer.length方法使用说明
Dec 14 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
Vue中自定义全局组件的实现方法
Dec 08 Javascript
iview table高度动态设置方法
Mar 14 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
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简单截取字符串代码示例
2016/10/19 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
express 项目分层实践详解
2018/12/10 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
Python文件的读写和异常代码示例
2017/10/31 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
python实现在一个画布上画多个子图
2020/01/19 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
Yahoo-PHP面试题2
2014/12/06 面试题
J2EE包括哪些技术
2016/11/25 面试题
驾驶员安全责任书范本
2014/07/24 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS