getUserInfo较为特殊，不包含在本文范围内，主要针对需要授权的功能性api，例如：wx.startRecord，wx.saveImageToPhotosAlbum， wx.getLocation

仓库地址：https://github.com/jinxuanzheng01/weapp-auth-demo

背景

小程序内如果要调用部分接口需要用户进行授权，例如获取地理位置信息，收获地址，录音等等，但是小程序对于这些需要授权的接口并不是特别友好，最明显的有两点：

  • 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调，
  • 没有统一的错误信息提示，例如错误码

一般情况而言，每次授权时都应该激活弹窗进行提示，是否进行授权，例如：

image.png

而小程序内只有第一次进行授权时才会主动激活弹窗（微信提供的），其他情况下都会直接走fail回调，微信文档也在句末添加了一句请开发者兼容用户拒绝授权的场景

这种未做兼容的情况下如果用户想要使用录音功能，第一次点击拒绝授权，那么之后无论如何也无法再次开启录音权限**，很明显不符合我们的预期。

所以我们需要一个可以进行二次授权的解决方案

常见处理方法

官方demo

下面这段代码是微信官方提供的授权代码, 可以看到也并没有兼容拒绝过授权的场景查询是否授权（即无法再次调起授权）

  1. // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.record" 这个 scope
  2. wx.getSetting({
  3.   success(res) {
  4.     if (!res.authSetting['scope.record']) {
  5.       wx.authorize({
  6.         scope: 'scope.record',
  7.         success () {
  8.           // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
  9.           wx.startRecord()
  10.         }
  11.       })
  12.     }
  13.   }
  14. })

一般处理方式

那么正常情况下我们该怎么做呢？以地理位置信息授权为例：

  1. wx.getLocation({
  2.    success(res) { 
  3.       console.log('success', res);
  4.    },
  5.    fail(err) {
  6.       // 检查是否是因为未授权引起的错误
  7.       wx.getSetting({
  8.          success (res) {               
  9.             // 当未授权时直接调用modal窗进行提示
  10.             !res.authSetting['scope.userLocation'] && wx.showModal({
  11.                content: '您暂未开启权限，是否开启',
  12.                confirmColor: '#72bd4a',
  13.                success: res => {              
  14.                   // 用户确认授权后，进入设置列表
  15.                   if (res.confirm) {
  16.                      wx.openSetting({
  17.                         success(res){
  18.                            // 查看设置结果
  19.                            console.log(!!res.authSetting['scope.userLocation'] ? '设置成功' : '设置失败');
  20.                         },
  21.                      });
  22.                   }
  23.                }
  24.             });
  25.          }
  26.       });
  27.    }
  28. });

上面代码，有些同学可能会对在fail回调里直接使用wx.getSetting有些疑问，这里主要是因为

  • 微信返回的错误信息没有一个统一code
  • errMsg又在不同平台有不同的表现
  • 从埋点数据得出结论，调用这些api接口出错率基本集中在未授权的状态下

这里为了方便就直接调用权限检查了 ，也可以稍微封装一下，方便扩展和复用，变成：

  1.   bindGetLocation(e) {
  2.         let that = this;
  3.         wx.getLocation({
  4.             success(res) {
  5.                 console.log('success', res);
  6.             },
  7.             fail(err) {
  8.                 that.__authorization('scope.userLocation');
  9.             }
  10.         });
  11.     },
  12.     bindGetAddress(e) {
  13.         let that = this;
  14.         wx.chooseAddress({
  15.             success(res) {
  16.                 console.log('success', res);
  17.             },
  18.             fail(err) {
  19.                 that.__authorization('scope.address');
  20.             }
  21.         });
  22.     },
  23.     __authorization(scope) {
  24.               /** 为了节省行数，不细写了，可以参考上面的fail回调，大致替换了下变量res.authSetting[scope] **/ 
  25.     }

看上去好像没有什么问题，fail里只引入了一行代码，

这里如果只针对较少页面的话我认为已经够用了，毕竟‘如非必要，勿增实体’，但是对于小打卡这个小程序来说可能涉及到的页面，需要调用的场景偏多，我并不希望每次都人工去调用这些方法，毕竟人总会犯错

梳理目标

上文已经提到了背景和常见的处理方法，那么梳理一下我们的目标，我们到底是为了解决什么问题？列了下大致为下面三点：

  • 兼容用户拒绝授权的场景，即提供二次授权
  • 解决多场景，多页面调用没有统一规范的问题
  • 在底层解决，业务层不需要关心二次授权的问题

扩展wx[funcName]方法

为了节省认知成本和减少出错概率，我希望他是这个api默认携带的功能，也就是说因未授权出现错误时自动调起是否开启授权的弹窗

为了实现这个功能，我们可能需要对wx的原生api进行一层包装了（关于页面的包装可以看：如何基于微信原生构建应用级小程序底层架构）

为wx.getLocation添加自己的方法

这里需要注意的一点是直接使用常见的装饰模式是会出现报错，因为wx这个对象在设置属性时没有设置set方法，这里需要单独处理一下

  1. // 直接装饰，会报错 Cannot set property getLocation of #<Object> which has only a getter 
  2. let $getLocation = wx.getLocation;
  3. wx.getLocation = function (obj) {
  4.     $getLocation(obj);    
  5. };
  7. // 需要做一些小处理
  8. wx = {...wx};                                        //     对wx对象重新赋值
  9. let $getLocation = wx.getLocation;
  10. wx.getLocation = function (obj) {                    
  11.     console.log('调用了wx.getLocation');
  12.     $getLocation(obj);    
  13. };
  15. // 再次调用时会在控制台打印出 '调用了wx.getLocation' 字样
  16. wx.getLocation()

劫持fail方法

第一步我们已经控制了wx.getLocation这个api，接下来就是对于fail方法的劫持，因为我们需要在fail里加入我们自己的授权逻辑

  1. // 方法劫持
  2. wx.getLocation = function (obj) {
  3.     let originFail = obj.fail;
  5.     obj.fail = async function (errMsg) {
  6.         // 0 => 已授权 1 => 拒绝授权 2 => 授权成功
  7.         let authState = await authorization('scope.userLocation');
  9.         // 已授权报错说明并不是权限问题引起，所以继续抛出错误
  10.         // 拒绝授权，走已有逻辑，继续排除错误
  11.         authState !== 2 && originFail(errMsg);
  12.     };
  13.     $getLocation(obj);
  14. };
  16. // 定义检查授权方法
  17. function authorization(scope) {
  18.     return new Promise((resolve, reject) => {
  19.         wx.getSetting({
  20.             success (res) {
  21.                 !res.authSetting[scope]
  22.                     ? wx.showModal({
  23.                         content: '您暂未开启权限，是否开启',
  24.                         confirmColor: '#72bd4a',
  25.                         success: res => {
  26.                             if (res.confirm) {
  27.                                 wx.openSetting({
  28.                                     success(res){
  29.                                         !!res.authSetting[scope] ? resolve(2) : resolve(1)
  30.                                     },
  31.                                 });
  32.                             }else {
  33.                                 resolve(1);
  34.                             }
  35.                         }
  36.                     })
  37.                     : resolve(0);
  38.             }
  39.         })
  40.     });
  41. }
  43. // 业务代码中的调用
  44.   bindGetLocation(e) {
  45.         let that = this;
  46.         wx.getLocation({
  47.             type: 'wgs84',
  48.             success(res) {
  49.                 console.log('success', res);
  50.             },
  51.             fail(err) {
  52.                 console.warn('fail', err);
  53.             }
  54.         });
  55.   }

可以看到现在已实现的功能已经达到了我们最开始的预期，即因授权报错作为了wx.getLocation默认携带的功能，我们在业务代码里再也不需要处理任何再次授权的逻辑

也意味着wx.getLocation这个api不论在任何页面，组件，出现频次如何，我们都不需要关心它的授权逻辑（效果本来想贴gif图的，后面发现有图点大，具体效果去git仓库跑一下demo吧）

让我们再优化一波

上面所述大致是整个原理的一个思路，但是应用到实际项目中还需要考虑到整体的扩展性和维护成本，那么就让我们再来优化一波

代码包结构：
本质上只要在app.js这个启动文件内，引用./x-wxx/index文件对原有的wx对象进行覆盖即可

image.png

简单的代码逻辑： 

  1. // 大致流程：
  3. //app.js
  4. wx = require('./x-wxx/index');                        // 入口处引入文件
  6. // x-wxx/index 
  7. const apiExtend = require('./lib/api-extend')；
  8. module.exports = (function (wxx) {                    // 对原有方法进行扩展
  9.     wxx = {...wxx};
  10.     for (let key in wxx) {
  11.         !!apiExtend[key] && (()=> {
  13.             // 缓存原有函数
  14.             let originFunc = wxx[key];
  16.             // 装饰扩展的函数
  17.             wxx[key] = (...args) => apiExtend[key](...args, originFunc);
  18.         })();
  19.     }
  20.     return wxx;
  21. })(wx);
  23. // lib/api-extend
  24. const Func = require('./Func');
  25. (function (exports) {                                // 需要扩展的api（类似于config）
  26.     // 获取权限
  27.     exports.authorize = function (opts, done) {
  28.         // 当调用为"确认授权方法时"直接执行，避免死循环
  29.         if (opts.$callee === 'isCheckAuthApiSetting') {
  30.             console.log('optsopts', opts);
  31.             done(opts);
  32.             return;
  33.         }
  34.         Func.isCheckAuthApiSetting(opts.scope, () => done(opts));
  35.     };
  37.     // 选择地址
  38.     exports.chooseAddress = function (opts, done) {
  39.         Func.isCheckAuthApiSetting('scope.address', () => done(opts));
  40.     };
  42.     // 获取位置信息
  43.     exports.getLocation = function (opts, done) {
  44.         Func.isCheckAuthApiSetting('scope.userLocation', () => done(opts));
  45.     };
  47.     // 保存到相册
  48.     exports.saveImageToPhotosAlbum = function (opts, done) {
  49.         Func.isCheckAuthApiSetting('scope.writePhotosAlbum', () => done(opts));
  50.     }
  52.     // ...more
  53. })(module.exports);

更多的玩法

可以看到我们无论后续扩展任何的微信api，都只需要在lib/api-extend.js 配置即可，这里不仅仅局限于授权，也可以做一些日志，传参的调整，例如：

  1.  // 读取本地缓存(同步)
  2. exports.getStorageSync = (key, done) => {
  3.         let storage = null;
  4.         try {
  5.             storage = done(key);
  6.         } catch (e) {
  7.             wx.$logger.error('getStorageSync', {msg: e.type});
  8.         }
  9.         return storage;
  10. };

这样是不是很方便呢，至于Func.isCheckAuthApiSetting这个方法具体实现，为了节省文章行数请自行去git仓库里查看吧

关于音频授权

录音授权略为特殊，以wx.getRecorderManager为例，它并不能直接调起录音授权，所以并不能直接用上述的这种方法，不过我们可以曲线救国，达到类似的效果，还记得我们对于wx.authorize的包装么，本质上我们是可以直接使用它来进行授权的，比如将它用在我们已经封装好的录音管理器的start方法进行校验

  1. wx.authorize({
  2.    scope: 'scope.record'
  3. });

实际上，为方便统一管理，Func.isCheckAuthApiSetting方法其实都是使用wx.authorize来实现授权的

  1. exports.isCheckAuthApiSetting = async function(type, cb) {
  3.         // 简单的类型校验
  4.         if(!type && typeof type !== 'string') return;
  6.         // 声明
  7.         let err, result;
  9.         // 获取本地配置项
  10.         [err, result] = await to(getSetting());         // 这里可以做一层缓存，检查缓存的状态，如果已授权可以不必再次走下面的流程，直接return出去即可
  11.         if (err) {
  12.             return cb('fail');                                                    
  13.         }
  15.         // 当授权成功时，直接执行
  16.         if (result.authSetting[type]) {
  17.             return cb('success');
  18.         }
  20.         // 调用获取权限
  21.         [err, result] = await to(authorize({scope: type, $callee: 'isCheckAuthApiSetting'}));
  22.         if (!err) {
  23.             return cb('success');
  24.         }
  25. }

关于用户授权

用户授权极为特殊，因为微信将wx.getUserInfo升级了一版，没有办法直接唤起了，详见《公告》，
所以需要单独处理，关于这里会拆出单独的一篇文章来写一些有趣的玩法

总结

最后稍微总结下，通过上述的方案，我们解决了最开始目标的同时，也为wx这个对象上的方法提供了统一的装饰接口（lib/api-extend文件），便于后续其他行为的操作比如埋点，日志，参数校验

还是那么一句话吧，小程序不管和web开发有多少不同，本质上都是在js
境上进行开发的，
希望小程序的社区环境更加活跃，带来更多有趣的东西