非常简单 (大飞附体)
-
首先贴出官方流程图
微信小程序登录.png
说明：
1,小程序调用wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
2,开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。
之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。
- 所以第一步就是在前端用微信的登录请求获取code,小程序的代码要在微信开发者工具里面写
wx.login({
success:function(res){
wx.request({
url: 'http://localhost/miniAppLogin',
method: 'POST',
header: header,
data: { 'code': res.code},
success: function (res) {
console.log('登陆成功')
}
})
}
}
这样就获取到了code并且发了一个/miniAppLogin的请求去我们的服务器
在服务器中拿code去获取openId,这里发Https请求 , 可以网上下载工具类 : Https请求工具类
https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
请求结果转换为json对象,可以用fastJson里面的JSON.parseObject()方法
接着json.get("openId")就可以拿到用户的openId做下一步操作了
如果你不仅要openId,还想要获取用户的头像 昵称 unionId等其他资料信息的话 , 就需要用到wx.getUserInfo接口了
- 前端代码这里得修改一下,差不多是这个样子
wx.login({
success:function(res){
wx.getUserInfo({
success:function(data){
wx.request({
url: 'http://localhost/miniAppLogin',
method: 'POST',
header: header,
data: { 'encryptedData': data.encryptedData, 'iv': data.iv, 'code': res.code },
success: function (res) {
console.log(res)
var prepay_id = res.data.data.prepay_id;
that.sign(prepay_id);
}
})
}
})
}
})
语法可能有点不太对,前端大佬见谅
- 接着后台就拿到了你发来的code,encryptedData和iv , 明确一下,我们的目的是取到encryptedData中的加密数据
- 首先第一步还是跟前面一样,通过code获取到openId和session_key, 但是这块我们只需要session_key,直接用AESUtil去解密,网上有工具AES工具类
为了表示认真程度,还是贴一句代码吧
AESUtil.decrypt(encryptedData, session_key, iv, "UTF-8");
- 同样把结果转成JSON对象
之后就可以从对象里取你想要的值啦
比如
String unionId = resultJson.getString("unionId");
String username = resultJson.getString("nickName")
OK,需要注意的一点是,小程序没有web中session的概念, 每次请求都会生成新的session,如果你非要用session存取数据的话,那就得记录对应的sessionId,所以前后端连接需要自定义token(token只是一个概念,新手不用太纠结这个单词)
在这里个人认为最简单的办法就是用redis存一个token返回给前端,前端保存在缓存里,然后每次请求时放进请求头 , 后台加一个拦截器,检查一下请求头里的token,如果在redis里有记录 就放行
