【QQ登录------第三方登录的实现流程】

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）添加

2. 准备一个qq登陆图片

（后续的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登陆。

【QQ登录------第三方登录的实现流程】相关推荐

[iOS常见问题] 关于使用QQ做第三方登录的问题！
[iOS常见问题] 关于使用QQ做第三方登录的问题! 注意:QQ本身没有授权功能,所以想要使用QQ做第三方登录必须通过QQ空间来实现! 第一步:集成ShareSDK(步骤同集成分享的一样,如果已经集成 ...
QQ 微信第三方登录分享
</pre>一些基础性的东西我就不说了,至于怎么去下载SDK,什么的相信都知道<p></p><p>QQ </p><p>1.第三方 ...
CAS单点登录-第三方登录[QQ、微信、CSDN、GitHub]（十四）
CAS单点登录-第三方登录[QQ.微信.CSDN.GitHub](十四) 注: 目前博文使用cas版本为5.1.5,由于5.2.x与5.1.x构建模式有差异,所以部分配置会有些偏差. 本章内容简答介 ...
QQ互联第三方登录jar包
TripartiteQQLogin 点击前往gitee 介绍 QQ互联实现的第三方QQ OAuth授权登录模块.简化开发,避免重复造轮子. 软件架构 MAVEN 安装教程在项目中导入该jar包即可, ...
Django项目使用QQ实现第三方登录
QQ登录,也就是我们所说的第三方登录,是指用户可以不在本项目中输入密码,而直接通过第三方的验证,成功登录本项目. 若想实现QQ登录,需要成为QQ互联的开发者,审核通过才可实现.注册方法可参考链接htt ...
QQ互联第三方登录多应用用户登录打通
2019独角兽企业重金招聘Python工程师标准>>> 在开发第三方登录的时候,发现qq互联的第三方登录openId在多个应用中用户登录无法打通,然后发送邮件咨询了一下qq互联(邮箱 ...
实现QQ的第三方登录 iOS开发
现在大多数App在登录时候都会有第三方登录,如QQ,微信,微博等,如下面的截图下面我们主要讲一下qq的第三方登陆如何实现首先,到官网注册: 一,下载SDK 下载SDK 地址:http://wiki ...
qq 新浪微博第三方登录 api php,qq登录，新浪微博登录接口申请过程中遇到的问题...
1,qq登录接口申请申请地址是:http://connect.opensns.qq.com/,登录进去后,点击右上方的登录.然后填写信息就行了. 我遇到的问题是在域名审核时,域名审核就是不通过,没办 ...
【第三方互联】3、腾讯QQ授权第三方登录
当我们创建的 QQ 互联应用成功后,我们便可以开始使用该应用来实现 QQ 互联一.获取 APP ID 和 APP Key 1.在 QQ 互联官网首页找到"我的应用" 2.点击应用 ...

【QQ登录------第三方登录的实现流程】

【QQ登录------第三方登录的实现流程】相关推荐

最新文章

热门文章