Vue 项目（网站应用）接入QQ互联qq登录接口 汇总

还是按照顺序从头到尾介绍一下（前面都知道的，可以直接看后面的VUE部分），如果有不对的地方，也欢迎大神指导
1、申请appid和appkey（这指定是必须的了）
申请地址
申请地址地址
1.1、注册开发者
1.1.1、在QQ互联开放平台首页右上角登录（最好是公司共有的qq，避免离职带来不必要麻烦）
1.1.2、登录成功后会跳转到开发者注册页面，在注册页面按要求提交公司或个人的基本资料。下图所示的是公司注册页面：（个人觉得两个选择差不多，只是提交的材料有差异而已，选公司接入的时候，后续需要提交营业执照，选个人的话，会提交本人手持身份证拍的照片）

1.1.3、按要求提交资料后，审核人员会进行审核，通过审核即可成为开发者（一般审核的还是挺快的）

1.2、创建应用
开发者注册完成后，点击“应用管理”按钮，如下图
选择需要创建的应用类型，我们以网站应用为例（必须是审核通过后），会填写如下图信息这几个信息是必须填的，我之前想测试自己本地localhost的地址，是不行的，必须是备案的，是外网可以访问的（也许也可以，不过我没试出来，腾讯反正是审核通过不了）
审核通过后，既可以拿到Appid和appkey，如下图，我这是没通过的，通过的和这个是一样的，给你们看下就行了
2、在VUE 项目调用接口
只需要addid和回调地址即可
2.1 引入JS SDK文件
在index.html页面插入如下标签

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-callback="true"
  data-appid="你自己的appid" data-redirecturi="你自己的回调地址" charset="utf-8">
  </script>

2.2、起个别名（我猜的，我也不是很懂，但是必须引入）
在build下的webpack.base.conf.js文件里，找到module.exports，添加如下，可能没个项目不同吧，这个是建前端项目得同事告诉我的（我也不是主要做前端的啊，哈哈），不然在其他地方引入QC的方法是undefined

module.exports = {
  externals: {
    'QC': 'QC'
  },
  }

2.3、自定义登录按钮，添加方法
在你需要登录的页面添加按钮，写入方法
页面先引入一下QC，不然报错

import QC from 'QC'

  <div class="qqIcon"
  @click="qqLoginClick('qq')"
  id="qqLoginBtn">QQ登录</div>

方法如下

  // QQ 第三方登录
    qqLoginClick (value) {
      // 直接弹出授权页面，授权过后跳转到回调页面进行登录处理
      QC.Login.showPopup({
        appId: '你自己的appId',
        redirectURI: '回调地址'
      })
    },

但是我发现这个回调地址不管我怎么写，还是回到我登录页面了，不过也无所谓了，再处理一下反正
此时页面上点击后，会跳转到qq页面，如下，授权后会回到页面
2.4、接收qq返回数据
然后我看有的人是用的定时器，我觉得不好，所以我是在create（）写的方法，如下所示

 created () {
    // 检查是否登录
    if (QC.Login.check()) {
      // 该处的openId，accessToken就是后台需要的参数了，后台可以通过这些参数获取临时登录凭证，然后就是自己的逻辑了
      QC.Login.getMe(function (openId, accessToken) {
        if (openId !== undefined) {
        //openId 是用户的唯一标识，也是需要存到数据库的
          console.log(openId)
          console.log('-------------------------------')
          console.log(accessToken)
          // 用JS SDK调用OpenAPI
          QC.api('get_user_info', this.qqParam)
            // 指定接口访问成功的接收函数，s为成功返回Response对象
            .success(function (s) {
              // 成功回调，通过s.data获取OpenAPI的返回数据
              console.log('---------------------------------------------')
              console.log(s.data)
            	//我把调用成功的返回数据打印到控制台，可以把这些参数发请求到后台，存入数据库
            	 this.$api.post('api/qqLogin', this.qqParam).then(res => {
                if (res.code === 'success') { }
              })
            })
            // 指定接口访问失败的接收函数，f为失败返回Response对象
            .error(function (f) {
              // 失败回调
              alert('获取用户信息失败！')
            })
             this.$router.push({ path: '/home' })//登录成功我处理完后跳转到首页了
        }
      })
      console.log('已登录!')
      this.$message.info('qq成功登录')
    } else {
      console.log('未登录')
    }

qq返回的数据如下所示：

然后就基本上应该完事了，
在设置个qq退出的按钮，调用下面的方法，就可以退出了

 qqOut () {
      QC.Login.signOut()
      this.$message.info('qq退出登录')
    },

以上就是我接入的过程中涉及到的全部了，如果地方不对，请指导