微信小程序登录学习
时间:2022-07-23
本文章向大家介绍微信小程序登录学习,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
简单走一遍流程,主要学习怎么加密解密那一套 实战项目: https://github.com/klren0312/ironInfoWeapp/blob/master/ApiServer/app/controller/weapp.js
使用技术
- 服务端:egg.js 2.x
- 客户端:微信小程序
参考资料
- 小程序登录文档:https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html
- 小程序签名加密文档:https://developers.weixin.qq.com/miniprogram/dev/api/signature.html
- 手把手教会你小程序登录鉴权:https://juejin.im/post/5ac9b72cf265da23906c486a
流程想法
2018.4.18 想法
image.png
小程序端
页面加载时检测session,若失效则重新登录,并将获取的skey存入localStorage
login.wxml
<button bindtap='login'>login</button>
login.js
Page({
onLoad: function (options) {
wx.checkSession({
success: function (v) {
console.log(v)
},
fail: function (v) {
console.log(v)
this.login()
}.bind(this)
})
},
login: function() {
wx.login({
success: (loginRes) => {
wx.getUserInfo({
success: function (rawData) {
let { encryptedData, iv, signature } = rawData;
wx.request({
url: 'http://localhost:7001/weapp',
method: 'POST',
data: {
'crypted': encryptedData,
'iv': iv,
'signature': signature,
'code': loginRes.code
},
success: (res) => {
wx.setStorage({
key: 'skey',
data: res.data.skey,
})
}
})
}
})
}
})
}
})
开发者服务端
通过code获取session_key 通过小程序的wx.login()获取到的code,来请求微信官方登录接口,获取到session_key
async getSessionKey(code) {
let appid = 'wxefe389c79a8fec0f';
let secret = '1d72d78208549bbe21bf4d9a40736f7e';
let grant_type = 'authorization_code';
let wecode = code;
// 登录接口地址
let url = `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${secret}&js_code=${wecode}&grant_type=${grant_type}`;
// 请求登录接口
const result = await this.app.curl(url,{
dataType:'json'
});
return result.data.session_key;
}
解密函数 使用小程序发送过来的iv和获取到的session_key来解密加密的数据encryptedData
function decodeUserInfo(key,iv,crypted) {
crypted = new Buffer(crypted, 'base64')
key = new Buffer(key, 'base64')
iv = new Buffer(iv, 'base64')
const decipher = crypto.createDecipheriv('aes-128-cbc', key, iv)
let decoded = decipher.update(crypted, 'base64', 'utf8')
decoded += decipher.final('utf8')
return decoded
}
加密session_key函数 还需要将session_key加密后发送给客户端留存,原理就相当于一个token,用来请求开发者服务端的相关数据。
function encryptSha1(data) {
return crypto.createHash('sha1').update(data,'utf8').digest('hex');
}
登录函数 将上面几个方法串起来,暂时没写存数据库的逻辑
async login() {
let {ctx} = this;
let {crypted,iv,signature,code} = ctx.request.body;
let key = await this.getSessionKey(code);
// 加密session_key 传给客户端
let skey = encryptSha1(key)
// 解密用户信息,可以将其存入数据库
let decode = JSON.parse(decodeUserInfo(key,iv,crypted))
ctx.body = {
skey: skey
}
}
解密后的用户信息
小程序端存入localStorage的skey
代码地址
服务端:
- https://github.com/klren0312/weapp_login_study/blob/master/app/controller/weapp.js
- https://github.com/klren0312/weapp_login_study/blob/master/app/router.js
小程序端:
- 都在说微服务,那么微服务的反模式和陷阱是什么(二)
- Spring Boot 2.0 - WebFlux framework
- Spring Cloud构建微服务架构:服务网关(路由配置)【Dalston版】
- SpringCloud实战小贴士:Zuul的路径匹配
- 程序员你为什么这么累【续】:编码习惯之参数校验和国际化规范
- 程序员你为什么这么累【续】:编码习惯-函数编写建议
- 那些年,我们一起碰到过的骗局
- Spring Security (五) 动手实现一个IP_Login
- 史上最全Linux提权后获取敏感信息方法
- Spring Security (四) 核心过滤器源码分析
- Spring Security (三) 核心配置解读
- Spring Cloud配置中心获取不到最新配置信息的问题
- 总是听别人说响应式布局,原来这么简单
- Spring Cloud Zuul重试机制探秘
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法