小程序登录wx.getUserInfo 与 wx.login方法
2020-04-01 本文已影响0人
AiLeimi
依稀记得小程序刚出来那会的轰动景象，回首再看，小程序现在已经发展到方方面面了，遍及生活，作为一个前端人员甚是欣慰！
废话不多说，直接上代码：
wxml：
<button id='login' open-type='getUserInfo' bindgetuserinfo="getUserInfo"></button>
js：
login: function (fn) {
var that = this;
wx.getUserInfo({//早先此方法可以直接调起用户授权弹窗，后来机制更改需要配合button open-type='getUserInfo'来调起授权
success: res => {
//拿到部分用户未加密数据
that.globalData.loginsatus = true;
var imgurl = encodeURIComponent(res.userInfo.avatarUrl),//传给后台，后台要求转码
iv = res.iv,//加密算法的初始向量
encryptedData = res.encryptedData;//完整用户信息的加密数据
res.userInfo.avatarUrl = imgurl;
that.globalData.userInfo = res.userInfo;//用户信息对象，不包含 openid 等敏感信息
wx.setStorageSync('userInfo', res.userInfo);
// 登录
wx.login({
success: res => {
if (res.code) {
//请求登陆接口
wx.request({
url: that.globalData.weachLoginApi,//调取后台解密登录接口
data: {
code: res.code,//获取到的用户登录凭证
encryptedData: encryptedData,//getUserInfo拿到的加密串
iv: iv,//加密算法的初始向量
user: JSON.stringify(that.globalData.userInfo),//用户信息对象，
softName: "duiduinongzhuang"//后台定义的登录小程序名
},
method: 'POST',
header: {
"Content-Type": 'application/x-www-form-urlencoded; charset=UTF-8'
},
success: function (res) {
//返回的用户数据 -- 具体怎么操作，看后台回传值
if (res.data.error_code== 0) {
wx.setStorageSync('loginsatus', true);
wx.setStorageSync('userData', res.data.user);
}
}
})
}
},
fail: res => {
}
})
},
fail: res => {
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，无法使用此功能。如想正常使用，请点授权按钮重新授权',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}
})
},
退格什么的自己IDE格式化一下，登录逻辑就是用户点击button按钮，调起授权，getUserInfo拿到用户加密数据，login获取用户登录码，然后发给后台解密，返回openid，token，userdata，unionid等其他关键用户数据，有的后台会让前端自己解密，就更恶心了，不过还好有nodejs方法，可以前端自行解密，但要考虑到前端数据暴露的风险！
具体解密方法在此：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html#method-decode
自己下载解压，然后找到nodejs的代码，直接es6方法引入，调用，但是需要调用小程序的appid和小程序的session_key，而这两个数据前者暴露风险不大，后者暴露风险极高！
所有开发小程序登录的前端同仁，尽量进行后台解密，要是后台NB的天老大，他老二，就是让你解密，那你就和直系领导汇报风险，API里写的风险很明确，领导同意前端解密，直接撸代码，不同意的话，让后台做老大[Smart][Smart][Smart]
