第三方登录(QQ)

1. 登录简要流程梳理

本节目标: 掌握第三方登录的实现流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VeQp6Nwd-1622102742351)(assets/login/06.png)]

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都不能修改，否则无效

# 测试用appid 
# 100556005
# 测试用redirect_uri
# http://www.corho.com:8080/#/login/callback

3）解决环境问题

由于本地我们的网站是访问http://localhost:8080，而回调地址的域名是http://www.corho.com:8080，俩个地址不一致是无法进行跳转的，需要我们修改本地的hosts文件，让域名访问时解析到我们本地的ip上

windows

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

mac OS

1. 打开命令行窗口
2. 输入：sudo vim /etc/hosts
3. 按下：i 键
4. 输入：127.0.0.1       www.corho.com
5. 按下：esc
6. 按下：shift + :
7. 输入：wq 回车即可

需要开启IP或域名访问webpack服务器权限，在vue.config.js中配置

# 这个是给webpack-dev-server开启可IP和域名访问权限
chainWebpack: config => {
  config.devServer.disableHostCheck(true)
}

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

3. 按钮跳转实现

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

<script src="http://connect.qq.com/qc_jssdk.js" data-appid="100556005" data-redirecturi="http://www.corho.com:8080/#/login/callback"></script>

2）在vue.config.js添加

# 这个是设置外部扩展，模块为qc变量名为QC，导入qc将不做打包。
configureWebpack: {
    externals: {
      qc: 'QC'
    }
}

3）在 src/views/login.vue

import QC from 'qc'
<span id="qqLoginBtn"></span>
onMounted(() => {
  // 组件渲染完毕，使用QC生成QQ登录按钮
  QC.Login({
    btnId: 'qqLoginBtn'
  })
})

4）点击QQ登录按钮，点击后新窗口打开登录页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9SHoiniq-1622102742352)(assets/login/08.png)]

以上我们按照QQ官方提示，完成了点击登录按钮唤起QQ登录弹框，我们发现现在的交互是打开新窗口，而不是在当前窗口中，这不符合我们的交互要求，接下来我们解决一下这个问题