/**
 * QQ登陆授权判断
 * code 是前端点击QQ登陆按钮图标然后请求，然后请求这个回调地址 返回的
 * 我这里就可以取到了
 */
router.get('/qqauthor', async (ctx, next) => {
  const { code } = ctx.request.query
  console.log("code", code) // 打印查看是否获取到
  let userinfo
  let openid 
  let item
  if (code) {

    let token = await QQgetAccessToken(code) // 获取token 函数 返回 token 并存储
    console.log('返回的token',token)  
    openid = await getOpenID(token)  // 获取 Openid 函数 返回 Openid 并存储
    console.log('返回的openid', openid)   
    if (openid && token) {
      userinfo = await  QQgetUserInfO(token, openid)  // 如果都获取到了，获取用户信息
      console.log("返回的结果", userinfo)
    }

  }

  // 封装： 
  if (userinfo) {
    let obj = {
      nickname: userinfo.nickname,
      openid: openid,
      gender: userinfo.gender === '男' ? 1 : 2,
      province: userinfo.province,
      city: userinfo.city, 
      year: userinfo.year,
      avatar: userinfo.figureurl_qq_2 ? userinfo.figureurl_qq_2 : userinfo.figureurl_qq_1
    }  
    console.log('封装的obj', obj)
    item = await register({ userInfo: obj, way: 'qq' })
    /** 从这里到封装 都是改变我获取的用户信息存储到数据库里面，根据数据库的存储，创建新用户，如果有
    * 用户我就查询并获取用户的id 然后返回给前端 用户的 id
    */
    ctx.state = {
        id: item.data.id
      }
    await ctx.render('login', ctx.state)  // 如果获取到用户 id 返回 前端一个页面并携带参数 用户ID
  }
})


/**
 * 
 * @param {string} code 
 * @param {string} appId 密钥
 * @param {string} appKey key
 * @param {string} state client端的状态值。用于第三方应用防止CSRF攻击，成功授权后回调时会原样带回
 * @param {string} redirectUrl （回调地址）
 * @returns 
 */
async function QQgetAccessToken(code) {
    let result
    let appId = '申请成功就有了'
    let appKey = '申请成功就有了'
    let state = '自定义'
    let redirectUrl = 'https://xxxxx/qqauthor'  // 回调地址是一样的 我这里就是我的获取登陆接口的地址

    // 安装了 axios 请求 接口 获取返回的token
    await axios({
      url:`https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id=${appId}&client_secret=${appKey}&code=${code}&state=${state}&redirect_uri=${redirectUrl}&fmt=json`,
      method:'GET'
    }).then(res =>{
      console.log(res.data)
      result = res.data.access_token
    //   res.data.access_token
    }).catch(err => {
       console.log(err)
       result = err
    })

    return result
}


/**
 * 根据Token获取Openid
 * @param {string} accessToken token 令牌
 * @returns 
 */
async function getOpenID(accessToken) {
    let result

    // 跟上面差不多就不解释了
    await axios({
        url: `https://graph.qq.com/oauth2.0/me?access_token=${accessToken}&fmt=json`,
        method: 'GET'
    }).then(res => {
        // 获取到了OpenID
       result = res.data.openid
    }).catch(err => {
       result = err
    })

    return result
}


/**
 * 根据Openid 和 Token 获取用户的信息
 * @param {string} accessToken
 * @param {string} openid 
 * @returns 
 */
async function QQgetUserInfO (token, openid) {
  let result    
  await axios({
    url: `https://graph.qq.com/user/get_user_info?access_token=${token}&oauth_consumer_key=101907569&openid=${openid}`,
    method: 'GET'  
  }).then(res => {
      result =  res.data
  }).catch(err => {
    console.log(err)
    result = err
  })

  return result
}

前后端调试

前端我这里使用的是Vue2.0的语法去写的上login.vue 页面代码

<template>
<div class="icon" @click="qqAuth">
        <img src="@/static/img/qq48-48.png" alt="" />
        <span>QQ账号登陆</span>
</div>
</template>

// 这里我就直接写
<script>
export default {
methods: {
  // 简单粗暴
  qqAuth () {
      const appId = 申请就有了  
      const redirectUrl = 'https://xxx/qqauthor' // 回调地址 我这里路由是/qqauthor 你的是什么填什么
      const state = 'ahh' // 可自定义
      const display = '' // 可不传仅PC网站接入时使用。用于展示的样式。
      const scope = ''  // 请求用户授权时向用户显示的可进行授权的列表。 可不填
      const url = `
https://graph.qq.com/oauth2.0/authorize?
      response_type=code&
      client_id=${appId}&
      redirect_uri=${redirectUrl}
      &state=${state}
      &scope=${scope}
      `
      window.open(url, '_blank')  // 开始访问请求 ，这个时候用户点击登陆，就会跳转到qq登陆界面，
      登陆后会返回code 到最开始我们写好的后端接口也就是回调地址哪里，开始操作
  },
}
 </script>