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

一,小程序新增隐私协议

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 获取用户信息。


增加信息类型
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,552评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,666评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,519评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,180评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,205评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,344评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,781评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,449评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,635评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,467评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,515评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,217评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,775评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,851评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,084评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,637评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,204评论 2 341

推荐阅读更多精彩内容