Acceso al Acuerdo de Privacidad del Mini Programa WeChat

A partir del 15 de septiembre de 2023, para los desarrolladores de miniprogramas involucrados en el procesamiento de información personal de los usuarios, WeChat requiere que solo después de que el desarrollador se sincronice activamente con la plataforma, el usuario haya leído y aceptado las pautas de protección de privacidad del miniprograma y otras reglas de procesamiento de información. Solo entonces podrá llamar a la interfaz de privacidad proporcionada por WeChat.

Para anuncios relevantes, consulte: Anuncio sobre el establecimiento de pautas de protección de privacidad del miniprograma | Comunidad abierta de WeChat

El proceso relevante se introdujo en el anuncio. Para obtener más información, consulte la Guía de desarrollo del acuerdo de privacidad del miniprograma | Documentos abiertos de WeChat . No entraré en detalles aquí. A continuación nos centraremos en la implementación del código.

Acuerdo de privacidad activado

En primer lugar, lo que debemos saber es que si el usuario no ha aceptado el acuerdo de privacidad, llamar a ciertas API (para obtener más detalles, consulte: Introducción a las pautas de protección de la privacidad del usuario del miniprograma | Documentos abiertos de WeChat ) activará la ventana emergente del acuerdo de privacidad. ventana arriba. Esto se llama activar el acuerdo de privacidad. Si el usuario está de acuerdo, la llamada API puede continuar ejecutándose; de ​​lo contrario, fallará. Entonces, lo que tenemos que hacer en este momento es mostrar nuestra alerta de acuerdo de privacidad personalizada en la página actual y recibir una resolución. Luego se llama a esta resolución cuando el usuario está de acuerdo o rechaza. El código específico es el siguiente:

// 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' }) 告知平台用户已经拒绝
  }
})

 El botón de aceptar aquí debe utilizar el método de escritura proporcionado por el sistema y debe especificar una identificación y un método de devolución de llamada. El botón de rechazar no tiene requisitos. Asegúrese de guardar la resolución aquí y llamarla en consentimiento y rechazo; de lo contrario, las devoluciones de llamada de éxito y fracaso de la API que activan el protocolo de privacidad no se realizarán. Hay un problema aquí: las API pueden activarse en varias páginas, pero onNeedPrivacyAuthorization solo puede registrar una, y la registrada anteriormente será sobrescrita por la posterior. Por lo tanto, si el método de registro está escrito en la carga, es posible que no se active cuando regrese la página. Por lo tanto, se recomienda que esta inscripción se registre durante la feria. Para obtener más información sobre esta API, consulte: wx.onNeedPrivacyAuthorization(función de escucha) | Documentación abierta de WeChat

Personalizamos la ventana emergente del acuerdo de privacidad. Se recomienda escribir el texto que contiene según el ejemplo oficial. Para obtener el nombre de la directriz, puede utilizar la API wx.getPrivacySetting. Haga clic en la guía para ver la página del acuerdo de privacidad. Puede escribirla usted mismo o puede utilizar la página oficial proporcionada por WeChat. Solo necesita llamar a la interfaz wx.openPrivacyContract. Tenga en cuenta que no es necesario leer la política de privacidad, por lo que puede obligar a los usuarios a leerla o no hacer nada.

acuerdo de privacidad proactivo

El protocolo de privacidad activado del que hablamos antes es relativamente problemático: hay que encontrar las páginas llamadas por estas interfaces sensibles y luego procesarlas todas. También existe un acuerdo de privacidad proactivo. Un acuerdo de privacidad proactivo significa que usted abre activamente la ventana del acuerdo en la entrada clave, lo que permite a los usuarios aceptar o rechazar. No hay ninguna resolución en este momento. Pero hay un problema con esto: si el usuario hace clic para aceptar, todas las llamadas API posteriores serán exitosas y tanto los usuarios como los desarrolladores estarán contentos. Pero en caso de que el usuario se niegue, si no se registra en NeedPrivacyAuthorization y lo maneja adecuadamente, las llamadas posteriores fallarán. El método perezoso en este momento es salir del miniprograma después de que el usuario se niega, pero este método no proporciona una buena experiencia. Deberíamos hacer todo lo posible para permitir que los usuarios utilicen otras funciones. Después de todo, es posible que no nos importen mucho estas API involucradas. Por ejemplo, los usuarios simplemente no pueden cargar ni descargar imágenes, y estas no son las funciones principales de nuestro mini programa.

Implementación de componentes

En términos de experiencia de usuario, para programas pequeños que utilizan muchas API relevantes, para evitar omisiones y algunos escenarios especiales, se recomienda mostrar activamente el acuerdo de privacidad en la entrada. Para programas pequeños con menos uso, se puede utilizar un protocolo de privacidad activado. Hagamos lo que hagamos, lo encapsulamos como un componente.

No hay nada especial en la parte de la interfaz de usuario. Busquemos una implementación bien escrita similar al estilo WeChat:

 Código de página relacionado:

<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;
}

En la implementación del componente, declaramos tres atributos. forceShow se usa para protocolos de privacidad activos. Cuando se establece en verdadero, se puede forzar su visualización. Cuando es falso, la visualización del componente se activa mediante la devolución de llamada registrada, que es un protocolo implícito activado. forceRead controla si el usuario necesita forzar la lectura del protocolo. exitOnRefuse se refiere a si es necesario forzar la salida del subprograma cuando el usuario se niega. Cuando mostramos la página, registramos el acuerdo de privacidad para activar la devolución de llamada y llamamos a getPrivacySetting para obtener el nombre del acuerdo. Aquí se utilizan los tiempos de vida de la página del componente. El siguiente paso es implementar las devoluciones de llamada para abrir el acuerdo, aceptar y rechazar. En las devoluciones de llamada de consentimiento y rechazo, debemos determinar si la resolución se ha guardado. Si es así, se activa y debe llamarse. Una vez completada la llamada, se borrará inmediatamente. Como podemos distinguir entre estos dos protocolos de privacidad, mostramos diferentes mensajes de error al rechazar: para el proactivo, decimos que algunas funciones no están disponibles. Para los activados, simplemente decimos que la función no está disponible.

El código js completo es el siguiente:

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
      })
    }
  }
})

El uso de todo el componente es muy simple y solo necesita introducirse en el archivo json de la página correspondiente. Si hay muchas páginas involucradas, también puedes introducirlas en la configuración de componentes globales del mini programa:

{

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

E introdúzcalo en todos los wxml relevantes:

<Privacy/>

Aquí están las representaciones y parte del código como referencia: GitHub - 94xy/miniprogram-privacy: componente emergente de autorización de protección de privacidad del usuario del mini programa para expresar agradecimiento.