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

<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登陆。