评论

借助第三方组件库TDesign快速完成隐私保护开发

官方又要搞事情,这是开端还是结局

为规范开发者的用户个人信息处理行为,保障用户的合法权益,自2023年9月15日起,对于涉及处理用户个人信息的小程序开发者,微信要求,仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后,方可调用微信提供的隐私接口。
——《关于小程序隐私保护指引设置的公告》

目前官方也给出了四份示例代码

demo1: 演示使用 wx.getPrivacySetting 和 <button open-type=“agreePrivacyAuthorization”> 在首页处理隐私弹窗逻辑 https://developers.weixin.qq.com/s/gi71sGm67hK0

demo2: 演示使用 wx.onNeedPrivacyAuthorization 和 <button open-type=“agreePrivacyAuthorization”> 在多个页面处理隐私弹窗逻辑,同时演示了如何处理多个隐私接口同时调用。 https://developers.weixin.qq.com/s/4X7yyGmQ7EKp

demo3: 演示 wx.onNeedPrivacyAuthorization、wx.requirePrivacyAuthorize、<button open-type=“agreePrivacyAuthorization”> 和 <input type=“nickname”> 组件如何结合使用 https://developers.weixin.qq.com/s/jX7xWGmA7UKa

demo4: 演示使用 wx.onNeedPrivacyAuthorization 和 <button open-type=“agreePrivacyAuthorization”> 在多个 tabBar 页面处理隐私弹窗逻辑。 https://developers.weixin.qq.com/s/g6BWZGmt7XK9

不难发现,基本的实现思路都是通过页面注入自定义组件privacyPopup, 在privacyPopup内监听onNeedPrivacyAuthorization完成授权提示的方式。

这里面有两个相对麻烦的点:

  • 需要全部页面(保险起见)注册引用该组件
  • 需要自己开发一个privacyPopup组件(当然用官方的也可以)

方案一

不同于官方自定义组件实现的方式,我们借助TDesign组件库内的Dialog和Button组件来快速实现。

效果

贴代码:

在开始之前,我们补充一下: 由于目前TDesign组件还没有跟进升级这一功能,所以你可以等待官方组件库升级Button组件的隐私保护,也可以参照《利用patch-package解决npm包问题》一文自行调整代码实现,此处不做赘述。

// app.js

import Dialog from 'tdesign-miniprogram/dialog/index';

onLaunch(){
    const privacyAuthorizationDialog = resolve => {
    Dialog.action({
      content: '在你使用该服务之前,请仔细阅读《用户隐私保护指引》。如你同意《用户隐私保护指引》,请点击“同意”后开始使用。',
      actions: [{
          content: '拒绝'
        }, {
          buttonId: 'agree-btn',
          content: '已阅读并同意',
          theme: 'primary',
          openType: 'agreePrivacyAuthorization',
          agreePrivacyAuthorization(){
            resolve({ buttonId: 'agree-btn', event: 'agree' })
          }
        }, {
          content: '阅读隐私保护指引',
          theme: 'light'
        }
      ]
    }).then(({index}) => {
      if(index === 2) {
        wx.openPrivacyContract({})
        // 此时不需要关闭dialog, dialog.action默认点击触发close。此时需要重新拉起
        privacyAuthorizationDialog(resolve)
        return
      }
      // 拒绝
      if(index === 0) return resolve({ event:'disagree' })
    })
  }
  if(!wx.onNeedPrivacyAuthorization) return
  wx.onNeedPrivacyAuthorization(resolve => {
      privacyAuthorizationDialog(resolve)
  })
}

此处要说下,为什么在其中定义了privacyAuthorizationDialog方法,主要是因为TDesign Dialog Action的问题,他会在点击后默认关闭Dialog,这个我们预期是不一致的。

// dialog/dialog.ts

onActionTap(index: number) {
    this.triggerEvent('action', { index });
    if (this._onAction) {
      this._onAction({ index });
      // 默认关闭Dialog
      this.close();
    }
  },

如果组件库本身没有这一缺陷/设计的话,我们可以简写为

// app.js

import Dialog from 'tdesign-miniprogram/dialog/index';

onLaunch(){
  if(!wx.onNeedPrivacyAuthorization) return
  wx.onNeedPrivacyAuthorization(resolve => {
      Dialog.action({
      content: '在你使用该服务之前,请仔细阅读《用户隐私保护指引》。如你同意《用户隐私保护指引》,请点击“同意”后开始使用。',
      actions: [{
          content: '拒绝'
        }, {
          buttonId: 'agree-btn',
          content: '已阅读并同意',
          theme: 'primary',
          openType: 'agreePrivacyAuthorization',
          agreePrivacyAuthorization(){
            resolve({ buttonId: 'agree-btn', event: 'agree' })
          }
        }, {
          content: '阅读隐私保护指引',
          theme: 'light'
        }
      ]
    }).then(({index}) => {
      if(index === 2)  return wx.openPrivacyContract({})
      // 拒绝
      if(index === 0) return resolve({ event:'disagree' })
    }).finally(() => Dialog.close())
  })
}

剩下就是我们在各个页面注册Dialog即可。由于我们之前的习惯是页面初始化就会注册ToastMessageDialog,所以这里我们就结束了

<!-- page.wxml -->

<t-toast id="t-toast"></t-toast>
<t-message id="t-message"></t-message>
<t-dialog id="t-dialog"></t-dialog>

方案二

方案一本身只解决了自定义组件的问题,我们不必再浪费头发去写个弹窗了,但仍需要每个页面去注册引用。

方案二我们建议新建一个页面用作授权页

// app.json

{
	"subPackages": [{
          "root": "service",
          "pages": [
              "privacy/authorization"
          ]
      }]
}
 // app.js
 
 App({
 privacyAuthorizationResolve: null,
 onLaunch(){
   if(!wx.onNeedPrivacyAuthorization) return
   wx.onNeedPrivacyAuthorization(resolve => {
 		this.privacyAuthorizationResolve = resolve
 		wx.navigateTo({
 			"url": "/service/privacy/authorization"
 		})
   })
 }
 })
<!-- /service/privacy/authorization.wxml-->

 <!-- 我们需要在该页面完成授权页面的UI开发,此处不赘述,可参考官方示例 -->

<button id="agree-btn" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
// /service/privacy/authorization.js

Page({
	handleAgreePrivacyAuthorization(){
		getApp().privacyAuthorizationResolve({ buttonId: 'agree-btn', event: 'agree' })
		// 最后不要忘记返回
		wx.navigateBack()
	}
})

需要说明的是,用户不同意也不要忘记navigateBack到业务页面,不要试图强制用户同意。

方案二没有在IDE内测试,可能存在运行不通问题。仅作为演示伪代码提供思路

结语

个人认为,本次调整从技术角度来说确实不太合理。现阶段给到开发者的时间太少,另外改造对于业务的侵入太多,未来可能还会存在需要更多规则约束开发者弹窗授权混乱的问题。

不太清楚此次官方为何没有采用类似以往系统弹窗的方式申请用户授权,你对此有什么看法呢? 欢迎评论区交流~

最后附上我认为合理的方式, 开发者只需要完善隐私协议并关注success和fail即可。 当前前置的判断官方在触发wx.onNeedPrivacyAuthorization前已经做了判断,只是授权的形式不同。

最后一次编辑于  2023-08-25  
点赞 0
收藏
评论

2 个评论

  • 曾德云
    曾德云
    2023-12-04

    求一份完整代码,可以有偿提供

    2023-12-04
    赞同
    回复
  • 不知谓
    不知谓
    2023-08-30

    升级 TDesign 到 1.2.2 版本可直接使用了

    代码需要修改如下

    import Dialog from 'tdesign-miniprogram/dialog/index';
    
    onLaunch(){
        const privacyAuthorizationDialog = resolve => {
        Dialog.action({
          content: '在你使用该服务之前,请仔细阅读《用户隐私保护指引》。如你同意《用户隐私保护指引》,请点击“同意”后开始使用。',
          actions: [{
              content: '拒绝'
            }, {
              tId: 'agree-btn',
              content: '已阅读并同意',
              theme: 'primary',
              openType: 'agreePrivacyAuthorization',
              agreePrivacyAuthorization(){
                resolve({ buttonId: 'agree-btn', event: 'agree' })
              }
            }, {
              content: '阅读隐私保护指引',
              theme: 'light'
            }
          ]
        }).then(({index}) => {
          if(index === 2) {
            wx.openPrivacyContract({})
            // 此时不需要关闭dialog, dialog.action默认点击触发close。此时需要重新拉起
            privacyAuthorizationDialog(resolve)
            return
          }
          // 拒绝
          if(index === 0) return resolve({ event:'disagree' })
        })
      }
      if(!wx.onNeedPrivacyAuthorization) return
      wx.onNeedPrivacyAuthorization(resolve => {
          privacyAuthorizationDialog(resolve)
      })
    }
    
    2023-08-30
    赞同
    回复
登录 后发表内容