小程序必备逻辑------授权

简介

授权,在小程序项目中也是必不可少的,因为涉及隐私,所以部分接口是需要得到用户的授权才能调用,那么接下来,我就把授权这块展开和大家做个分享~

授权

文章开头已经介绍过,部分接口需要得到用户的授权方可调用,那么小程序把这些接口按使用范围分成多个 scope ,用户选择对 scope 来进行授权,当授权给一个scope 之后,其对应的所有接口都可以直接使用。

scope的列表如下图所示:
在这里插入图片描述
接下来,咱们就以userInfo作为切入点进行讲解,因为userInfo相对其他比较特殊,那么在讲之前,大家还需要了解下以下逻辑:

  • 如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;
  • 如果用户已授权,可以直接调用接口;
  • 如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。

OK,开干~

首先判断用户是否有权限,如果没有,咱们就需要让用户授权,那么怎么让用户授权,有两种方式,如下所示:

  • 调用APIwx.authorize({scope: "scope.userInfo"}),向用户发起请求;
  • 使用<button open-type="getUserInfo" bindgetuserinfo="getUserInfo" type="primary">一键登录</button>

那么这两种方式有什么区别呢,区别在于,使用wx.authorize({scope: "scope.userInfo"})是不会弹框的,所以如果要授权获取用户信息,需要使用第二种。弹框样式如下所示(这张图片是真机的图片,真机和开发者工具是不一样的,一切以真机为主):

注意哦,使用wx.authorize,只是获取用户信息授权不会弹框,并不是所有授权都不会弹框,具体的大家可以去查阅官方文档。

如果用户允许了,调用对应接口即可,比照scope列表图调用对应接口即可。如address调用wx.chooseAddress

如果用户在第一次拒绝了,那么下一次的时候,就不会弹框了,则会触发wx.authorizefail回调函数,返回值是errMsg: "authorize:fail 系统错误,错误码:-12006,auth deny",这个时候大家就需要去处理拒绝授权的情况,推荐是让用户手动打开,新建一个页面,利用<button open-type="openSetting" bindopensetting="getSetting" type="primary">设置</button>,引导用户点击去选择,弹框如下图所示:

截止位置,授权的逻辑就讲完了,代码如下所示:

正常授权逻辑

// --------------------------------- wxml
<button class="login-btn" type="primary" bindtap="getAddrees">获取地址</button>
// --------------------------------- js
  getAddrees() {
    // 判断是否授权
    wx.getSetting({
      success(res) {
        // 如果没有授权
        if (!res.authSetting['scope.address']) {
          // 发起授权
          wx.authorize({
            scope: 'scope.address',
            success () {
              wx.chooseAddress({
                // 选择完地址的回调
                success(res) {
                  console.log(res)
                },
                fail(res) {
                  console.log("获取用户地址失败", res)
                }
               })
            },
            fail(err) {
              // 用户第一次拒绝后,第二次会进入此回调,针对处理即可
            }
          })
        }  else {
          // 已经授权的逻辑
          wx.chooseAddress({
            // 选择完地址的回调
            success(res) {
              console.log(res)
            },
            fail(res) {
              console.log("获取用户地址失败", res)
            }
           })
        }
      }
    })
  }

需要用按钮触发的授权,这里用获取用户信息来演示

// --------------------------------- wxml
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo" type="primary">获取用户信息</button>
// --------------------------------- js
  getUserInfo(user) {
    const userInfo = user.detail.userInfo
    // 存在用户信息则是被授权了
    if (userInfo) {
      console.log(userInfo)
    } else {
      console.log('未授权')
    }
  }

OK,以上就是授权的所有逻辑了,希望能给大家带来帮助,如有问题,还请大家多多指教,thank you~


版权声明:本文为qq_39816673原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。