既小程序授权后的 小程序登陆流程 以及后端node 解密用户openid

既上一次小程序授权后的 呢 现在讲讲 授权后需要给后端传什么信息!

先上一张图 了解一下授权登陆流程

撸一撸授权登陆流程

首先是需要授权 授权之后呢 调用 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 这个包的锅还是 接口得锅 ,这个需要注意!

这就是 前端 以及服务端的小程序登陆 的一套代码就大概这些! 需要绑定手机号的登陆会比这逻辑还要复杂一些

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180729G012QG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券