QQ互联:https://wiki.connect.qq.com/%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C_oauth2-0
大致逻辑:
- 有一个网站,且已备案。网站需要有QQ登录的逻辑(登录页面,回跳页面)。
- 然后在QQ互联上进行身份认证,审核通过。
- 然后在QQ互联上创建应用,应用需要域名,备案号,回调地址。审核通过。
- 得到:应用ID 应用key 回调地址。
- 才能完成QQ登录。
测试使用:
- # 测试用appid
- # 123456
- # 测试用redirect_uri
- # http://www.123456.com:8080/#/
一、在本地添加一个在线上已经配置好了回调地址的域名(在qq这边配了一个回调的地址,但域名与localhost不一样,将这个域名配置成能访问localhost:8080)
由于www.123456.com 是一个线上的域名,qq登陆完回跳www.123456.com 这个地址 。但这个地址怎么跳到我们自己的系统,我们的系统是localhost:8080。 需要将本地的host解析,将127.0.0.1解析成www.123456.com,当它回跳时虽然地址是www.123456.com,但是DNS解析优先的是本地的host,所以能跳到自己的localhost上。(eg:当浏览器访问www.jd.com时,先找DNS服务器将域名解析成IP,再通过IP访问资源。在解析域名的时候会优先解析本地的host文件)
1. 找到 C:\Windows\System32\drivers\etc 下hosts文件
2. 在文件中加入 127.0.0.1 www.corho.com
3. 保存即可。
# 如果提示没有权限
1. 将hosts文件移到桌面,然后进行修改,确认保存。
2. 将桌面hosts文件替换c盘文件
Host中配置好后,在浏览器中访问http://www.123456.com:8080
显示“Invalid Host header” ,因为现在服务器是vue-cli启动,它还不允许用域名的方式进行访问,还需要让服务器开启域名的访问。解决方式如下:
需要开启IP或域名访问webpack服务器权限,在vue.config.js中配置以下代码:
// 这个是给webpack-dev-server开启可IP和域名访问权限。
chainWebpack: config => {
config.devServer.disableHostCheck(true)
}
二、处理QQ登录按钮:
详细请见QQ互联:https://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E#3..E8.87.AA.E5.AE.9A.E4.B9.89.E7.99.BB.E5.BD.95.E6.8C.89.E9.92.AE
1.在index.html(public/index.html)添加
<script src="http://connect.qq.com/qc_jssdk.js" data-appid="123456" data-redirecturi="http://www.123456.com:8080/#/ "></script>
2. 准备一个qq登陆图片
<img src="./logo.png" alt="" />
(后续的qq登陆图标是需要qq通过js方法创建的)
创建如下:
1.当在index.html中引入script,会有一个全局的变量QC,可以通过QC调用方法。
2.准备一个空span(id),通过QC.Login去创建这个登陆按钮
步骤:
3.到此会报错:“当前页面没有引QC”
引入:import QC from qc
当引入后还会报错:“没有qc这个模块”
我们需要配置,让webpack打包时忽略qc这个包
# 这个是设置外部扩展,模块为qc变量名为QC,导入qc将不做打包。
configureWebpack: {
externals: {
qc: 'QC'
}
}
此时,当初放图片的地方就会出现一个QQ的登陆按钮,点击后会弹出QQ登陆的窗口。
但是,由于这个弹窗实质是window.open()打开的,所以之后的QQ回调也只会在这个弹窗里。我们f2审查元素复制其链接,将其粘贴在我们之前定义的img标签的父标签a链接中,并且注释掉span便签(创建span等一系列操作是为了得到这个链接)即可在当前页面进行跳转。
注释掉 // import QC from 'qc'
注释掉 // onMounted(()=>{
// QC.Login({btnId:'qqLoginBtn'})
// })
最后为跳转之后的地址配置相应路由,书写相应页面就完成QQ登陆。