admin管理员组文章数量:1656443
1. 登录简要流程梳理
-
在登录页面,QQ登录按钮处,赋予其打开QQ登录页面功能
-
回跳的页面得到QQ给的唯一标识openId,根据openId去后台查询是否已经绑定过账户
-
如果绑定过,完成登录
-
没有绑定过
-
有账号的,绑定手机号,即为登录
-
没账号的,完善账户信息,即为登录
-
-
-
登录成功后,跳转首页,或者来源页面
2. 前置工作准备
1)参考文档
-
准备工作(opens new window)
-
QQ互联JS_SDK(opens new window)
2)大概步骤
-
准备一个已经备案的网站需要有QQ登录的逻辑(登录页面,回跳页面)
-
然后在QQ互联上进行
身份认证
,并且审核通过
-
在QQ互联上创建应用,应用需要域名,备案号,回调地址等
然后等待审核通过得到
应用ID
应用key
回调地址
-
注意:id和uri都不能修改,否则无效
3)解决环境问题
由于本地我们的网站是访问http://localhost:8080
而回调地址的域名是http://www.xxxx:8080
,俩个地址不一致是无法进行跳转的,
需要我们修改本地的hosts文件,让域名访问时解析到我们本地的ip上
DNS解析:(网络中,服务器不认域名的,认的是 ip) www.shuaipeng
-
作用是将域名地址解析成ip地址
-
优先级 先以本地的 hosts 文件为主 然后才走线上的dns服务器
DSN解析说明
DNS解析: 将域名解析成ip地址的过程。
想看一个网站 www.shuaipeng => 电脑不知道什么是 www.shuaipeng,需要询问的
1.先问本地 hosts 文件(一般不改) 如果本地配置了 域名 和 地址的映射关系,优先使用 hosts 中
的映射
127.0.0.1 www.shuaipeng
2.如果本地hosts文件里面没配(默认一般都没配)比如:找www.baidu
会找线上的 dns 服务器, dns 服务器就像一个字典, 字典中记录大量的 网站域名 和 网站ip 的对应关系
dns 服务器
112.80.248.75 www.baidu
xxx.xx.xxx.xx www.xxx
windows
1. 找到 C:\Windows\System32\drivers\etc 下hosts文件
2. 在文件中加入 127.0.0.1 www.xxxx
3. 保存即可
# 如果提示没有权限
1. 将hosts文件移到桌面,然后进行修改,确认保存。
2. 将桌面hosts文件替换c盘文件
mac OS
1. 打开命令行窗口
2. 输入:sudo vim /etc/hosts
3. 按下:i 键
4. 输入:127.0.0.1 www.xxxx
5. 按下:esc
6. 按下:shift + :
7. 输入:wq 回车即可
注意:如果有权限使用 wq! 回车即可退出
需要开启IP或域名访问webpack服务器权限,在vue.config.js中配置 (注意需要重启)
# 这个是给webpack-dev-server开启可IP和域名访问权限
chainWebpack: config => {
config.devServer.disableHostCheck(true)
}
注意点:
如果您的vue/cli升级到了最新版""@vue/cli-service": "~5.0.0" ,
它附带的webpack-dev-server也对应升级到了4.0,
而disableHostCheck属性在webpack-dev-server v4中移除了
QQ扫码授权登录后页面跳转并显示报错 : 【Invalid Host header】
解决方法:vue.config.js配置
configureWebpack: {
devServer: {
// disableHostCheck: true
allowedHosts: ['www.corho'] // www.corho=>扫码授权后的回调地址
}
}
浏览器输入http://www.xxxx:8080/#/
如果也能正常访问页面则配置已经生效
3. 按钮跳转实现
1)在public/index.html
添加sdk文件
<script src="http://connect.qq/qc_jssdk.js" data-appid="100556005" data-redirecturi="http://www.xxxx:8080/#/login/callback"></script>
2)在vue.config.js添加, 并重启服务器生效
# 这个是设置外部扩展,模块为qc变量名为QC,导入qc将不做打包
configureWebpack: {
externals: {
// 用来去除打包时候的常用不变模块
qc: 'QC'
}
}
3)在 src/views/login/components/login-form.vue
在登录页面
// 导入QC
import QC from 'qc'
// 准备一个id容器
<span id="qqLoginBtn"></span>
onMounted(() => {
// 组件渲染完毕,使用QC生成QQ登录按钮
QC.Login({
btnId: 'qqLoginBtn'
})
})
4)点击QQ登录按钮,点击后新窗口打开登录页面
以上我们按照QQ官方提示,完成了点击登录按钮唤起QQ登录弹框,
我们发现现在的交互是打开新窗口,而不是在当前窗口中,这不符合我们的交互要求,接下来我们
解决一下这个问题
4. 当前窗口登录实现
关键点:找到跳转链接
操作:审查元素查看QQ登录
按钮外面包裹的跳转链接
<a
href="https://graph.qq/oauth2.0/authorize?client_id=100556005&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.corho%3A8080%2F%23%2Flogin%2Fcallback"
>
<img
src="https://qzonestyle.gtimg/qzone/vas/opensns/res/img/Connect_logo_7.png"
alt=""
/>
</a>
<!-- <span id="qqLoginBtn"></span> -->
版权声明:本文标题:QQ三方登录 - 前置环境和交互 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729731519a1211501.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论