微信小程序中如何优雅的处理授权

哈哈的小泥
357 阅读3分钟

1.什么是授权？

在微信小程序中，授权通常意味着你想使用内置的某类API方法（比如获取地理位置、保存图片到相册、打开麦克风等等），但是这类API需要经过用户授权同意才能调用。那么如何进行授权操作呢？

我们可以使用 wx.authorize 这个方法，在调用需授权 API 之前，提前向用户发起授权请求。示例如下：

 wx.authorize({
    scope: 'scope.record',
    success () {
      // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
      wx.startRecord()
    }
  })

微信把这些需要授权的API方法按使用范围分成多个 scope ，用户选择对 scope 来进行授权，当授权给一个 scope 之后，其对应的所有接口都可以直接使用。

E75D7156-834F-4e78-854A-563054078C40.png

255AEE22-A06A-471f-9575-FD35C649914E.png 点击查看官方文档链接

2.案例分析与实现

比如现在有个功能，需要把图片保存到相册中，该怎么实现呢？

  1. 首先我们找到添加图片到相册的scope, 从图上得知是scope.writePhotosAlbum, 然后对其进行授权操作
  2. 然后调用这个scope对应的方法，因为我们是保存图片，所以选择 wx.saveImageToPhotosAlbum
        wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                wx.saveImageToPhotosAlbum({
                  filePath: imagePath, // 图片的路径
                  success() {
                    wx.showToast({
                      title: '保存相册成功',
                      icon: 'none'
                    })
                  },
                  fail(e) {
                    console.log('err: ', e)
                  }
                });
              }
            })

实际效果可以看下图，会先展示一个授权的底部弹窗，用户点击允许，则保存相册成功。

6FA7B364-07C1-4122-A28A-61411D09E860.png

3.兼容处理

看起来很简单对吧，不过我们需要考虑个问题，如果用户拒绝授权呢？这里特别说明一下，如果用户拒绝了授权，那么后续就不会出现弹窗，而是直接进入接口 fail 回调，所以我们还要兼容用户拒绝授权的场景。

 wx.authorize({
      scope: 'scope.writePhotosAlbum',
      success() {
        wx.saveImageToPhotosAlbum({
          filePath: imagePath, // 图片的路径
          success() {
            wx.showToast({
              title: '保存相册成功',
              icon: 'none'
            })
          },
          fail(e) {
            console.log('err: ', e)
          }
        });
      },
      fail(err) {
      // 新增用户拒绝授权后的逻辑
        console.log('授权失败: ', err)
        wx.showModal({
          title: '提示',
          content: '未授权保存到相册将无法参与活动',
          confirmText: '去授权',
          success(res) {
            if (res.confirm) {
              wx.openSetting() // 引导用户去设置页
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
      }
    })

在处理用户拒绝授权后的逻辑中，出现了新的一个方法 wx.openSetting(), 这个方法作用是打开设置界面，引导用户开启授权。设置页面如下图所示，可以引导用户打开添加到相册按钮。

.JPG

以上便是一个保存图片到相册的简单示例，其实我们还可以优化一下，比如我们可以在调用 wx.authorize 之前先用 wx.getSetting 获取到当前已经授权的scope列表, 然后判断一下用户是否授权过 scope.writePhotosAlbum, 如果授权过，那么其实可以直接调用 wx.saveImageToPhotosAlbum 方法了，不需要再走一遍授权的逻辑。

完整代码如下：

 wx.getSetting({
        success(res) {
        // 判断已授权的scope是否含有保存到相册的授权
          if (!res.authSetting['scope.writePhotosAlbum']) {
          // 没有授权过，走完整的授权逻辑
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success() {
                wx.saveImageToPhotosAlbum({
                  filePath: imagePath, // 图片的路径
                  success() {
                    wx.showToast({
                      title: '保存相册成功',
                      icon: 'none'
                    })
                  },
                  fail(e) {
                    console.log('err: ', e)
                  }
                });
              },
              fail(err) {
              // 用户拒绝授权后的逻辑
                console.log('授权失败: ', err)
                wx.showModal({
                  title: '提示',
                  content: '未授权保存到相册将无法参与活动',
                  confirmText: '去授权',
                  success(res) {
                    if (res.confirm) {
                      wx.openSetting() // 引导用户去设置页
                    } else if (res.cancel) {
                      console.log('用户点击取消')
                    }
                  }
                })
              }
            })
          } else {
          // 已经授权过了，直接调用保存相片想法即可，无需再次授权
            wx.saveImageToPhotosAlbum({
              filePath: imagePath,// 图片的路径
              success() {
                wx.showToast({
                  title: '保存相册成功',
                  icon: 'none'
                })
              },
              fail(e) {
                console.log('err: ', e)
              }
            });
          }
        },
        fail(err) {
          console.log(err)
        }
      })

注意事项

  1. 需要授权 scope.userLocation、scope.userLocationBackground、scope.userFuzzyLocation 时必须配置地理位置用途说明。
  2. 授权弹窗会展示小程序在小程序用户隐私保护指引中填写的说明，请谨慎填写。

结尾

以上就是如何简单处理微信小程序中授权的相关逻辑了，希望对你有所帮助。

avatar
文章
阅读
粉丝