Zugriff auf die Datenschutzvereinbarung des WeChat Mini-Programms

Ab dem 15. September 2023 verlangt WeChat von Entwicklern von Miniprogrammen, die an der Verarbeitung personenbezogener Daten von Benutzern beteiligt sind, dass der Benutzer erst nach der aktiven Synchronisierung mit der Plattform die Datenschutzrichtlinien des Miniprogramms und andere Regeln zur Informationsverarbeitung gelesen und ihnen zugestimmt hat Erst dann können Sie die von WeChat bereitgestellte Datenschutzschnittstelle aufrufen.

Relevante Ankündigungen finden Sie hier: Ankündigung zur Festlegung von Datenschutzrichtlinien für das Miniprogramm | WeChat Open Community

Der entsprechende Prozess wurde in der Ankündigung vorgestellt. Einzelheiten finden Sie im Mini Program Privacy Agreement Development Guide | WeChat Open Documents . Ich werde hier nicht auf Details eingehen. Im Folgenden konzentrieren wir uns auf die Code-Implementierung.

Datenschutzvereinbarung ausgelöst

Zunächst müssen wir wissen, dass, wenn der Benutzer der Datenschutzvereinbarung nicht zugestimmt hat, der Aufruf bestimmter APIs (Einzelheiten siehe: Einführung in die Datenschutzrichtlinien für Benutzer des Miniprogramms | WeChat Open Documents ) das Popup der Datenschutzvereinbarung auslöst -up-Fenster. Dies wird als Auslösen einer Datenschutzvereinbarung bezeichnet. Wenn der Benutzer zustimmt, kann der API-Aufruf weiterhin ausgeführt werden, andernfalls schlägt er fehl. Was wir also zu diesem Zeitpunkt tun müssen, ist, unsere benutzerdefinierte Datenschutzvereinbarungswarnung auf der aktuellen Seite anzuzeigen und eine Lösung zu erhalten. Diese Lösung wird dann aufgerufen, wenn der Benutzer zustimmt oder ablehnt. Der spezifische Code lautet wie folgt:

// page.wxml
<view wx:if="{
   
   {showPrivacy}}">
  <view>隐私弹窗内容....</view>
  <button id="agree-btn" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
</view>

// page.js
Page({
  data: {
    showPrivacy: false
  },
  onLoad() {
    wx.onNeedPrivacyAuthorization(resolve => {
      // 需要用户同意隐私授权时
      // 弹出开发者自定义的隐私授权弹窗
      this.setData({
        showPrivacy: true
      })
      this.resolvePrivacyAuthorization = resolve
    })

    wx.getUserProfile({
      success: console.log,
      fail: console.error
    })
  },
  handleAgreePrivacyAuthorization() {
    // 用户点击同意按钮后
    this.resolvePrivacyAuthorization({ buttonId: 'agree-btn', event: 'agree' })
    // 用户点击同意后，开发者调用 resolve({ buttonId: 'agree-btn', event: 'agree' })  告知平台用户已经同意，参数传同意按钮的id。为确保用户有同意的操作，基础库在 resolve 被调用后，会去检查对应的同意按钮有没有被点击过。检查通过后，相关隐私接口会继续调用
    // 用户点击拒绝后，开发者调用 resolve({ event:'disagree' }) 告知平台用户已经拒绝
  }
})

 Die Schaltfläche „Zustimmen“ muss hier die vom System bereitgestellte Schreibmethode verwenden und eine ID und eine Rückrufmethode angeben. Für die Schaltfläche „Ablehnen“ gelten keine Anforderungen. Stellen Sie sicher, dass Sie die Auflösung hier speichern und sie in Zustimmung und Ablehnung aufrufen, da sonst die Erfolgs- und Fehlerrückrufe der API, die das Datenschutzprotokoll auslösen, nicht ausgeführt werden. Hier liegt ein Problem vor. APIs können auf mehreren Seiten ausgelöst werden, onNeedPrivacyAuthorization kann jedoch nur eine registrieren, und die zuvor registrierte wird von der späteren überschrieben. Wenn die Registrierungsmethode beim Laden geschrieben ist, wird sie daher möglicherweise nicht ausgelöst, wenn die Seite zurückkommt. Daher wird empfohlen, diese Anmeldung während der Messe vorzunehmen. Weitere Informationen zu dieser API finden Sie unter: wx.onNeedPrivacyAuthorization(function listener) | WeChat Open Documentation

Das Popup-Fenster der Datenschutzvereinbarung wird von uns angepasst. Es wird empfohlen, den darin enthaltenen Text gemäß dem offiziellen Beispiel zu verfassen. Um den Namen der Richtlinie zu erhalten, können Sie die wx.getPrivacySetting-API verwenden. Klicken Sie auf die Anleitung, um die Seite mit den Datenschutzvereinbarungen anzuzeigen. Sie können sie selbst schreiben oder die offizielle Seite von WeChat verwenden. Sie müssen nur die Schnittstelle wx.openPrivacyContract aufrufen. Beachten Sie, dass das Lesen der Datenschutzrichtlinie nicht erforderlich ist. Sie können Benutzer also dazu zwingen, sie zu lesen oder nichts zu tun.

proaktive Datenschutzvereinbarung

Das zuvor erwähnte ausgelöste Datenschutzprotokoll ist relativ mühsam: Sie müssen die von diesen sensiblen Schnittstellen aufgerufenen Seiten finden und sie dann alle verarbeiten. Es gibt auch eine proaktive Datenschutzvereinbarung. Eine proaktive Datenschutzvereinbarung bedeutet, dass Sie das Vereinbarungsfenster am Schlüsseleingang aktiv öffnen, sodass Benutzer zustimmen oder ablehnen können. Derzeit gibt es keine Lösung. Dabei gibt es jedoch ein Problem: Wenn der Benutzer auf „Zustimmen“ klickt, sind alle nachfolgenden API-Aufrufe erfolgreich und sowohl Benutzer als auch Entwickler sind zufrieden. Falls der Benutzer sich jedoch weigert und Sie sich nicht bei NeedPrivacyAuthorization registrieren und nicht ordnungsgemäß damit umgehen, schlagen nachfolgende Aufrufe fehl. Der faule Ansatz besteht derzeit darin, das Miniprogramm zu beenden, nachdem der Benutzer dies abgelehnt hat. Dieser Ansatz bietet jedoch keine gute Erfahrung. Wir sollten unser Bestes geben, um Benutzern die Nutzung anderer Funktionen zu ermöglichen. Schließlich sind uns diese beteiligten APIs möglicherweise egal. Beispielsweise können Benutzer einfach keine Bilder hoch- und herunterladen, und dies sind nicht die Kernfunktionen unseres Miniprogramms.

Komponentenimplementierung

Im Hinblick auf die Benutzererfahrung wird bei kleinen Programmen, die viele relevante APIs verwenden, empfohlen, die Datenschutzvereinbarung am Eingang aktiv anzuzeigen, um Auslassungen und einige Sonderszenarien zu vermeiden. Für kleine Programme mit geringerer Nutzung kann ein getriggertes Datenschutzprotokoll verwendet werden. Was auch immer wir tun, wir kapseln es als Komponente.

Der UI-Teil ist nichts Besonderes. Suchen wir eine gut geschriebene Implementierung ähnlich dem WeChat-Stil:

 Verwandter Seitencode:

<view class="privacy" wx:if="{
   
   {showPrivacy}}">
    <view class="content">
        <view class="title">隐私保护指引</view>
        <view class="des">
            在使用当前小程序服务之前，请仔细阅读<text class="link" bind:tap="openPrivacyContract">{
   
   {privacyContractName}}</text>。如你同意{
   
   {privacyContractName}}，请点击“同意”开始使用。
        </view>
        <view class="btns">
            <button class="item reject" bind:tap="refusePrivacy">拒绝</button>
            <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
        </view>
    </view>
</view>

.privacy {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 632rpx;
  padding: 48rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16rpx;
}

.content .title {
  text-align: center;
  color: #333;
  font-weight: bold;
  font-size: 32rpx;
}

.content .des {
  font-size: 26rpx;
  color: #666;
  margin-top: 40rpx;
  text-align: justify;
  line-height: 1.6;
}

.content .des .link {
  color: #07c160;
  text-decoration: underline;
}

.btns {
  margin-top: 48rpx;
  display: flex;
}

.btns .item {
  justify-content: space-between;
  width: 244rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  box-sizing: border-box;
  border: none;
}

.btns .reject {
  background: #f4f4f5;
  color: #909399;
}

.btns .agree {
  background: #07c160;
  color: #fff;
}

In der Komponentenimplementierung haben wir drei Attribute deklariert. forceShow wird für aktive Datenschutzprotokolle verwendet. Wenn es auf true gesetzt ist, kann die Anzeige erzwungen werden. Bei „false“ wird die Komponentenanzeige durch den registrierten Rückruf ausgelöst, bei dem es sich um ein ausgelöstes implizites Protokoll handelt. forceRead steuert, ob der Benutzer das Lesen des Protokolls erzwingen muss. ExitOnRefuse bezieht sich darauf, ob das Beenden des Applets erzwungen werden muss, wenn der Benutzer dies ablehnt. Wenn wir die Seite anzeigen, registrieren Sie die Datenschutzvereinbarung, um einen Rückruf auszulösen, und rufen Sie getPrivacySetting auf, um den Namen der Vereinbarung zu erhalten. Hier werden die pageLifetimes der Komponente verwendet. Der nächste Schritt besteht darin, die Rückrufe zum Öffnen der Vereinbarung, Zustimmen und Ablehnen zu implementieren. Bei den Zustimmungs- und Ablehnungsrückrufen müssen wir feststellen, ob die Lösung gespeichert wurde. Wenn ja, wird sie ausgelöst und muss aufgerufen werden. Nachdem der Anruf abgeschlossen ist, wird er sofort gelöscht. Da wir zwischen diesen beiden Datenschutzprotokollen unterscheiden können, zeigen wir bei der Ablehnung unterschiedliche Fehlermeldungen an: Beim proaktiven Protokoll sagen wir, dass einige Funktionen nicht verfügbar sind. Bei ausgelösten Funktionen sagen wir einfach, dass die Funktion nicht verfügbar ist.

Der vollständige js-Code lautet wie folgt:

Component({
  options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },
  /**
   * 组件的属性列表
   */
  properties: {
    forceShow: {
      type: Boolean,
      value: false
    },
    forceRead: {
      type: Boolean,
      value: false
    },
    exitOnRefuse: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    privacyContractName: '',
    showPrivacy: false,
    _isRead: false
  },
  /**
   * 组件的生命周期
   */
  pageLifetimes: {
    show() {
      const that = this
      wx.onNeedPrivacyAuthorization(resolve => {
        that.resolvePrivacyAuthorization = resolve
        that.setData({
          showPrivacy: true
        })
      })
      wx.getPrivacySetting({
        success(res) {
          that.setData({
            privacyContractName: res.privacyContractName,
            //仅在需要授权的时候才显示，处理多个tab切换每个页面都显示的问题
            showPrivacy: that.data.forceShow && res.needAuthorization
          })
        }
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 打开隐私协议页面
    openPrivacyContract() {
      const that = this
      wx.openPrivacyContract({
        success: () => {
          that.setData({
            _isRead: true
          })
        },
        fail: () => {
          wx.showToast({
            title: '指引打开失败',
            icon: 'error'
          })
        }
      })
    },
    // 拒绝隐私协议
    refusePrivacy() {
      if(this.data.exitOnRefuse){
        // 直接退出小程序
        wx.exitMiniProgram()
        return
      }
      let tips = ""
      if (this.resolvePrivacyAuthorization) {
        this.resolvePrivacyAuthorization({
          event: 'disagree'
        })
        this.resolvePrivacyAuthorization = null
        tips = '该功能不可用'
      } else {
        tips = '部分功能不可用'
      }
      this.setData({
        showPrivacy: false
      })
      wx.showToast({
        title: tips,
        icon: 'error'
      })
    },
    // 同意隐私协议
    handleAgreePrivacyAuthorization() {
      const {
        _isRead,
        forceRead
      } = this.data
      if (_isRead || !forceRead) {
        if (this.resolvePrivacyAuthorization) {
          this.resolvePrivacyAuthorization({
            buttonId: 'agree-btn',
            event: 'agree'
          })
          this.resolvePrivacyAuthorization = null
        }
        this.setData({
          showPrivacy: false
        })
      } else {
        wx.showToast({
          title: '请先阅读指引',
          icon: 'error'
        })
      }
    },
  },

  observers: {
    "forceShow": function (forceShow) {
      this.setData({
        showPrivacy: forceShow
      })
    }
  }
})

Die Verwendung der gesamten Komponente ist sehr einfach und muss nur in die JSON-Datei der entsprechenden Seite eingeführt werden. Wenn viele Seiten beteiligt sind, können Sie dies auch in der globalen Komponentenkonfiguration des Miniprogramms einführen:

{

  "usingComponents": {
    "Privacy": "/components/privacy/privacy"
  }
}

Und führen Sie es in allen relevanten wxml ein:

<Privacy/>

Hier sind die Renderings und ein Teil des Codes als Referenz: GitHub – 94xy/miniprogram-privacy: Popup-Komponente zum Schutz der Privatsphäre des Miniprogrammbenutzers zum Ausdrucken von Dank.