【WeChat】之 微信小程序登录（获得unionid）（Java版 加解密）

前言

坑啊，都是坑啊，你最大。。。

1. 开发平台不用认证，也能获取的到 用户的 unionid
2. 前端 js 中不要写 https://api.weixin.qq.com/sns/jscode2session，微信已禁止
3. 微信公众号、小程序、开发平台，一个对应着一个邮箱
4. 未认证的开发平台，可以绑定小程序，不可以绑定公众号
5. 未认证的开发平台，要获得unionid 需要 通过加解密 敏感信息获得。

以上，有些可能有些会变动。（微信最大嘛）【飞

一、准备

---

（1）需要一个域名

登录时需要用到。（这里使用 natapp，基于ngork）

设置域名

1. https://mp.weixin.qq.com/wxopen/devprofile?action=get_profile&token=1323125232&lang=zh_CN
   
   这里配置有很多限制，不能是ip 、localhost、带端口等等，详细看 参考资料

2. 在 微信web开发者工具 中 勾选
   

二、前端代码

---

微信小程序创建的基本配置

app.js

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    var _this = this

    // 登录
    wx.login({

      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        if (res.code) {
          //发起网络请求
          wx.request({
            url: 'http://3bcn3f.natappfree.cc/Jingying/applet',
            method: 'get',
            data: {
              code: res.code
            },
            header: {
              'content-type': 'application/json'
            },
            success: function (res) {
              console.log(res.data)
              console.log(res.data.sessionKey)
              _this.globalData.sessionKey = res.data.sessionKey
            }
          })
        } else {
          console.log('登录失败！' + res.errMsg)
        }

      }
    })

    // 获取用户信息
    wx.getSetting({
      success: res => {

        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框

          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)

              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    sessionKey: null
  }
})

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })

    console.log(app.globalData.sessionKey)

    wx.request({
      url: 'http://3bcn3f.natappfree.cc/Jingying/applet/get',
      method: 'get',
      data: {
        sessionKey: app.globalData.sessionKey,
        encryptedData: e.detail.encryptedData,
        ivStr: e.detail.iv
      },
      success: function (res) {
        console.log(res)
      }
    })
  }
})

三、后端代码

---

先上结果

1. 前端控制台上
   
2. 后台打印
   
   

1. 这里我采用的是 JFinal 框架
2. 解密工具包 weixin-java-miniapp，在pom.xml 加入以下配置即可， demo

<!-- mini app -->
    <dependency>
      <groupId>com.github.binarywang</groupId>
      <artifactId>weixin-java-miniapp</artifactId>
      <version>3.1.0</version>
    </dependency>

后端代码，如下

四、一些遇见的错误

---

（1）js 中 url 非法

这是因为你要访问的域名并不是后台配置的。