Article directory
Foreword : The official announcement is that starting from September 15, 2023, for mini program developers involved in processing users’ personal information, only if the developer actively synchronizes the information to the platform that the user has read and agreed to the privacy protection guidelines of the mini program and other information processing After setting the rules, you can call the privacy interface provided by WeChat.
Therefore : before September 15th, mini programs related to user privacy need to be rectified, otherwise the use of some privacy-related functions will be stopped.
Privacy interfaces involved: Introduction to Mini Program User Privacy Protection Guidelines
Official Document: Mini Program Privacy Agreement Development Guide
Note: Based on the official development guide, there are two processing solutions, one is active query and the other is passive monitoring. I use passive monitoring in my project. The specific implementation plan is given below. You can do it according to your own needs. development.
premise:__usePrivacyCheck__: true
- Before September 15, 2023, after configuring in app.json
__usePrivacyCheck__: true, privacy-related functions will be enabled. If not configured or configured to false, they will not be enabled. - After September 15, 2023,
__usePrivacyCheck__privacy-related features will be enabled regardless of whether there is any configuration in app.json.
So , when debugging this function before September 15th, it needs to be configured __usePrivacyCheck__: true. The uniapp project has the following example:
Step 1. Encapsulate the pop-up component
: This project is written in uniapp and encapsulates a privacy agreement pop-up component. Which page needs to be directly introduced? Create a new showPrivacyAgreement.vue component. showPrivacyAgreement.vue
file
<template>
<uni-popup ref="privacyPopup" type="center" :is-mask-click="true">
<view class="privacyPopup">
<view class="title">
<view class="title_circle"></view>
<view>惠享服务圈</view>
</view>
<view class="content_pri">
<text>在你使用【惠享服务圈】服务之前，请仔细阅读</text>
<text style="color: #1793ee;" @click="goToPrivacy">《惠享服务圈小程序隐私保护指引》</text>。
<text>如你同意惠享服务圈小程序隐私保护指引，请点击“同意”开始使用【惠享服务圈】。</text>
</view>
<view class="pri_btn">
<button class="confuse_btn" @click="confusePrivacy">拒绝</button>
<button class="confirm_btn" id="agree-btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
</view>
</view>
</uni-popup>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
init(resolve){
this.$refs.privacyPopup.open()
this.resolvePrivacyAuthorization = resolve
},
// 打开隐私协议
goToPrivacy(){
wx.openPrivacyContract({
success: () => {
console.log('打开成功');
}, // 打开成功
fail: () => {
uni.showToast({
title:'打开失败，稍后重试',
icon: 'none'
})
} // 打开失败
})
},
// 拒绝
confusePrivacy(){
this.$refs.privacyPopup.close()
this.resolvePrivacyAuthorization({
event:'disagree' })
},
// 同意
handleAgreePrivacyAuthorization(){
// 告知平台用户已经同意，参数传同意按钮的id
this.resolvePrivacyAuthorization({
buttonId: 'agree-btn', event: 'agree' })
this.$refs.privacyPopup.close()
}
}
}
</script>
<style>
*{
box-sizing: border-box;
}
.privacyPopup{
width: 520rpx;
/* height: 500rpx; */
background-color: #fff;
border-radius: 50rpx;
padding: 20rpx 40rpx;
}
.title{
display: flex;
align-items: center;
justify-content: start;
margin: 20rpx 0;
font-size: 38rpx;
font-weight: 600;
}
.title .title_circle{
width: 60rpx;
height: 60rpx;
background-color: #efefef;
border-radius: 50%;
margin-right: 20rpx;
}
.content_pri{
width: 480rpx;
margin: 0 auto;
font-size: 34rpx;
line-height: 1.5;
}
.pri_btn{
width: 100%;
height: 158rpx;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.pri_btn .confuse_btn,.pri_btn .confirm_btn{
width: 200rpx;
height: 90rpx;
border-radius: 20rpx;
font-size: 34rpx;
}
.pri_btn .confuse_btn{
background-color: #eee;
color: #52bf6b;
}
.pri_btn .confirm_btn{
background-color: #52bf6b;
color: #fff;
}
</style>
Step 2. Single page reference
Note : Every page that needs to obtain user privacy needs to introduce a privacy pop-up window. If the user clicks the agree button, it will not pop up again when other pages want to obtain privacy; if they refuse, it will appear on every page that needs to obtain privacy. Pop-up window confirms.
Just choose one of the two methods.
1. Passive monitoring
用到的接口：
wx.onNeedPrivacyAuthorization：监听何时需要提示用户阅读隐私政策
wx.openPrivacyContract：跳转到隐私协议页面
As follows, I demonstrate the introduction of a page. Other pages useful for privacy can be introduced in the same way:
<template>
<view>
<!-- 隐私协议弹窗 -->
<showPrivacyAgreement ref="showPrivacy" :visible.sync="privacyVisible"></showPrivacyAgreement>
</view>
</template>
<script>
import showPrivacyAgreement from '../components/showPrivacyAgreement.vue'
export default {
components: {
showPrivacyAgreement
},
data() {
return {
privacyVisible: false,
}
},
onShow(){
if(wx.onNeedPrivacyAuthorization){
wx.onNeedPrivacyAuthorization(resolve => {
// 需要用户同意隐私授权时
// 弹出开发者自定义的隐私授权弹窗
this.privacyVisible = true
this.resolvePrivacyAuthorization = resolve
this.$refs.showPrivacy.init(resolve)
})
return
}
},
}
</script>
The effect of this method is that when you click on an interface that requires privacy access on the page, such as when obtaining a photo album, a window will automatically pop up. Only after you agree can you obtain the photo album.
Rendering :
Note : When you click on the blue font agreement, you will automatically jump to the privacy agreement protection guide page of your own mini program.
2. Active inquiry
用到的接口：
wx.onNeedPrivacyAuthorization：查询隐私授权情况
wx.openPrivacyContract：跳转到隐私协议页面
<template>
<view>
<!-- 隐私协议弹窗 -->
<showPrivacyAgreement ref="showPrivacy" :visible.sync="privacyVisible"></showPrivacyAgreement>
</view>
</template>
<script>
import showPrivacyAgreement from '../components/showPrivacyAgreement.vue'
export default {
components: {
showPrivacyAgreement
},
data() {
return {
privacyVisible: false,
}
},
onShow(){
wx.getPrivacySetting({
success: res => {
console.log(res)
if (res.needAuthorization) {
// 需要弹出隐私协议
this.privacyVisible = true
this.$refs.showPrivacy.init()
}
},
fail: () => {
}
})
},
}
</script>
Explanation: When entering the page, call the wx.getPrivacySetting interface to obtain the following content. Use needAuthorization to determine whether the user has privacy policy information to be agreed. If the user has not authorized it, it will return true. If the user clicks to agree, it will return false. , if true, a pop-up window will pop up to confirm.
Note: For active query interfaces, when the user clicks to reject, subsequent calls to the relevant interface will fail. Therefore, when the user clicks to reject, they can directly exit the mini program or return to the homepage, prompting the user that they cannot use it if they reject, etc.
Tips: The above interface can be called only when the WeChat developer tool basic library version reaches 2.32.3 or above.
Message: Come and debug as soon as possible. It will be online soon. If you don’t understand anything, you can leave a message in the comment area and let’s discuss it together. If it is helpful, I hope Sanlian can support it~