用户授权拒绝处理方案

在我的第一篇文章强塞过渡页面中,有介绍我们项目采用静默登录,在某些需要获取用户头像昵称等信息的页面,才去进行授权操作。根据需求我们以用户昵称是否为空作为是否授权判断标准,为空则需要用户进行授权获取用户信息,授权成功再调用服务器接口更新本地存储的相关用户信息,再做相关的业务逻辑处理的。

实现用户授权获取信息其实也很简单,查阅微信小程序API,可以发现调用 wx.getUserInfo() 即可实现,只要默认参数该接口可以完全独立于wx.login() 使用,因为不需要判断登录态是否过期问题,鉴于方便处理,我们项目登录时不做session检验,也就是说不需要考虑登录态状态。

所以一开始我采用了最简单的方法,在wxml使用button实现,设置button的 open-type="getUserInfo"属性,只需要在wxml中绑定事件处理点击之后的业务逻辑,这样有个好处就是,只要没授权每次都会弹出授权,可以不用去处理授权弹窗只弹一次用户拒绝授权后如何开启的问题。没授权时点击按钮效果如图1:

图1

可是,在其他页面也需要根据用户是否授权处理业务逻辑,而且这个判断逻辑是在点击切换tab进入页面就需要处理,没法绑定在具体的某个button上实现。为保证代码尽可能重用和授权弹窗处理各处保持一致,决定封装一个方法放在common.js文件中。其他地方使用时,只需调用 common.getCurUserInfo(success, fail) ,该方法只需传2个callback去处理授权成功和失败后逻辑,能更好的将重心转移到业务层面,避免开发过程中频繁判断是否授权和关注授权处理等相关的一系列问题,如:首次授权弹窗选择拒绝后,如何保证用户后期设置开启授权以及如何友好优化提示。而且我们项目是鼓励用户去授权的,因为不授权很多业务会无法进行。

某个页面使用view或者button实现绑定事件处理授权可以参考我的wxml代码:

<view class='red-package-phone'>

    <!-- 采用组件button实现 -->
    <view wx:if="{{!resumeInfo.phone}}" class='red-package'>
      <button wx:if="{{!resumeInfo.isShowPhone}}" class='red-package' open-type="getUserInfo" bindtap="sendRedPacket">  
      <image src='/image/redpack.png'></image>
      发红包查看手机号
      </button> 
    </view>
    
    <!-- 采用组件view实现 -->
    <!-- <view wx:if="{{!resumeInfo.phone}}" class='red-package' bindtap="sendRedPacket">
      <image src='/image/redpack.png'></image>
      发红包查看手机号
    </view> -->
    
    <view wx:else class='phone' bindtap="callPhone">
      <image src='/image/phone.png' mode="aspectFill"></image>
      {{resumeInfo.phone}}
    </view>

  </view>

关于授权获取用户信息的js代码如下:

/**
 * 授权获取用户信息
 * 处理逻辑:根据userInfo.name是否为空判断是否授权
 * userInfo.name ="" => 进行授权获取用户信息 
 * userInfo.name !="" => 即已授权,调用success回调
 * @param success 授权获取用户信息成功的业务逻辑处理
 * @param fail 授权获取用户信息失败的业务逻辑处理
 */
var getCurUserInfo = function (success, fail) {
  /**
   * 方法1: 使用组件button实现:设置button open-type="getUserInfo",未允许则每次都会弹出授权弹框
   */
  /*
  if (!getApp().globalData.userInfo.name) {
    wx.getSetting({
      success(res) {
        wx.getUserInfo({
          success: function (res) {
            //获取用户信息成功后,调用服务器接口更新用户相关信息
            updateUserInfo(res.userInfo, success)
          },
          fail: function (res) {
            console.log('用户选择拒绝授权获取用户信息')
            fail(res)
          }
        })
      },
      fail(res) {
        fail(res)
      }
    })
  }else {
    success(getApp().globalData.userInfo)
  }
  */

  /**
   * 方法2: 使用组件view实现:首次弹出授权弹框,选择允许后不再弹,选择拒绝后下次弹出提示进设置页面开启授权
   */
  if (!getApp().globalData.userInfo.name) {
    wx.getSetting({
      success(res) {
        console.log(res.authSetting);
        var authSetting = res.authSetting;
        if (isEmptyObject(authSetting['scope.userInfo'])) {
          //首次授权,弹授权提示框,注意只会弹一次
          wx.authorize({
            scope: 'scope.userInfo',
            success() {
              wx.getUserInfo({
                success: function (res) {
                  //获取用户信息成功后,调用服务器接口更新用户相关信息
                  updateUserInfo(res.userInfo, success)
                },
                fail: function (res) {
                  console.log('用户选择拒绝授权获取用户信息')
                  fail(res)
                }
              })
            },
            fail() {
              console.log('调用authorize方法失败')
              fail(res)
              wx.showModal({
                title: '用户未授权',
                content: '如需正常使用微信红包支付,请按确定并在授权管理中选中“用户信息”,然后点按确定。最后再重新进入小程序即可正常使用。',
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                    wx.openSetting({
                      success: function success(res) {
                        console.log('调用openSetting方法success:', res);
                      },
                      fail: function (res) {
                        console.log('调用openSetting方法fail:', res);
                      }, complete: function (res) {
                        console.log('调用openSetting方法complete:', res);
                      }
                    });
                  }
                }
              })
            }
          })
        } else {
          //首次授权选择拒绝后,为保证未授权时下次能弹出提示弹窗的处理
          if (!authSetting['scope.userInfo']) {
            wx.showModal({
              title: '用户未授权',
              content: '如需正常使用微信红包支付,请按确定并在授权管理中选中“用户信息”,然后点按确定。最后再重新进入小程序即可正常使用。',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  wx.openSetting({
                    success: function success(res) {
                      console.log('调用openSetting方法success:', res);
                    },
                    fail: function (res) {
                      console.log('调用openSetting方法fail:', res);
                    }, complete: function (res) {
                      console.log('调用openSetting方法complete:', res);
                    }
                  });
                }
              }
            })
          } else {
            wx.getUserInfo({
              success: res => {
                updateUserInfo(res.userInfo, success)
              },
              fail(res) {
                console.log('调用openSetting方法失败:', res)
                fail(res)
              }
            })
          }
        }
      },
      fail(res) {
        console.log('调用getSetting方法失败:', res)
        fail(res)
      }
    })
  } else {
    success(getApp().globalData.userInfo)
  }
}

采用方法2, 首次选择了拒绝后会弹提示弹窗,点击确定会跳转到设置页面,可以开启授权。
拒绝授权后点发红包按钮效果如图2:


图2

点提示用户未授权弹窗确定按钮效果如图3:


图3

图4
至此授权获取用户信息在本项目中都统一成图1-3的效果了。总结下:

1、简单快捷实现方式:推荐用button设置 open-type="getUserInfo" 属性,即方法1,只需绑定事件处理业务逻辑,这种方式能保证每次都弹授权弹窗;
2、较为复杂实现方式:不依赖button组件,任何元素或者非元素绑定时,考虑方法2,这种方式授权弹窗只会在首次出现,拒绝可以自定义提示弹窗引导用户在设置页面进行授权。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,284评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,115评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,614评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,671评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,699评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,562评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,309评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,223评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,668评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,859评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,981评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,705评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,310评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,904评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,023评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,146评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,933评论 2 355

推荐阅读更多精彩内容