微信小程序-“授权失败”场景的优雅处理

这里写图片描述

微信小程序中提供了相关API 让开发者能获取到微信用户的相关信息,在首次去获取的时候会展示一个用户是否同意授权的对话框。发现有不少线上的小程序都没有处理好用户“拒绝授权”导致的“授权失败”场景。

一个观点

私认为,开发微信小程序在用户授权上有一个要点:除非非常有必要,不要一进入小程序就申请授权,而是仅需要授权的页面才申请——这样让用户的心理负担没那么大。站在用户的角度,有时候我是很讨厌这种一进入小程序就申请授权的行为,毕竟头像昵称这些本质上还是属于用户的隐私,你小程序不给个理由就要拿去,我还是很反感的。同时,也应该做好因用户拒绝授权导致的“授权失败”场景的优雅处理。

分享解决方案

用户点击同意授权固然好,但如果是拒绝授权,会弹出一个提示予以详细说明授权的必要性(如下图):

这里写图片描述

用户只有点击“确定”的选择,点击后会跳转到用户信息设置页面,需要手动勾选(如下图)。如果此时用户依然拒绝,后续只要切换到阅读记录页面,均会一直弹上图的对话框。

这里写图片描述

具体实现

微信小程序在基础库1.2 版本中提供了wx.getSetting 这个接口可以获取到用户的当前设置。利用这个接口我们就可以进行二次判断用户的授权状态,如果回调失败,则可以弹对话框说明并通过wx.openSetting 这个接口进入到设置页面。

1)首先在util.js 中加入一段用来判断是否为空对象的函数。这个函数在后面wx.getSetting 中可以用来判断用户是否是第一次授权。

// 是否为空对象
function isEmptyObject(e) {
    var t;
    for (t in e)
        return !1;
    return !0
}

2)在需要授权的页面的onload 生命周期中添加常规的获取用户信息代码(此代码与官方的quickstart 一致,不全部重复)。

var that = this;
        //调用应用实例的方法获取全局数据
        this.getUserInfo(function (userInfo) {
            //更新用户数据
            that.setData({
                userInfo: userInfo
            })
        });

3)另外新建一个checkSettingStatu 函数来检测用户授权状态。

// 检测授权状态
checkSettingStatu: function(cb) {
        var that = this;
        // 判断是否是第一次授权,非第一次授权且授权失败则进行提醒
        wx.getSetting({
            success: function success(res) {
                console.log(res.authSetting);
                var authSetting = res.authSetting;
                if (util.isEmptyObject(authSetting)) {
                    console.log('首次授权');
                } else {
                    console.log('不是第一次授权', authSetting);
                    // 没有授权的提醒
                    if (authSetting['scope.userInfo'] === false) {
                        wx.showModal({
                            title: '用户未授权',
                            content: '如需正常使用阅读记录功能,请按确定并在授权管理中选中“用户信息”,然后点按确定。最后再重新进入小程序即可正常使用。',
                            showCancel: false,
                            success: function (res) {
                                if (res.confirm) {
                                    console.log('用户点击确定')
                                    wx.openSetting({
                                        success: function success(res) {
                                            console.log('openSetting success', res.authSetting);
                                        }
                                    });
                                }
                            }
                        })
                    }
                }
            }
        });
    }

PS: 如果你觉得这段代码层层回调有点恶心,可自行引入Promise 来改写代码。

4)checkSettingStatu 函数绑定到onShow 生命周期,这样在“授权失败”场景下一进入页面就提醒。

onShow: function(){
        this.checkSettingStatu();
    }

原创地址:
© 转载请注明来源:https://devework.com/weixin-weapp-auth-failed.html

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值