Vue 中调用 QQ官方的登录

第一步：参考文档：

• 准备工作(opens new window)
• QQ互联JS_SDK

由于域名是 www.corho.com 和 localhost 不一致 无法回调页面，需要再本地修改 hosts 地址

window

1. 找到 C:\Windows\System32\drivers\etc 下hosts文件
2. 在文件中加入  127.0.0.1       www.corho.com
3. 保存即可。
# 如果提示没有权限
1. 将hosts文件移到桌面，然后进行修改，确认保存。
2. 将桌面hosts文件替换c盘文件

mac OS

1. 打开命令行窗口
2. 输入：sudo vim /etc/hosts
3. 按下：i 键
4. 输入：127.0.0.1       www.corho.com
5. 按下：esc
6. 按下：shift + :
7. 输入：wq 回车即可

这样还是不行，vue cli 是不允许用 ip 访问项目，所以要开启 ip 或者域名 访问 webpack 服务器权限，在 vue.config.js 中

  // 这个是给webpack-dev-server开启可IP和域名访问权限。
  chainWebpack: config => {
    config.devServer.disableHostCheck(true)
  }

修改完以后，打开浏览器输入 www.corho.com:8080 就可以访问到项目了

第三步：处理QQ登录按钮：

1. 在index.html添加

<script src="http://connect.qq.com/qc_jssdk.js" data-appid="xxxxxx" data-redirecturi="回退地址"></script>

2.在vue.config.js添加

# 因为我们是 直接引入的 script ，所以在 vue 中 直接 写 QC.login 会报错
# 所以，我们要 忽略 xxx 包，因为我们在  index.html 的 script 中导入了
# 这个是设置外部扩展，模块为qc变量名为QC，导入qc将不做打包。
  configureWebpack: {
    externals: {
      qc: 'QC'
    }
  },
# 虽然 qc 不进行打包了，但是依旧能用 QC 这个变量

3.在 src/views/login.vue

import QC from 'qc'
<span id="qqLoginBtn"></span>
    // onMounted(() => {
    //   // 组件渲染完毕，使用QC生成QQ登录按钮
    //   QC.Login({
    //     btnId: 'qqLoginBtn'
    //   })
    // })

4 . 看页面生成QQ登录按钮，点击后新窗口打开，登录成功也无法跳转到登录页面窗口。

5 . 通过审查元素，找到跳转连接，自己来控制

          <a href="https://graph.qq.com/oauth2.0/authorize?client_id=100556005&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.corho.com%3A8080%2F%23%2Flogin%2Fcallback">
            <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="">
          </a>

这样暂时就不需要在这个 .vue 文件中 导入 QC ，用 QC.Login

import QC from 'qc'

      // 检查QQ是否登录 check() 返回 true 表示登录，false 表示没有
 if (QC.Login.check()) {
   // getMe 获取 openId
// QC.Login.getMe(function(openId, accessToken){})
// openId：用户身份的唯一标识。
      QC.Login.getMe((openId) => {
        // 业务  查看QQ 是否 捆绑 账号 等等~~~~~~
        
        // 获取头像信息 等等
        // QC.api(api, paras, fmt, method)
        QC.api('get_user_info').success(res => {
        avatar.value = res.data.figureurl_1
        nickname.value = res.data.nickname
      	})
      })
 }