一键查询所有自己QQ的QB余额 - A酱的个人（Askook）

我经常会充多个游戏账号的QB，然后玩游戏会用掉
每次算账就要登陆多个QQ一个一个看余额，然后记录，最后用计算器加起来，很麻烦的操作
于是想自己写个demo可以一键帮我查询所有QQ的QB余额然后汇总
起初我的想法是先登录获取到token（cookie），然后使用其授权之后查询当前账号的余额
结果我发现事情并不是我想象的那样.....
我登陆了腾讯充值中心
然后我发现QB的余额会在这个接口返回

然后我发现，这个接口是把所有的openid，openKey...等参数全部使用get请求明文传输，也没有任何加密操作，也就是说我只要拿到这一条请求，在任何地方打开，没有任何登陆的鉴权，任何人打开都是可以看到我的QB余额（除了这个，QB消费记录-传不同的页码就可以，查询QQ积分，QQ业务到期时间等操作...没有测试使用QB）

xfjl

虽然还是需要登录才能拿到（改密码失效），虽然很省事，但是总觉得哪里怪怪的.....
界面就是这样，拼接一下界面请求头和尾以及拿到的openid和openKey，请求的时候简单的使用JSONP处理一下跨域就可以了

暂时就完善到这里方便自己使用，之后如果有别人使用，会添加扫码添加账号的功能，逻辑也很简单，只需要拿到openid和openkey存起来就好了
几行代码分享一下

async queryData (i) {
  const _this = this
  const callbackName = '_getQBBalance'
  const script = document.createElement('script')
  script.src = this.baseUrlHeader + this.allData[i].openid + '&openkey=' + this.allData[i].openkey  + this.baseUrlFooter+ '&' + callbackName
  return new Promise((resolve, reject) => {
    window[callbackName] = function (data) {
      _this.allData[i].value = (data.qb_balance / 100).toFixed(2)
      _this.num = (Number(_this.allData[i].value) + Number(_this.num)).toFixed(2)
      resolve()
    }
    document.body.appendChild(script);
  })
}

----------------5.22更新-------------------
后来增加了点击可以查询消费记录的功能
但是由于腾讯的返回结果是一个对象，所以使用JSONP解决跨域问题行不通
然后使用代理解决了跨域问题
我的做法是使用vue.config.js文件来配置代理。在vue.config.js添加以下代码：(当然这只是用于开发环境的测试)

module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
 '/api': {
 target: 'https://my.pay.qq.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/cgi-bin/personal/account_tradeinfo.cgi'
    }
  }
}

生产环境中还要配置一下反向代理

然后引入axios插件请求数据

lookPop (v) {
  const now = moment().format('YYYY-MM-DD')
  const three = moment().subtract(3, 'months').format('YYYY-MM-DD')
  axios.get('/api', {
    params: {
      coin_type: 0,
      start_date: three,
      end_date: now,
      page_no: 1,
      channel: 'all',
      per: 20,
      extcode: '',
      t: 0.18446541021003937,
      openid: v.openid,
      openkey: v.openkey,
      session_id: 'openid',
      session_type: 'kp_accesstoken',
      qq_appid: 101502376
    }
  }).then(response => {
    console.log(response.data)
  }).catch(error => {
    console.log(error)
  })
},

最后完美解决了这一问题
现在我点击就可以查看我的消费记录了~
最后对界面优化了一下，效果如下图