既上一次小程序授权后的 呢 现在讲讲 授权后需要给后端传什么信息!
先上一张图 了解一下授权登陆流程
撸一撸授权登陆流程
首先是需要授权 授权之后呢 调用 wx.login() api 获取code 加上 授权后拿到的 encryptedData and iv 需要传给接口 后端拿到这些数据之后呢 需要调用微信官方给的的接口:
https://api.weixin.qq.com/sns/jscode2session?appid='+appId+'&secret='+secret+'&js_code='+code+'&grant_type=authorization_code'
首先说明这三个参数是干吗的
appId : 小程序的AppID
secret:小程序密钥AppSecret
code: 这个code就是 wx.login() api 返回的code(很重要)
一下是前端授权代码
GotUserInfo:function(e) {
let{encryptedData,iv,rawData,signature} =e.detail;
if(iv) {
wx.showLoading({
title:'正在授权!',
mask:true,
})
this.loginHandle({
encryptedData:encryptedData,
iv:iv
});
}else{
wx.showToast({
icon:'none',
title:'您拒绝了授权!',
})
}
},
loginHandle(detail) {
wx.login({
success:(res)=>{
if(res.code) {
wx.request({//发起网络请求
url:URL,
method:'post',
data:{
code:res.code,
...detail,
},
success(res) {
wx.hideLoading();
wx.showToast({
image:'../../static/success2.png',
title:'授权成功',
})
setTimeout(()=>{
wx.navigateTo({
url:‘targetPage’,
})
},100)
}else{
wx.showToast({
icon:'none',
title:'授权失败!请重试',
})
}
},
})
}else{
console.log('登录失败!'+res.errMsg)
}
},
})
},
前端代码看明白再搂一眼服务端代码?
functionfun(req,res){
request({
url:'https://api.weixin.qq.com/sns/jscode2session?appid='+appId+'&secret='+secret+'&js_code='+code+'&grant_type=authorization_code',
type:'post',
success(data) {
if(!data.openid) {
res.send({
code:1000,
msg:"error",
data:'解密失败'
});
return;
}else{
try{
varsessionKey=data.session_key;
varpc=newWXBizDataCrypt(appId,sessionKey)
varresult=pc.decryptData(encryptedData,iv);
if(result.nickName) {
querySqlSelect(result,function(info){
res.send({
code:info.code,
msg:info.msg,
data:info.data,
});
});
}else{
res.send({
code:1001,
msg:"error",
data:'登陆失败',
});
}
}catch(error){
res.send({
code:1002,
msg:"error",
data:'登陆失败',
});
先捋一下 代码
首先要获取到 code 以及 appId && secret (后面这两个是写死的)
然后请求接口 获取session_key (用于解析 encryptedData 获取openid / unionId)
解析成功之后把 openid / unionId 存起来 再给客户端返回一个登陆状态
解析后的结构:
// data = {
// "nickName": "Band", 昵称
// "gender": 1, 性别
// "language": "zh_CN", 语言
// "city": "Guangzhou", 城市
// "province": "Guangdong", 省市
// "country": "CN", 国家
// "avatarUrl":"头像",
// "unionId": "ocMvos6NjeKLIBqg5Mr9QjxrP1FA", // id
// "watermark": {
// "timestamp": 1477314187,
// "appid": "wx4f4bc4dec97d474b"
// }
// }
在上面 有一个方法 WXBizDataCrypt 这个就是 解密openid 的 解密 方法!(官方推荐的哦)
还有一个坑 就是 请求session_key 的接口 必须是get 地址栏传参 不知道是 request 这个包的锅还是 接口得锅 ,这个需要注意!
这就是 前端 以及服务端的小程序登陆 的一套代码就大概这些! 需要绑定手机号的登陆会比这逻辑还要复杂一些
领取专属 10元无门槛券
私享最新 技术干货