微信小程序登录流程新增隐私协议

一,小程序新增隐私协议

1,创建隐私组件 privacy

component/privacy/privacy.js

const app = getApp()
Component({
  /**
     * 组件的初始数据
     */
    data: {
      privacyContractName: '',
      showPrivacy: false
  },
  /**
   * 组件的生命周期
   */
  pageLifetimes: {
    show() {
      const that = this
      wx.getPrivacySetting({
        success(res) {
          if (res.needAuthorization) {
            // 打开隐私弹窗
            that.setData({
                privacyContractName: res.privacyContractName,
                showPrivacy: true
            })
          } else {
            // 用户已经同意过隐私协议,直接执行同意隐私协议的后续操作,比如展示被隐藏的相关功能
            app.agreePrivacy()
          }
        }
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 打开隐私协议页面
    openPrivacyContract() {
      if(wx.openPrivacyContract){
        wx.openPrivacyContract({
          fail: () => {
            wx.showToast({
              title: '遇到错误',
              icon: 'error'
            })
          }
        })
      } else {
        wx.showToast({
          title: '请下载最新的微信客户端', icon: 'none'
        })
      }
    },
    // 拒绝隐私协议
    exitMiniProgram() {
      // 直接退出小程序
      wx.exitMiniProgram()
    },
    // 同意隐私协议
    handleAgreePrivacyAuthorization() {
      const that = this
      wx.requirePrivacyAuthorize({
        success: () => {
          // 用户同意授权
          // 继续小程序逻辑
          that.setData({
            showPrivacy: false
          })
          app.agreePrivacy()
        },
        fail: () => {}, // 用户拒绝授权
        complete: () => {}
      })
    },
  }
})

component/privacy/privacy.wxml

<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="exitMiniProgram">拒绝</button>
            <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization" bindagreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
        </view>
    </view>
</view>

component/privacy/privacy.wxss

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

2,初始页引入隐私组件

pages/index/index.json

{
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "Privacy": "/component/privacy/privacy"
  }
}

pages/index/index.wxml

<view class="container">
  <Privacy></Privacy>
</view>

pages/index/index.js

const app = getApp()

Page({
  data: {
      ...
  },

  onLoad() {
    ...
    // 调用 app.js 里登录方法
    app.doInit()
  },

3,app.js 登录流程

App({
  onLaunch() {

  },
  doInit(callback) {
    // 获取用户信息
    wx.showLoading({
      title: '加载中',
    });
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          wx.hideLoading();
        }
      }
    });
  },

  // 隐私协议-- 点击【同意】按钮
  agreePrivacy() {
    console.log('=====同意隐私协议=====')
    this.getUserInfo()
    this.wxLogin()
  },
  getUserInfo() {
    // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
    wx.getUserInfo({
      success: res => {
        // 可以将 res 发送给后台解码出 unionId
        this.globalData.userInfo = res.userInfo;
        // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
        // 所以此处加入 callback 以防止这种情况
        if (this.userInfoReadyCallback) {
          this.userInfoReadyCallback(res)
        }
      },
      fail:err=>{
        wx.hideLoading();
      }
    })
  },

  // 小程序登录
  wxLogin(){
    // 登录
    wx.login({
      success: res => {
        // 登录接口
        this.login(res);  
      }
    })
  },
  /**
   * 登录接口
   * @param res: 入参
   */
  login(res){
    let that = this
    let data = {
        "jscode": res.code
    }
    const header = {
        'content-type': 'application/x-www-form-urlencoded'
    }
    const url = `${this.globalData.BASE_URL}/auth`;
    wx.request({
      url: url,
      data: data,
      method: 'GET',
      header: header,
      success(res) {
        wx.hideLoading();
        if(res.data.code == '0') {
          that.globalData.loginInfo = res.data
          that.globalData.cookies = res.cookies
          wx.reLaunch({
              url: '../serviceLists/serviceLists'
          })
        } else if(res.data.code == '3' || res.data.code == '4') {
          that.globalData.loginInfo = res.data
          // 登录失败,openid没有绑定手机号,需要走手机号绑定流程
          wx.reLaunch({
            url: '../user-type/user-type'
          })
        } else {
          wx.showModal({
            title: '提示',
            showCancel: false,
            content: res.data.message || res.errMsg || ''
          })
        }
      },
      fail(e) {
        wx.hideLoading();
      }
    })
  },
 globalData: {
    BASE_URL: 'http://127.0.0.1:8082',
    userInfo: Object,
    loginInfo: Object,
    cookies: null
  }
})

二,更新用户隐私保护指引

发现 wx.getUserInfo 获取不到用户信息


wx.getUserInfo错误信息

则在小程序文档里找到左侧的【设置】,【服务内容声明】更新信息


服务隐私保护指引

点击 【增加信息类型】选择 【昵称、头像】,审核结束之后就能通过 wx.getUserInfo 获取用户信息。


增加信息类型
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容