如何优雅的请求小程序用户授权？

最新推荐文章于 2024-07-05 01:12:33 发布

weixin_34321753

最新推荐文章于 2024-07-05 01:12:33 发布

阅读量617

点赞数

原文链接：https://juejin.im/post/5b6da944f265da0f60133d67

版权

小程序开发在微信生态和前端社区里炒的如火如荼，我体验了不少大厂小厂的小程序，较具普遍性地遇到一个令我痛苦的问题：

若非万不得已，请不要这么做！伤粉伤身！！！

其一、这种没有上下文的授权请求，非常容易吓跑用户。

不妨站在用户的角度想一下：我什么都没看到，就让我授权？这究竟是个什么鬼？会不会是骗子啊？会不会把我微信钱包的钱弄走了？会不会盗我的微信号？

其二、不利于关键信息或者软件功能呈现。

首屏首印象非常重要，一般用户在启动你的小程序之前对你的有效认知只有一个小程序名称，此时，非常需要通过最直接的方式增强用户对这个小程序的认识。如果采取这样的悲剧式的授权，首页停留时间趋近于0，跳出率趋近于1。（诶~~看个广告再走呗~）

那么，怎样的授权方式比较好呢？

首先我们从自己的产品角度来分析一下，尝试回答几个最重要的问题：

Q1. 为什么需要用户授权？

需要用户基本信息
需要换取openID/unionID做用户标识
需要用户位置，号码...

具体原因当然很多，但不外乎以上列举的这些情况。

Q2. 能在最需要的时候请求授权吗？

不行啊，在这个callback里，我需要用户昵称和性别信息
不行啊，我下一个请求里需要openID来关联本地用户
不行啊，......

通常大多是基于上述的开发实现层面的考虑，希望尽早把用户信息放到内存里，随时备用。但是，我们为什么做开发？是为了做产品，对吧！那么，从产品从体验角度重新思考一下，能缓缓再去惊扰用户吗？

我觉得典型的需要用户信息(这里指userInfo)的场景只有一种：

要读写的数据和某个用户有关

比如“查询我的订单”，“修改我的个人资料”等这样的场景，超出这样的场景的话，请重新思考一下业务逻辑。

如何优雅的请求用户授权

为了说清这个问题，请允许发明两个名词：page授权 和 action授权

page授权

指加载当前页面的主要数据前，需要用户信息作为查询条件，比如用户ID。这种情况下，应当在Page.onLoad函数中请求用户授权。

Page({
  onLoad(){
    requireAuth
    	.then(onAuthSuccess)
    	.catch(onAuthFailure)
  }
})
复制代码

action授权

指一个交互操作（比如点击按钮）时，需要用户信息作为操作参数。这种情况稍微繁琐一些，因为新版本的基础库可能会强推open-data方式，而授权操作与button组件binding在一起，引起UI上的麻烦，毕竟按钮不是万能的。在这里，JS姐推荐一种做法，意在抛砖引玉，供大家参考。

UI上，我们需要用条件模板，已授权时render普通按钮/文本 whatever，未授权时render授权按钮。

<text 
  wx:if="{{authenticated}}" 
  bindtap="onTapAction"
>点赞</text>

<button open-type="getUserInfo"
  wx:if="{{!authenticated}}" 
  bindgetuserinfo="onTapAuth"
>点赞</button>
复制代码

在对应的Handle函数中需要处理这两种交互.

//onTapAction
onTapAction(){
  sendRequest(this.data.user)
}

onTapAuth(e){
  if(success){
    sendRequest(e.detail.userInfo)
  }else{
    console.log('auth denied')
    // notify user
  }
}
复制代码

如何更优雅的实现？

对于 page授权 和 action授权，可以尝试抽象两个component出来，以便复用，比如这样：

<!-- page授权 -->
<auth-page
  bind:authenticated="onAuthenticated"
>
  <view>
    亲爱的{{user.name}}，你好！
    你是本站的第 {{counter}} 位访客
  </view>
</auth-page>


<!-- action授权 -->
<auth-button bind:action="onAction">点赞</auth-button>
复制代码