专栏首页OECOM微信小程序获取用户信息

微信小程序获取用户信息

在微信小程序中,如果想获取用户的昵称等信息可以不用另外写后台,如果需要获取用户的unionId,则需要后台来提供获取sessionKey和解码encryptedData。

获取不含unionId信息

wx.getUserInfo(OBJECT) 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用

 <button wx:if="{{!hasUserInfo}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
 获取用户信息 </button>

引导用户主动进行授权操作,需要注意: 1.当用户未授权过,调用该接口将直接进入fail回调 2.当用户授权过,可以使用该接口获取用户信息 js部分代码为:

getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

当用户点击按钮时则会弹出授权操作的按钮,用户通过授权后即可返回用户的信息,这些信息不包含unionId和openid。在app.js中可以判断用户是否授权过,如果授权过则不再进行授权,在有效期内科直接获取用户的信息

onLunch(){
 // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          console.log("获取");
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
              console.log(res);
              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
}

至此简单的获取用户信息则完成了。

获取unionid

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。需要注意的一点是如果要获取unionid,则需要将小程序关联到微信开放平台,同时是已经认证过的账号。

登录流程时序

说明: 小程序调用wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。

开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。

接下来先看小程序端的代码执行 app.js

onLaunch: function () {
    var self = this;
    // 登录
    wx.login({
      success: function (res) {
        if (res.code) {
          //发起网络请求
          wx.request({
            url: 'http://172.19.22.50:3000/api/wxUserInfo',
            //获取session_key用于获取unionid
            data: {
              code: res.code
            },
            success: function (data) {
              console.log(data);
              wx.setStorageSync('session_key', data.data.session_key)
            }
          })
        } else {
          console.log('登录失败!' + res.errMsg)
        }
      }
    });
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
          console.log("获取");
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo
              var session_key = wx.getStorageSync('session_key');
              self.getUnid(res.encryptedData, res.iv, session_key);
              console.log(res);
              // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  //获取unionid方法,
  getUnid(encryptedData, iv, session_key){
    wx.request({
      url: 'http://172.19.22.50:3000/api/decodeUserInfo',
      data: {
        encryptedData: encryptedData,
        iv: iv,
        sessionKey: session_key
      },
      success: function (data) {
        console.log(data);
      }
    })
  }

在调用登录的页面还是需要一个点击获取用户信息的按钮

 <button wx:if="{{!hasUserInfo}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
 获取用户信息 </button>

js部分

getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
    var session_key = wx.getStorageSync('session_key');
    var encryptedData = e.detail.encryptedData;
    var iv = e.detail.iv;
    app.getUnid(encryptedData, iv, session_key);
  }

此时,前面部分已经完成。在者就是需要搭建后台服务器来进行信息获取了。我这里以nodejs为后台进行获取示例

//用于获取session_key,方便后续解密encryptedData
router.get("/api/wxUserInfo",function(req,res){
  var code = req.query.code;
  var appid='appid';
  var secret='secret'
  var url = 'https://api.weixin.qq.com/sns/jscode2session?appid='+appid+'&secret='+secret+'&js_code=' + code+'&grant_type=authorization_code'
  common.get_https_request(url,function(response){
      if(response.success){
        res.json(JSON.parse(response.body));
      }else{
        res.json(response);
      }
  })
});

对于解密算法,封装成了一个模块

var crypto = require('crypto')

function WXBizDataCrypt(appId, sessionKey) {
  this.appId = appId
  this.sessionKey = sessionKey
}

WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
  // base64 decode
  var sessionKey = new Buffer(this.sessionKey, 'base64')
  encryptedData = new Buffer(encryptedData, 'base64')
  iv = new Buffer(iv, 'base64')

  try {
     // 解密
    var decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, iv)
    // 设置自动 padding 为 true,删除填充补位
    decipher.setAutoPadding(true)
    var decoded = decipher.update(encryptedData, 'binary', 'utf8')
    decoded += decipher.final('utf8')
    decoded = JSON.parse(decoded)

  } catch (err) {
    throw new Error('Illegal Buffer')
  }

  if (decoded.watermark.appid !== this.appId) {
    throw new Error('Illegal Buffer')
  }

  return decoded
}

module.exports = WXBizDataCrypt

然后再接口中进行调用

router.get("/api/decodeUserInfo",function(req,res){
var appId = 'appid';
var sessionKey = req.query.sessionKey;
var encryptedData = req.query.encryptedData;
var iv = req.query.iv;
var pc = new WXBizDataCrypt(appId, sessionKey)

var data = pc.decryptData(encryptedData , iv)

  console.log('解密后 data: ', data)
  res.json(data)
})

至此已经完成了整个流程,至于其他语言的解密算法,官方文档也给出了相应的方法,位置在下图中已经指出

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • nodejs之重定向

    重定向指的是通过各种方法将各种网络请求重新定个方向转到其它位置(如:网页重定向、域名的重定向、路由选择的变化也是对数据报文经由路径的一种重定向)。

    无邪Z
  • nodejs开发微信支付之统一下单

    首先我们需要来看一下后台具体都需要做哪些功能: - 统一下单 - 接收订单结果通知 - 查询订单 - 申请退款 - 查询退款 - 退款结果通知接收

    无邪Z
  • crypto加密模块

    crypto 模块目的是提供加密功能,包含对 OpenSSL 的哈希、HMAC、加密、解密、签名、以及验证功能的一整套封装。Nodejs用C/C++实现这些算法...

    无邪Z
  • 黄荣奎:腾讯云微信小程序解决方案

    本文介绍小程序在腾讯云上的解决方案,如何快速帮助开发者快速完成开发和上线。

    Techeek
  • 首款区块链小程序因违规暂停服务

    日前,微信上线了号称“第一款区块链小程序”产品“小协议”受到了不少网友关注,悲催的是,这款产品没上线多久就被微信封杀了。

    速成应用小程序
  • 初学java之常用组件

    1 2 import javax.swing.*; 3 4 import java.awt.*; 5 class Win extend...

    Gxjun
  • 微信小程序微信登录

    开发接口 登录 wx.login wx.checkSession 签名加密

    达达前端
  • 微信小程序开发环境搭建

    微信小程序是当前程序员讨论的相当火的一个名词了,当前App开发人员有个担心,微信小程序的到来会不会给移动端App带来一个寒冬。不管微信小程序是否能颠覆当今的开发...

    程序源代码
  • iOS多线程GCD任务取消->NSOperation

    在多线程开发中,我们常用到GCD,这里探讨一下GCD任务的取消: 1.在iOS 8以后,系统给我们提供了这样的取消函数 dispatch_block_canc...

    清墨
  • Python爬虫新手教程:实战APP抓包,抖音的小姐姐等着我!

    前面我们了解了一些关于 Python 爬虫的知识,不过都是基于 PC 端浏览器网页中的内容进行爬取。现在手机 App 用的越来越多,而且很多也没有网页端,比如抖...

    一墨编程学习

扫码关注云+社区

领取腾讯云代金券