微信小程序登录学习
时间: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
小程序端:
- WP Settings Generator:生成WordPress设置相关代码的工具
- Reactjs 入门基础(三)
- 小谈中文环境下中文排版的font-family 字体选择
- WordPress 的几个高级调试( Debug)技巧
- Customizer Library:主题“自定义”功能的WordPress类库
- Reactjs 入门基础(二)
- WordPress中当评论审核通过时候给评论者发邮件
- Reactjs 入门基础(一)
- Option Framework 框架的三个自定义技巧
- 记录一个在Mac OS X 中本地安装Ghost 的报错问题
- 盘点:2017年发生在上海的科技大新闻 与我们的生活如何密切相关
- 滚雷进口车获5亿元投资 品牌双拼给力十足
- Github 与 Bitbucket 的互助协作
- JavaScript 基础(七) 箭头函数 generator Date JSON
- 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 数组属性和方法
- python时间日期格式化和反格式化
- 无锁编程 - Double-checked Locking
- Java_环境搭建、变量的使用
- golang string和[]byte的对比
- PHP中使用Redis长连接笔记
- 从外部设置传入Go变量
- 图解elasticsearch的_source、_all、store和index
- Stream API
- Lambda表达式
- ES的Query、Filter、Metric、Bucketing使用详解
- Golang的单引号、双引号与反引号
- CentOS配置docker和docker-compose
- 给Linux增加swap内存
- 网鼎杯2018-Fakebook
- 强网杯2019-高明的黑客