微信小程序添加用户隐私保护指引

这篇具有很好参考价值的文章主要介绍了微信小程序添加用户隐私保护指引。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前段时间不知道大家有没有发现很多小程序都添加了用户隐私保护提示,这是因为微信官方为规范开发者的用户个人信息处理行为,保障用户合法权益,小程序、插件中涉及处理用户个人信息的开发者,均需补充相应用户隐私保护指引。那么如何添加用户保护指引提示呢?相信大家已经到微信官方文档上查看了,那么如果想更快的实现一个基础版的,可以参考下面的操作,欢迎大家讨论指正。

一、官方介绍

微信小程序 用户隐私保护提示,小程序,微信小程序,小程序,前端

二、实现效果

微信小程序 用户隐私保护提示,小程序,微信小程序,小程序,前端

三、实现步骤

在小程序的pages文件路径下创建的component文件夹,创建privacyPopup文件夹,依次创建privacyPopup.js、privacyPopup.wxml、privacyPopup.json、privacyPopup.wxss:
微信小程序 用户隐私保护提示,小程序,微信小程序,小程序,前端

privacyPopup.js

const app = getApp();

let privacyHandler
let privacyResolves = new Set()
let closeOtherPagePopUpHooks = new Set()

wx.onNeedPrivacyAuthorization(resolve => {
  if (typeof privacyHandler === 'function') {
    privacyHandler(resolve)
  }
})

const closeOtherPagePopUp = (closePopUp) => {
  closeOtherPagePopUpHooks.forEach(hook => {
    if (closePopUp !== hook) {
      hook()
    }
  })
}


Component({
  data: {
      title: "用户隐私保护提示",
      desc1: "感谢您参与本活动,您参与本活动前应当阅读并同意",
      urlTitle: "《用户隐私保护指引》",
      desc2: "当您点击同意并开始使用产品服务时,即表示你已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法进入活动。",
      innerShow: false,
      height: 0,
  },
  lifetimes: {
    attached: function() {
      const closePopUp = () => {
                this.disPopUp()
              }
              privacyHandler = resolve => {
                privacyResolves.add(resolve)
                this.popUp()
                // 额外逻辑:当前页面的隐私弹窗弹起的时候,关掉其他页面的隐私弹窗
                closeOtherPagePopUp(closePopUp)
              }
             closeOtherPagePopUpHooks.add(closePopUp)
              this.closePopUp = closePopUp
    },
        detached: function() {
            closeOtherPagePopUpHooks.delete(this.closePopUp)
          }
  },
  methods: {
      handleAgree(e) {
        this.disPopUp()
        // 这里演示了同时调用多个wx隐私接口时要如何处理:让隐私弹窗保持单例,点击一次同意按钮即可让所有pending中的wx隐私接口继续执行 (看page/index/index中的 wx.getClipboardData 和 wx.startCompass)
        privacyResolves.forEach(resolve => {
          resolve({
            event: 'agree',
            buttonId: 'agree-btn'
          })
        })
        privacyResolves.clear()
    },
    handleDisagree(e) {
      this.disPopUp()
      privacyResolves.forEach(resolve => {
        resolve({
          event: 'disagree',
        })
      })
      privacyResolves.clear()
    },
    popUp() {
      if (this.data.innerShow === false) {
        this.setData({
          innerShow: true
        })
      }
    },
    disPopUp() {
      if (this.data.innerShow === true) {
        this.setData({
          innerShow: false
        })
      }
    },
    openPrivacyContract() {
      wx.openPrivacyContract({
        success: res => {
          console.log('openPrivacyContract success')
        },
        fail: res => {
          console.error('openPrivacyContract fail', res)
        }
      })
    }
  }
})

privacyPopup.wxml

<view wx:if="{{innerShow}}" class="mask"></view>
<view wx:if="{{innerShow}}" class="weui-half-screen-dialog" style="position: fixed;  bottom:{{height}}px;z-index: 100" >
    <view class="weui-half-screen-dialog__hd">
          <text class="weui-half-screen-dialog__title">{{title}}</text>
    </view>
    <view class="weui-half-screen-dialog__bd">
        <view class="weui-half-screen-dialog__tips">{{desc1}}</view>
        <view class="weui-half-screen-dialog__tips" style="color:#576B95" bindtap="openPrivacyContract">{{urlTitle}}</view>
        <view class="weui-half-screen-dialog__tips">{{desc2}}</view>
    </view>
    <view class="weui-half-screen-dialog__ft">
      <view class="weui-half-screen-dialog__btn-area">
        <button id="disagree-btn"
          type="default"
          class="weui-btn"
          bindtap="handleDisagree"
        >不同意</button>
        <button id="agree-btn"
          type="primary"
          open-type="agreePrivacyAuthorization"
          class="weui-btn"
          bindagreeprivacyauthorization="handleAgree"
        >同意并继续</button>
      </view>
    </view>
  </view>

privacyPopup.json

{
    "component": true,
    "usingComponents": {}
}

privacyPopup.wxss

样式可在文章上方下载。(包含所有组件)微信小程序 用户隐私保护提示,小程序,微信小程序,小程序,前端

首页的index.wxml

<privacy-popup id="privacyPopup"></privacy-popup>

首页的index.js

	//监听页面加载
   onLoad: function (options) { 
		const _this=this;
		if (wx.getPrivacySetting) {
		        wx.getPrivacySetting({
		          success: res => {
		              if (res.needAuthorization) {
		                _this.isPrivacyAuthorize();
		              } else{
		                this.triggerEvent("agree")
		              }
		          },
		          fail: () => { },
		          complete: () => { },
		        })
		      } else {
		        // 低版本基础库不支持 wx.getPrivacySetting 接口,隐私接口可以直接调用
		        this.triggerEvent("agree")
		      }
	},
	isPrivacyAuthorize(){
      let privacyPopup=this.selectComponent('#privacyPopup');
      if (wx.requirePrivacyAuthorize) {
        wx.requirePrivacyAuthorize({
          success: res => {
            this.triggerEvent("agree")
          },
          fail: res => {
            privacyPopup.disPopUp();            
            setTimeout(()=>{
              this.isPrivacyAuthorize()
            },500)
          }
        })
      } else {
        // 低版本基础库不支持 wx.getPrivacySetting 接口,隐私接口可以直接调用
        this.triggerEvent("agree")
      }
  • wx.getPrivacySetting 接口,查询微信侧记录的用户是否有待同意的隐私政策信息。
  • wx.requirePrivacyAuthorize接口,模拟隐私接口调用,并触发隐私弹窗逻辑。
    这里的逻辑是当用户进入小程序首页时,判断用户是否需要同意隐私政策,如果需要就触发隐私弹框逻辑,用户点击了同意就关闭隐私政策弹框,继续使用小程序;如果用户点击了不同意,隐私政策弹框会再次弹出;如果用户已经同意过则不会触发隐私弹框逻辑。

首页的index.json

在首页的index.json中的usingComponents中添加隐私保护提示组件

{
  "usingComponents": {
    "privacy-popup": "../component/privacyPopup/privacyPopup"
  },
}

四、配置隐私协议

1、如果小程序不是通过第三方授权管理的,那么可根据微信小程序官方隐私指引填写说明进行配置。
2、如果小程序是由第三方授权管理的,那么可以使用微信第三方配置;
3、我开发的小程序也是由第三方授权管理的,下面是我根据官方说明的操作,可以参考:

使用微信的api调试工具
微信小程序 用户隐私保护提示,小程序,微信小程序,小程序,前端

请求参数

详情请查看第三方配置,下面是我简化了一些不必要参数:

{
	"privacy_ver": 2,
	"setting_list": [
		{
			"privacy_key": "UserInfo",
			"privacy_text": "记录活动用户信息、执行后续营销服务等相关事宜"
		},	{
			"privacy_key": "PhoneNumber",
			"privacy_text": "执行活动奖品寄送、后续营销服务等相关事宜"
		},
		{
			"privacy_key": "ClipboardData",
			"privacy_text": "用于复制卡券类奖品的卡券号,以方便用户在领取卡券后输入卡券号"
		}
		
	],
	"owner_setting": {
		"contact_phone": "",
		"contact_email": "邮箱",
		"contact_qq": "",
		"contact_weixin": "",
		"store_expire_timestamp": "",
		"ext_file_media_id": "",
		"notice_method": "通过弹窗",
		"store_region": 0
	},
	"sdk_privacy_info_list": [
		
	]
}

微信小程序 用户隐私保护提示,小程序,微信小程序,小程序,前端
请求成功后就可以在真机调试时查看效果。

效果

"setting_list"参数中配置的就是下面隐私保护指引内容中标红的文字描述。
微信小程序 用户隐私保护提示,小程序,微信小程序,小程序,前端

以上就是微信小程序添加用户隐私保护指引的整个操作过程,隐私保护提示框组件在文章标题下方可自行下载使用,如有不足请指出。
微信小程序 用户隐私保护提示,小程序,微信小程序,小程序,前端文章来源地址https://www.toymoban.com/news/detail-847746.html

到了这里,关于微信小程序添加用户隐私保护指引的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序用户隐私保护通用组件

    微信小程序官方公告《关于小程序隐私保护指引设置的公告》 需要处理的隐私接口《插件用户隐私保护说明内容介绍》 1.2023 年 9 月 15 号之前,默认不会启用隐私相关功能,所以检测不到需要弹窗的情况,可以在 manifest.json 中配置 \\\"__usePrivacyCheck__\\\": true 之后,接口才可以检测

    2024年02月08日
    浏览(49)
  • uniapp微信小程序用户隐私保护通用配置

    微信小程序官方公告《关于小程序隐私保护指引设置的公告》 需要处理的隐私接口《插件用户隐私保护说明内容介绍》 1.2023 年 9 月 15 号之前,默认不会启用隐私相关功能,所以检测不到需要弹窗的情况,可以在 manifest.json 中配置 \\\"__usePrivacyCheck__\\\": true 之后,接口才可以检测

    2024年02月09日
    浏览(54)
  • 用户隐私问题小程序审核不通过,微信小程序隐私保护开发指南

    目录 小程序隐私协议开发指南 一、功能介绍 二、接入流程 1. 配置《小程序用户隐私保护指引》 2. 主动查询隐私授权同步状态以及展示隐私协议 3. 被动监听隐私接口需要用户授权事件 4. 清空历史同步状态 三、其他说明 四、完整示例demo 五、常见错误说明 uniapp小程序特别指

    2024年02月04日
    浏览(50)
  • 关于微信小程序用户隐私保护授权低耦合解决方案

    uniapp项目源码链接:https://download.csdn.net/download/sfsgtc/88404742 图片预览: 项目说明:         2023年8月10日微信官方发布《关于小程序隐私保护指引设置》的公告,从2023年9月15日起必须用户点击同意隐私保护政策并同步给微信之后,开发者才可以调用微信提供的隐私接口。

    2024年02月07日
    浏览(46)
  • 微信小程序用户隐私保护指引fail api scope is not declared in the privacy agreement

    今天突然小程序登录不了,后台报错“The given payload is invalid.”但是小程序这边流程是正确的,绝对没错的,找了半天想起来看看wx.login的报错,结果显示:“fail api scope is not declared in the privacy agreement”,于是就去更新了用户协议,但是更新了还不对,才发现微信 于是就去查

    2024年02月06日
    浏览(178)
  • 【微信小程序】小程序隐私保护指引设置

    首先了解官方提供demo: demo1: 演示使用 wx.getPrivacySetting 和 button open-type=\\\"agreePrivacyAuthorization\\\" 在首页处理隐私弹窗逻辑 https://developers.weixin.qq.com/s/gi71sGm67hK0 demo2: 演示使用 wx.onNeedPrivacyAuthorization 和 button open-type=\\\"agreePrivacyAuthorization\\\" 在多个页面处理隐私弹窗逻辑,同时

    2024年02月10日
    浏览(66)
  • uni-app 微信小程序-完善用户隐私保护指引-(chooseAndUploadFile:fail api scope is not declared in the privacyaereemen

    前言 最近突然发现uni-app上传组件,在微信开发者工具上传图片时候,打开不了文件资源,报错 在体验版和上线版本一样的情况,上传图片的时候打开不了照相机和相册,报的错也是同样 其实这是因为小程序后台没有完善用户隐私保护指引,和对应的api和组件的申请权限 在

    2024年02月06日
    浏览(52)
  • uniapp微信小程序隐私保护指引设置

    隐私政策不做过多阐述具体看公告,公告看不明白的就看下方实现吧,毕竟完成工作为主→_→ 关于小程序隐私保护指引设置的公告 关于小程序隐私保护指引设置的再次公告 在微信公众平台配置隐私保护后,当用户使用小程序时检测是否授权了,让用户授权相关隐私权限,用

    2024年02月02日
    浏览(58)
  • uniapp|微信小程序:隐私保护指引说明

    由于小程序的隐私提示不符合规范,最近收到了警告,如图: 查看详情后知道问题出在隐私提示的方式不够完善,通过查看官方文档后,开始进行整改。 官方文档的整改指引地址:点击查看案例解析及整改指引 为规范开发者的用户个人信息处理行为,保障用户合法权益,小

    2024年01月16日
    浏览(86)
  • uniapp微信小程序《隐私保护协议》弹窗处理流程

    背景 《关于小程序隐私保护指引设置的公告》 《小程序隐私协议开发指南》 流程 1.第一步 必须设置且审核通过!!! 2.第二步 uniapp在manifest.json中添加!!! 很多人前两步没做或者做的不对,导致出现needAuthorization一直为false情况 3.第三步 此处需要根据情况决定,在何时弹

    2024年02月08日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包