微信小程序隐私授权教程

课程 : 《uni-app 开发技巧集合》

返回课程

微信小程序隐私授权要求

微信小程序在 2023年9月15日之后涉及处理用户个人信息的小程序开发者，需通过弹窗等明显方式提示用户阅读隐私政策等收集使用规则。我们在使用小程序与用户隐私相关接口（如 : 获取用户信息、相册使用等）时需要用户授权才能正常调用。

官方说明

https://developers.weixin.qq.com/miniprogram/dev/framework/user-privacy/PrivacyAuthorize.html

微信小程序隐私授权接入流程

1. 配置《小程序用户隐私保护指引》

开发者需在「小程序管理后台」配置《小程序用户隐私保护指引》，详细指引可见：用户隐私保护指引填写说明。

需要注意的是，仅有在指引中声明所处理的用户信息，才可以调用平台提供的对应接口或组件。若未声明，对应接口或组件将直接禁用。隐私接口与对应的处理的信息关系可见：小程序用户隐私保护指引内容介绍。

此步骤需要填写《用户隐私保护指引设置》，填写完成后等待微信官方审核。

2. 主动查询隐私授权同步状态以及展示隐私协议

从基础库 2.32.3 开始支持

开发者可通过 wx.getPrivacySetting 接口，查询微信侧记录的用户是否有待同意的隐私政策信息。该信息可通过返回结果 res 中的 needAuthorization 字段获取。uni-app 示例代码 :

<script>
export default {
	data() {
		return {
			showPrivacy : false,
			resolvePrivacyAuthorization : null
		}
	},
	onLoad:function(){
		// #ifdef MP-WEIXIN
		wx.getPrivacySetting({
			success: res => {
				console.log(res) 
				// 返回结果为: 
				// res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
			},
			fail: () => {},
			complete: () => {}
		})
		// #endif
	},
	methods: {
	}
}
</script>

同时，wx.getPrivacySetting 接口会返回开发者在小程序管理后台配置的《小程序用户隐私保护指引》名称信息，开发者可以调用 wx.openPrivacyContract 接口打开该页面。

3. 弹窗提醒用户授权

如果存在有待用户同意的隐私政策信息，开发者需要主动提示用户阅读隐私政策等收集使用规则，对于提示方式，小程序开发者可自行设计，同时需要在相关界面中使用 <button open-type="agreePrivacyAuthorization"> 组件，当用户轻触该 <button> 组件后，表示用户已阅读并同意小程序的隐私政策等收集使用规则，微信会收到该同步信息，此时开发者可以在该组件的 bindagreeprivacyauthorization 事件回调后调用已声明的隐私接口。

uni-app + graceUI 6 示例代码:

<template>
	<gui-page>
		<template v-slot:gBody>
			<view class="">页面内容</view>
			
			<!-- #ifdef MP-WEIXIN -->
			<!-- 隐私授权弹窗 -->
			<gui-modal 
			ref="guimodal" 
			width="660rpx" 
			:isCloseBtn="false" 
			title="用户隐私保护提示">
				<template v-slot:content>
					<scroll-view
					scroll-y 
					:style="{height:contentHeight+'px'}"
					class="gui-bg-gray gui-dark-bg-level-2">
						<view style="padding:50rpx 30rpx;">
							<view class="">
								<text class="gui-block gui-text">感谢您使用**小程序，请阅读并同意</text>
							</view>
							<view style="padding:35rpx 0;">
								<text class="gui-color-blue gui-h5" @tap="openXY">《用户隐私保护指引》点击打开</text>
							</view>
							<view>
								<text class="gui-block gui-text">当您点击同意并开始时用产品服务时，即表示你已理解并同息该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法正常使用**小程序。</text>
							</view>
						</view>
					</scroll-view>
				</template>
				<template v-slot:btns>
					<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
					<view class="gui-flex gui-rows gui-space-between">
						<text
						class="modal-btns gui-block-text gui-color-gray" 
						@tap="disagree">不同意</text>
						<button 
						type="default" 
						class="gui-button gui-noborder modal-btns" 
						id="agree-btn" 
						:plain="true" 
						open-type="agreePrivacyAuthorization" 
						@agreeprivacyauthorization="handleAgreePrivacyAuthorization">
							<text 
							class="gui-color-green gui-button-text">同意</text>
						</button>
					</view>
				</template>
			</gui-modal>
			<!-- #endif -->
		</template>
	</gui-page>
</template>
<script>
import graceJS from '@/Grace6/js/grace.js';
export default {
	data() {
		return {
			showPrivacy : false,
			resolvePrivacyAuthorization : null
		}
	},
	onLoad:function(){
		// #ifdef MP-WEIXIN
		wx.getPrivacySetting({
			success: res => {
				console.log(res) 
				// 返回结果为: 
				// res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
				// 需要授权
				if (res.needAuthorization){
					graceJS.getRefs('guimodal', this, 0, (ref)=>{
						// 获取到 ref
						ref.open();
					});
				}
			},
			fail: () => {},
			complete: () => {}
		})
		// #endif
	},
	methods: {
		// #ifdef MP-WEIXIN
		openXY : function(){
			wx.openPrivacyContract();
			// 真机测试会打开协议页面
		},
		handleAgreePrivacyAuthorization:function(){
			this.$refs.guimodal.close();
		},
		disagree:function(){
			this.$refs.guimodal.close();
		}
		// #endif
	}
}
</script>
<style scoped>
.modal-btns{line-height:88rpx; font-size:26rpx; text-align:center; width:200rpx;}
</style>

提示

点击微信开发者工具清缓存 > 清除全部缓存可以重置授权，进行测试。