前言
开发一个微信小程序项目,首要问题就是用户的登录授权流程问题,结合今年9月份小程序实施的新的审查来说。首次登录微信小程序的用户,如果要获取用户的个人信息,需要用户点击button来做授权登录,授权登录成功之后,就可以获取用户的一些基本信息,再紧接着跟后台进行交互获取用户的openID、unionid、token等为以后接口交互打下基础。用户首次授权成功后,再次进入小程序可以在小程序的app.js走自动授权流程。
需求和代码
用户进入页面后,在需要授权的地方写button
<button class="goUserInfo" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
用户需求是不想再做弹窗提醒授权,所以button按钮无法安放,所以我把它做成透明按钮遮挡在页面上,用户如果没有授权则button按钮存在,点击页面任意位置,拉起小程序授权弹窗,如果用户已授权则去掉button。
//授权个人信息
bindGetUserInfo(res) {
if (res.detail.userInfo) {
wx.showLoading({
title: '加载中...',
mask: true,
});
//用户同意授权
app.globalData.userInfo = res.detail.userInfo;
//第一步手动授权登录
wx.login({
success: ress => {
//第二步获取openid和uid
wx.request({
url: '', //请求地址
data: {
code: ress.code,
...
//请求数据
},
method: 'POST',
dataType: 'json',
responseType: 'text',
success: ({
data
}) => {
//对获得的信息进行存取
app.globalData.openId = data.data.openid
wx.setStorageSync('openId', data.data.openid)
app.globalData.unionid = data.data.unionid
//第三步根据需求继续获取用户相应的信息
this.getUser(参数)
},
});
},
});
} else {
wx.showToast({
title: '您拒绝了授权',
icon: 'none',
duration: 2000
});
}
},
自动授权流程app.js
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
let code = res.code;
this.globalData.code = code;
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
//本地存储方法结合页面透明button按钮的显现
wx.setStorageSync(参数, false);
// 已经授权,可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
wx.request({
url: '',
data: {
code,
...
//传送相应的信息
},
method: 'POST',
dataType: 'json',
responseType: 'text',
success: ({
data
}) => {
this.globalData.openId = data.data.openid
wx.setStorageSync('openId', data.data.openid)
this.globalData.unionid = data.data.unionid
//第三步继续获取用户的相应信息
this.getUser(参数)
},
fail: err => {
console.log('微信 request 接口报错', err);
}
});
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res);
}
},
fail: err => {
console.log('微信 getUserInfo 接口报错', err)
}
})
} else {
//结合透明button的显现
wx.setStorageSync(参数, true);
}
},
fail: err => {
console.log('微信 getSetting 接口报错', err)
}
})
},
fail: err => {
console.log('微信 login 接口报错', err);
}
})