简单了解小程序+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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
Aug 23 Javascript
Js sort排序使用方法
Oct 17 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
vue 获取视频时长的实例代码
Aug 20 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实现简单爬虫的方法
2015/07/29 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP7新功能总结
2019/04/14 PHP
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
Python中对列表排序实例
2015/01/04 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
Python发展简史 Python来历
2019/05/14 Python
python3 反射的四种基本方法解析
2019/08/26 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
Python包和模块的分发详细介绍
2020/06/19 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
init进程的作用
2012/04/12 面试题
文明倡议书范文
2014/04/15 职场文书
小摄影师教学反思
2014/04/27 职场文书
党员进社区活动总结
2015/05/07 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
MySQL数据库简介与基本操作
2022/05/30 MySQL