当前位置: 首页 > news >正文

uniapp微信小程序用户隐私保护

使用wx.requirePrivacyAuthorize实现微信小程序用户隐私保护。

一、前言

微信小程序官方出了一个公告《关于小程序隐私保护指引设置的公告》。不处理的话,会导致很多授权无法使用,比如头像昵称、获取手机号、位置、访问相册、上传图片视频、访问剪切板内容等等,具体详见《小程序用户隐私保护指引内容介绍》 。

二、隐私相关设置

1、在 微信小程序后台的【设置】- 【服务内容与声明】 ,设置好用户隐私保护指引。

比如:上传头像报错如下。

chooseAvatar:fail api scope is not declared in the privacy agreement。

注意事项

隐私协议里,需要添加对应权限,否则权限对应api的不会生效!!!

隐私协议里,需要添加对应权限,否则权限对应api的不会生效!!!

隐私协议里,需要添加对应权限,否则权限对应api的不会生效!!!

2、打开uniapp 项目的 manifest.json ,选择【源码视图】, 添加配置如下配置

"mp-weixin": {"__usePrivacyCheck__": true, //隐私政策},

3、设置微信开发者工具的调试基础库,最低2.33.0

 

三、解决方案

1)验证用户是否已经隐私授权

使用wx.requirePrivacyAuthorize() 接口,验证用户之前已经同意过隐私授权

onReady() {var _this = this;// 隐私政策wx.getPrivacySetting({success: res => {// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }console.log(res)if (res.needAuthorization) {// 需要弹出隐私协议_this.$refs.privacy.privacyShow = true;return;} else {// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用隐私接口}},fail: () => {},complete:() => {}})
},

 如果needAuthorization返回值为true,则需要用户进行隐私授权。

2)index引入组件

<template><view><!-- 用户隐私保护指引弹窗租金 --><UserPrivacy ref="privacy"></UserPrivacy></view>
</template><script>
import UserPrivacy from "@/components/user/userPrivacy.vue";export default {components: {UserPrivacy},data() {return {// 隐私设置弹窗开关privacyShow: false,}},onReady() {var _this = this;// #ifdef MP-WEIXIN// 隐私政策wx.getPrivacySetting({success: res => {// 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }console.log(res)if (res.needAuthorization) {// 显示用户隐私组件弹窗_this.$refs.privacy.privacyShow = true;return;} else {// 用户已经同意过隐私协议,所以不需要再弹出隐私协议,也能调用隐私接口// 调用授权位置接口_this.getLocation();}},fail: () => {},complete:() => {}})// #endif,methods: {// 获取当前位置getLocation() {let _this = this;var mapkey = uni.getStorageSync('webConfig').web_config_str.mapkey;uni.getFuzzyLocation({type: 'gcj02', //国测局坐标gcj02geocode: true, //是否解析地址信息,仅App平台支持isHighAccuracy: true, //开启高精度定位success(res) {console.log('==获取当前位置的经纬度-成功==');console.log(res);_this.longitude = res.longitude;_this.latitude = res.latitude;// 设置经纬度缓存uni.setStorageSync('longitude', res.longitude);uni.setStorageSync('latitude', res.latitude);// 引入腾讯地图SDK核心类var QQMapWX = require('@/util/qqmap-wx-jssdk.min.js');var qqmapsdk = new QQMapWX({key: mapkey,});// 根据经纬度获取所在位置qqmapsdk.reverseGeocoder({location: {longitude: res.longitude,latitude: res.latitude,},success: function(res) {console.log("==根据经纬度获取所在位置==");console.log(res);_this.city = res.result.ad_info.city;// 设置城市缓存uni.setStorageSync('province', res.result.ad_info.province);uni.setStorageSync('city', res.result.ad_info.city);uni.setStorageSync('district', res.result.ad_info.district);uni.setStorageSync('address', res.result.address);}});},fail(err) {console.log('获取当前位置的经纬度-失败');// 设置默认城市、经纬度}});},}
}
</script>

3)  弹窗组件代码

<template><view><!-- 隐私保护指引弹窗 --><u-popup v-model="privacyShow" mode="center" width="600rpx" border-radius="20" :mask-close-able="false"><view class="privacyBox"><view class="privacyTit">用户隐私保护提示</view><view class="privacyDesc">感谢您的使用,在使用本小程序前,应当阅读并同意<text@click="openClick">《用户隐私保护指引》</text>。当您点击同意并开始使用程序服务时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法进入小程序。</view><view class="privacyPost"><view class="refuseBtn"><navigator target="miniProgram" open-type="exit">不同意并退出</navigator></view><button class="agreeBtn" open-type="agreePrivacyAuthorization"@agreeprivacyauthorization="agreeClick">同意并继续</button></view></view></u-popup></view>
</template><script>export default {data() {return {// 隐私设置弹窗开关privacyShow: false,}},onReady() {},methods: {// 打开隐私协议openClick() {wx.openPrivacyContract({success: () => {}, // 打开成功fail: () => {}, // 打开失败complete: () => {}})},// 同意agreeClick() {// 用户点击了同意,之后所有已声明过的隐私接口和组件都可以调用了this.privacyShow = false;// 重新授权定位,调取父组件方法this.$parent.getLocation();},}}
</script><style scoped lang="scss">.privacyBox {width: 600rpx;padding: 60rpx;box-sizing: border-box;}.privacyTit {font-size: 32rpx;font-weight: bold;color: $uni-text-main;text-align: center;overflow: hidden;}.privacyDesc {font-size: 28rpx;color: $uni-text-sub;overflow: hidden;margin-top: 30rpx;}.privacyDesc text {color: $uni-primary;}.privacyPost {overflow: hidden;margin-top: 60rpx;display: flex;justify-content: center;align-items: center;}.privacyPost .refuseBtn {flex: 1;height: 80rpx;line-height: 80rpx;text-align: center;font-size: 28rpx;font-weight: bold;color: #fff;background: $uni-info-dark;border-radius: 40rpx;box-sizing: border-box;overflow: hidden;}.privacyPost .agreeBtn {flex: 1;height: 80rpx;line-height: 80rpx;text-align: center;font-size: 28rpx;font-weight: bold;color: #fff;background: $uni-primary;border-radius: 40rpx;box-sizing: border-box;overflow: hidden;margin-left: 20rpx;}
</style>

 ps:弹窗组件框架,本人用的uView1版本。底层遮罩样式,可自行用view代替。

4)弹窗效果图

四、思路总结

1、调用wx.getPrivacySetting来确认用户是否进行过隐私授权。

2、如果已授权,直接调用位置接口、上传头像接口、上传图片视频接口等等;否则,显示弹窗,让用户进行授权。

五、处理不生效方法

http://www.lryc.cn/news/158524.html

相关文章:

  • 虚幻引擎4中关于设置关于体坐标系下的物体速度的相关问题
  • 16 | Spark SQL 的 UDF(用户自定义函数)
  • 蓝桥杯官网填空题(土地测量)
  • 【Java项目实战】牛客网论坛项目1 - Spring入门与初识SpringMVC
  • Gurobi使用(一)——操作指南(转自知乎)
  • 计算机网络的故事——简单的HTTP协议
  • 新能源商用车软件开发设计规范
  • Json“牵手”当当网商品详情数据方法,当当商品详情API接口,当当API申请指南
  • lazarus开发界面程序用线程显示进度条
  • 解决VSCode下载速度特别慢的问题
  • 国家矿山安全监察局关于露天矿山边坡监测系统建设及预警响应要求
  • 前端使用elementui开发后台管理系统的常用功能(持续更新)
  • 中东 Shopify 如何使用 Bytebase 构建一站式数据库开发工作流
  • 谷歌Chrome庆祝15周年,推出全新设计!了解最新信息!
  • 解决Oracle SQL语句性能问题——SQL语句改写(分析函数、with as、union及or)
  • Linux之SELinux
  • Acwing算法心得——街灯(差分)
  • streamlit执行报错WARNING,重新安装碰到问题如何解决
  • 《C++设计模式》——行为型
  • 什么是原生IP?原生IP与住宅IP有何区别?
  • element-plus 表格-自定义样式实现
  • MVCC
  • 你不知道的JavaScript---对象
  • C++项目实战——基于多设计模式下的同步异步日志系统-①-项目介绍
  • 解决Oracle数据库中日期格式不识别的问题
  • 一生一芯13——linux设置环境变量
  • CSS笔记(黑马程序员pink老师前端)定位
  • C高级Linux指令和shell脚本
  • 449. 序列化和反序列化二叉搜索树
  • DockerCompose部署es和kibana