微信小程序授权登录需要按钮触发的解决方案
近期,微信官方修改了 getUserInfo、authorize等 接口,无法直接弹出授权窗口,这让我们以前一开始就获取用户信息完成登录的功能全部失效,新规定是第一次获取用户信息只能通过 button 去触发,那么有什么解决方案呢?
我的思路是一进入小程序的时候,立马去调用登录接口(wx.login,之前的代码不用变)并在回调中去调用获取用户信息接口(wx.getUserInfo),这时候就需要特别注意了,需要会wx.getUserInfo的获取失败钩子进行判断,如果失败,那么直接跳转去登录页面(登录页面中可以实现按钮登录);如果成功,继续后续逻辑代码。
具体代码如下(app.js):
const Request = require("/utils/request"); //引入封装的http拦截器
App({
onLaunch: function(options) {
this.authorize(options.query); // 直接授权登录(options.query 参数与分享配置有关,后续文章介绍)
},
authorize: function(share) {
let self = this;
share = share || {};
wx.login({
success: function(res) {
wx.getUserInfo({
success: function(resp) {
Request.post("/api/xcxWxLogin", {
code: res.code,
encryptedData: resp.encryptedData,
iv: resp.iv
}).then(({
data: response
}) => {
if (response.code !== 0) {
wx.showToast({
title: response.msg,
icon: "none"
});
} else {
// 保存sessionid ,每次请求都会在拦截器中自动添加到header中
wx.setStorageSync("UserSessionId", response.data.sessionId);
self.globalData.sessionid = response.data.sessionId;
//todo 后续逻辑代码
}
});
},
fail: function(err) {
//重点,如果获取失败直接跳转
let timer = setInterval(() => {
let pages = getCurrentPages();
if (pages.length > 0) {
clearInterval(timer);
let currentPage = pages[pages.length - 1];
if (currentPage.route === "pages/user/userbind/userbind") {
return true;
}
try {
wx.setStorageSync("SYS_PREVIOUSPAGE", currentPage);
setTimeout(() => {
wx.redirectTo({
url: "/pages/login/login"
});
}, 300);
} catch (e) {
wx.redirectTo({
url: "/pages/login/login"
});
}
}
}, 200);
}
});
}
});
}
})
获取用户信息成功的回调具体得看业务,获取失败的回调主要是加定时器去判断页面是否加载完成,加载完成后再保存当前页面路径(用于登录成功后跳转),最后跳转到一个带有登录按钮的页面(不在app.js中完成登录,而是在login.js中完成登录,第二次打开就静默授权了)
下面介绍登录页面的逻辑代码(login.js):
const Request = require("../../utils/request");
Page({
/**
* 页面的初始数据
*/
data: {
route: "/pages/home/home"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let self = this;
wx.getStorage({
key: "SYS_PREVIOUSPAGE",
success: function(res) {
if (res.errMsg === "getStorage:ok") {
self.setData({
route: "/" + res.data.route,
share: res.data.options
});
}
wx.removeStorage({
key: "SYS_PREVIOUSPAGE"
});
}
});
},
bindgetuserinfo: function(e) {
if (e.detail.errMsg.indexOf("fail") > -1) {
wx.showModal({
title: '温馨提示',
content: '您未同意授权,系统无法检测您的身份,请允许授权',
});
} else {
getApp().authorize(this.data.share);
setTimeout(() => {
if (["/pages/home/home", "/pages/course/courselist/courselist", "/pages/course/publiclist/publiclist", "/pages/consult/consultlist/consultlist", "/pages/usercenter/usercenter"].indexOf(this.data.route) > -1) {
wx.switchTab({
url: this.data.route
});
} else {
wx.redirectTo({
url: this.data.route
});
}
}, 800);
}
}
})
login思路:一进入该页面,从缓存中把上一个页面拿出来(读取后需要清除该缓存),然后把登录按钮设置成获取用户信息类型,如
设置登录按钮点击登录按钮后触发bindgetuserinfo回调,在回调中判断是否授权,没有点击确定授权就提示要授权,有授权就直接调用app.js(也叫底层代码)的授权方法(用来保存用户信息),最后重定向到上一个页面(是重定向不是返回,而且需要注意是不是导航页面)
登录回调到这里,需要点击按钮才能触发登录已解决。
PS:需要考虑的问题是,在其他页面,怎么才能知道是否已经完成登录了呢?
- 微信小程序处理用户拒绝授权情况及微信登录,登录保存等系列解决方案
- 微信小程序处理用户拒绝授权情况及微信登录,登录保存等系列解决方案
- 微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
- 微信小程序处理用户拒绝授权情况及微信登录,登录保存等系列解决方案
- 梳理微信小程序登录时序图:授权与 Oauth2.0
- 微信小程序Java登录流程(ssm实现具体功能和加解密隐私信息问题解决方案)
- 微信小程序获取手机号授权登录
- 微信小程序登录按钮写法
- 微信小程序提示该页面需要浏览器X5内核支持解决方案
- vue 微信授权登录解决方案
- 微信小程序登录按钮遮罩浮层效果的实现方法
- 微信小程序,授权登录,缓存
- 微信小程序授权登录接口
- 从零开始开发微信小程序(三):微信小程序绑定系统账号并授权登录之微信端
- 微信小程序授权登录整体把握
- 关于小程序开发过程中遇到的一些问题及解决方案(1)关于微信授权变更的解决办法
- 微信小程序登录授权
- 微信小程序判断用户是否需要再次授权获取个人信息
- 微信小程序获取手机号授权用户登录功能
- 微信小程序避免按钮重复触发事件