微信小程序授权流程

授权流程

小程序中的部分接口,比如地理位置、录音、摄像头、用户信息等,需要用户授权后,才可以调用。把这些接口按使用范围分成多个 scope ,用户选择对 scope 来进行授权,当授权给一个 scope 之后,其对应的所有接口都可以直接使用。

此类接口调用时:

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

获取用户授权的流程可以分为三个步骤:

1、请求授权:

通过 wx.authorize({ scope, success, fail }) 向用户请求某权限

常用scope列表:

scope 描述
scope.userLocation 地理位置(需要在app.json中配置权限说明)
scope.record 录音
scope.camera 摄像头
scope.userInfo 用户信息

2、授权状态校验

wx.getSetting({success}) 获取用户授权状态, 返回值中只会出现小程序已经向用户请求过的权限

wx.getSetting({
    
    
  success (res) {
    
    
    console.log(res.authSetting)
    // res.authSetting = {
    
    
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
 })

3、再次请求授权

如果用户拒绝授权,再次使用 wx.authorize() 弹出授权框这种交互不友好。此时,可以打开小程序设置界面,引导用户打开授权。

调用 wx.openSetting 打开设置界面,引导用户开启授权。设置界面只会出现小程序已经向用户请求过的权限。

扫描二维码关注公众号,回复: 14700867 查看本文章

注意: 只能通过点击行为打开授权界面
在这里插入图片描述

代码示例(原生小程序):

app.json中配置获取地理位置权限说明

{
    
    
  "pages": [
    "pages/launch/launch",
    "pages/recordAuth/recordAuth",
    ...
  ],
  "window": {
    
    
    "pageOrientation": "portrait",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "EasyScan",
    "navigationBarBackgroundColor": "#f8f8f8",
    "backgroundColor": "#f8f8f8"
  },
  "permission": {
    
    
    "scope.userLocation": {
    
    
      "desc": "你的位置信息将用于小程序视频通话位置展示"
    }
  },
  "sitemapLocation": "sitemap.json"
}

小程序需要授权的页面添加以下逻辑:

const app = getApp()

Page({
    
    
  // 页面的初始数据
  data: {
    
    },
  onShow: function() {
    
    
    //授权
    this.getAuth()
  },
  // 获取用户授权
  getAuthorize: function (type) {
    
    
    return new Promise((resolve, reject) => {
    
    
      wx.authorize({
    
    
        scope: `scope.${
      
      type}`,
        success: () => {
    
    },
        fail: () => {
    
    
          console.log(`您未允许使用${
      
      type}权限`)
        },
        complete: () => {
    
    
          resolve()
        }
      })
    })
  },
  // 设置当前小程序需要使用的用户权限
  getAuth: async function () {
    
    
    let that = this
    try {
    
    
      //摄像头
      await that.getAuthorize("camera")
      //麦克风
      await that.getAuthorize("record")
      //地理位置
      await that.getAuthorize("userLocation")
   
      //权限校验
      wx.getSetting({
    
    
        success: res => {
    
    
          if (res.authSetting["scope.camera"] && res.authSetting["scope.record"] && res.authSetting["scope.userLocation"]) {
    
    
            console.log("授权获取成功")
          } else {
    
    
            wx.showModal({
    
    
              title: '警告',
              content: '您未完成相应授权,部分功能无法使用。完成授权后请重启小程序',
              showCancel: false,
              success: function (res) {
    
    
                if (res.confirm) {
    
    
                  wx.navigateTo({
    
    
                    url: '/pages/recordAuth/recordAuth',
                  })
                }
              }
            })
          }
        }
      })
    } catch (err) {
    
    
      console.log("设置当前小程序需要使用的用户权限err: ", err)
    }
  }
})

recordAuth.wxml 中添加按钮,引导用户打开设置页面

<button open-type="openSetting">授权设置</button>

猜你喜欢

转载自blog.csdn.net/weixin_45559449/article/details/129403208