小程序一个比较重要的能力就是获取用户信息,是使用 wx.getUserInfo 接口。我们发现几乎所有的小程序都会调用这个接口。
实现思路:
- 通过wx.login获取code,把code传给后台,后台再去访问微信接口获取到用户的openID和sessionKey,但是后台不能直接把openID或者sessionKey发给前台(不安全),而是需要用一个单独的字段与openID和sessionKey做关联后传给前台,作为前台登录成功的标识,就相当于cookie在本地浏览器存储的session一样,前台接收到返回的标识存储在本地,也可以自己设置存储的变量名(假如是userId)
- 前端通过button按钮触发 getPhoneNumber事件,用户允许授权后(e.detail.errMsg == ‘getPhoneNumber:ok’)获取encryptedData,iv
- 把【encryptedData】 、【iv】 、【userId】 通过request请求传给后台,后台接收到解密获取用户手机号,返回给前台,前台再存储在本地,以便做其他逻辑判断或者后期使用
我这里的代码是uni-app项目的代码,代码跟微信小程序代码一样,只不过前缀不同,我的是uni.
,小伙伴在写微信小程序的需要复制我的代码测试时候记得把前缀换成wx.
,
<button class='bottom' type='primary' open-type="getUserInfo" @getuserinfo="wxGetUserInfo">授权登录</button>
点击授权,弹出选择框。点击允许成功获取用户信息之后会跳转到项目首页。
//获取用户信息
wxGetUserInfo() {
uni.login({
success: res => {
var code = res.code;
console.log(code);
uni.getUserInfo({
success: res => {
console.log(res);
uni.request({
url: 'https://exam.qhynice.top/index.php/Api/Login/getsessionkey',
method: 'POST',
data: {
code: code
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: ress => {
console.log(ress.data);
// 通过微信自带code,向后台获取openID、session_key
uni.setStorageSync('openid', ress.data.openid);
uni.setStorageSync('session_key', ress.data.session_key);
//通过上个获取的openID,再进行获取用户id和用户的其他信息
uni.request({
url: 'https://exam.qhynice.top/index.php/Api/Login/authlogin',
method: 'POST',
data: {
openid: uni.getStorageSync('openid'),
NickName: res.userInfo.nickName,
HeadUrl: res.userInfo.avatarUrl,
gender: res.userInfo.gender
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: res => {
// 获取用户ID
var id = res.data.arr.ID;
uni.setStorageSync('id', id);
uni.switchTab({
url: '../index/index'
});
}
});
}
});
}
});
}
});
}