登录-QQ登录-按钮处理

第一步：参考文档：

准备工作

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

4. 打开命令行窗口
5. 输入：sudo vim /etc/hosts
6. 按下：i 键
7. 输入：127.0.0.1 www.corho.com
8. 按下：esc
9. 按下：shift + :
10. 输入：wq 回车即可
    需要开启IP或域名访问webpack服务器权限，在vue.config.js中
    // 这个是给webpack-dev-server开启可IP和域名访问权限。
    chainWebpack: config => {
    config.devServer.disableHostCheck(true)
    }
    第三步：处理QQ登录按钮：

在index.html添加

在vue.config.js添加

这个是设置外部扩展，模块为qc变量名为QC，导入qc将不做打包。

configureWebpack: {
externals: {
qc: ‘QC’
}
},
在 src/views/login.vue
import QC from ‘qc’

// onMounted(() => {
// // 组件渲染完毕，使用QC生成QQ登录按钮
// QC.Login({
// btnId: ‘qqLoginBtn’
// })
// })
看页面生成QQ登录按钮，点击后新窗口打开，登录成功也无法跳转到登录页面窗口。

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

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