QQ三方登录 - 前置环境和交互

1. 登录简要流程梳理

1. 在登录页面，QQ登录按钮处，赋予其打开QQ登录页面功能

2. 回跳的页面得到QQ给的唯一标识openId，根据openId去后台查询是否已经绑定过账户

   • 如果绑定过，完成登录

   • 没有绑定过

     • 有账号的，绑定手机号，即为登录

     • 没账号的，完善账户信息，即为登录

3. 登录成功后，跳转首页，或者来源页面

2. 前置工作准备

1）参考文档

1. 准备工作(opens new window)

2. QQ互联JS_SDK(opens new window)

2）大概步骤

1. 准备一个已经备案的网站需要有QQ登录的逻辑（登录页面，回跳页面）

2. 然后在QQ互联上进行身份认证，并且审核通过

3. 在QQ互联上创建应用，应用需要域名，备案号，回调地址等

   然后等待审核通过得到应用ID 应用key 回调地址

• 注意：id和uri都不能修改，否则无效

3）解决环境问题

由于本地我们的网站是访问http://localhost:8080

而回调地址的域名是http://www.xxxx.com:8080，俩个地址不一致是无法进行跳转的，

需要我们修改本地的hosts文件，让域名访问时解析到我们本地的ip上

DNS解析：（网络中，服务器不认域名的，认的是 ip） www.shuaipeng.com

1. 作用是将域名地址解析成ip地址

2. 优先级 先以本地的 hosts 文件为主 然后才走线上的dns服务器

DSN解析说明

DNS解析: 将域名解析成ip地址的过程。

想看一个网站 www.shuaipeng.com => 电脑不知道什么是 www.shuaipeng.com，需要询问的

1.先问本地 hosts 文件（一般不改） 如果本地配置了 域名 和 地址的映射关系，优先使用 hosts 中

的映射

127.0.0.1   www.shuaipeng.com

2.如果本地hosts文件里面没配（默认一般都没配）比如：找www.baidu.com

会找线上的 dns 服务器， dns 服务器就像一个字典， 字典中记录大量的 网站域名 和 网站ip 的对应关系

dns 服务器
112.80.248.75      www.baidu.com
xxx.xx.xxx.xx      www.xxx.com

 windows

1. 找到 C:\Windows\System32\drivers\etc 下hosts文件
2. 在文件中加入  127.0.0.1       www.xxxx.com
3. 保存即可
# 如果提示没有权限
1. 将hosts文件移到桌面，然后进行修改，确认保存。
2. 将桌面hosts文件替换c盘文件

mac OS

1. 打开命令行窗口
2. 输入：sudo vim /etc/hosts
3. 按下：i 键
4. 输入：127.0.0.1       www.xxxx.com
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.com'] // www.corho.com=>扫码授权后的回调地址
   }
 }

浏览器输入http://www.xxxx.com:8080/#/ 如果也能正常访问页面则配置已经生效

3. 按钮跳转实现

1）在public/index.html添加sdk文件

<script src="http://connect.qq.com/qc_jssdk.js" data-appid="100556005" data-redirecturi="http://www.xxxx.com: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.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>
<!-- <span id="qqLoginBtn"></span> -->