qq登录在登录页面，QQ登录图片处，赋予其打开QQ登录页面功能。回跳的页面得到QQ给的唯一标识openId，根据ope

在登录页面，QQ登录图片处，赋予其打开QQ登录页面功能。
回跳的页面得到QQ给的唯一标识openId，根据openId去后台查询是否已经绑定过账户。
- 如果绑定过，完成登录。
- 没有绑定过
  - 有账号的，绑定手机号，即为登录。
  - 没账号的，完善账户信息，即为登录。
登录成功后，跳转首页，或者来源页面。第一步：参考文档：
准备工作
QQ互联JS_SDK
总结一下：
- 有一个网站，且已备案。网站需要有QQ登录的逻辑（登录页面，回跳页面）。
- 然后在QQ互联上进行身份认证，审核通过。
- 然后在QQ互联上创建应用，应用需要域名，备案号，回调地址。审核通过。
- 得到：应用ID 应用key 回调地址。
- 才能完成QQ登录。（以上四个步骤，工作后大概率由后台或运维完成）
- 注意：id和uri都不能修改，否则无效。
```
# 测试用appid 
# 100556005
# 测试用redirect_uri
# http://www.corho.com:8080/#/login/callback
```

第二步：遇到问题：

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

windows

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 回车即可

需要开启IP或域名访问webpack服务器权限，在vue.config.js中

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

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

在index.html添加

<script src="http://connect.qq.com/qc_jssdk.js" data-appid="100556005" data-redirecturi="http://www.corho.com:8080/#/login/callback"></script>

在vue.config.js添加

  # 这个是设置外部扩展，模块为qc变量名为QC，导入qc将不做打包。
  configureWebpack: {
    externals: {
      qc: 'QC'
    }
  },

在 src/views/login.vue

import QC from 'qc'

<span id="qqLoginBtn"></span>

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

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

1608282862740

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

          <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>

12-登录-QQ登录-回跳页面

目的：完成QQ登录成功后的页面

主要有三个逻辑：

已注册，已绑定，登录成功，跳转首页，或者来源页面
已注册，未绑定，绑定手机号，登录成功，跳转首页，或者来源页面
未注册，补充完善账户信息，，登录成功，跳转首页，或者来源页面

需要一个回调页面：

路由规则 src/router/index.js

const LoginCallback = () => import('@/views/login/callback')

  { path: '/login', component: Login },
  { path: '/login/callback', component: LoginCallback }