作者:Duzling
链接:https://www.jianshu.com/p/205a244b4c1f
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
登录及获取微信用户信息
调用wx.login()获取登录凭证code,再调用后端接口换取用户登录态信息(openid, session_key)
此时获得的登录状态具有时效性,可以调用wx.checkSession()检查是否过期,若过期,则需要重新调用wx.login()执行登录流程
使用wx.getSetting()获取用户授权列表
若已授权:调用wx.getUserInfo()获取用户信息
若未授权:弹出模态框展示一个 微信授权登录 按钮提示用户点击登录
同意授权:用户授权后可通过绑定的方法获取用户信息
拒绝授权:则无法获取用户信息,若必须微信授权登录才可用,可以以恰当的方式给出说明,如使用wx.openSetting()引导用户手动打开授权开关
将获取到的用户信息和第1部中得到的code使用服务端提供的接口更新用户信息,如1中的示例
授权绑定微信手机号
显示授权绑定微信手机号的按钮(必须用户手动点击)
用户同意授权后,调用成功回调处理后续操作
相应接口代码示例
用户授权列表:wx.getSetting()
wx.getSetting({
success (res) {
console.log(res.authSetting)
// res.authSetting = {
// "scope.userInfo": true, // true已授权 false未授权
// "scope.userLocation": true
// ...
// }
}
})
检查登录态是否过期
wx.checkSession({
success () {
//session_key 未过期,并且在本生命周期一直有效
},
fail () {
// session_key 已经失效,需要重新执行登录流程
wx.login() //重新登录
}
})
调用wx.login()进行登录并获取cookies
wx.login({
success: function(res) {
// 得到了code
if (res.code) {
wx.request({
url: api.user.authLogin(res.code) // 后端提供的验证登录接口
success: function(response) {
// 验证成功,保存cookies, 封装在全局统一的请求方法中,如get, post
wx.setStorage({
key: 'cookies',
data: response.data.res.cookies
})
wx.getUserInfo({
withCredentials: true,
success: function(res) {
// 取得用户微信信息,调用后端接口更新用户信息
const userInfo = res.userInfo
const encryptedData = res.encryptedData
const iv = res.iv
const params = {
nick_name: userInfo.nickName,
gender: userInfo.gender,
province: userInfo.province,
city: userInfo.city,
country: userInfo.country,
avatar_url: userInfo.avatarUrl,
encrypted_data: encryptedData,
encrypt_iv: iv
}
server.get(api.user.updateBaseInfo(), params, () => {
// 成功保存用户信息
})
}
})
}
})
}
}
})
微信授权登录
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">微信登录</button>
methods = {
onGetUserInfo: this.handleGetUserInfo
}
// 同意授权
handleGetUserInfo(e) {
wx.getUserInfo()
}
授权获取微信绑定的手机号
<button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">
绑定微信手机号
</button>
methods = {
onGetPhoneNumber: this.handleGetPhoneNumber
}
/**
* 同意授权获取手机号
* @desc 获取到 encryptedData,iv信息,需要服务端解密才能获取到真正的手机号
*/
handleGetPhoneNumber(e) {
if (e.detail.iv) {
server.post(api.user.bindWXPhoneNumber(), {
encrypted_data: e.detail.encryptedData,
encrypt_iv: e.detail.iv
}, data => {
wx.showToast({ title: '绑定成功' })
// do something
}, error => {
wx.showModal({
title: '绑定失败',
content: '[服务端返回的错误信息]',
showCancel: false,
success: res => {
if (res.confirm) { // 用户确认后
// do something
}
}
})
})
} else { // 用户拒绝授权
// do something
}
}