二十三、第三方登录

[5. 后端处理与用户绑定](#5. 后端处理与用户绑定)

一、去平台获取对象，以及id，key等

（1）登录第三方，获取相应的的应用实例，比如这里的QQ互联官网里创建

创建好后可以查看详情，看看自己的APPID，APPKey等，还有创建中填入的回调地址，

（2）在index.html中导入

javascript 复制代码

    <script
      type="text/javascript"
      charset="utf-8"
      src="https://connect.qq.com/qc_jssdk.js"
      data-appid="你的APPID"
      data-redirecturi="你的回调地址"
    ></script>

（3）创建登录页src/views/login-register/login/qq-login.vue

然后就是导入使用这个挂在到window上的QC对象，实现扫码登录

javascript 复制代码

<template>
  <div>
    <span id="qqLoginBtn" v-show="false"></span>
    <m-svg-icon
      class="w-4 cursor-pointer"
      name="qq"
      @click="onQQLogin"
    ></m-svg-icon>
  </div>
</template>

<script>
import { onMounted } from 'vue'
// import { isMobileTerminal } from '@/utils/flexible'
// QQ 登录的 URL
const QQ_LOGIN_URL =
  'https://graph.qq.com/oauth2.0/authorize?client_id=101998494&response_type=token&scope=all&redirect_uri=https%3A%2F%2Fimoc-front.lgdsunday.club%2Flogin'
</script>

<script setup>

// QQ 登录挂起
onMounted(() => {
  window.QC.Login(
    {
      btnId: 'qqLoginBtn' // 插入按钮的节点id
    },
    // 登录成功之后的回调, 但是需要注意, 这个回调只会在《登录回调页面中被执行》
    // 登录存在缓存, 登录成功一次之后, 下次进入会自动重新登录 (即: 触发该方法, 所以我们应该在离开登录页面时, 注销登录)
    (data, opts) => {
      console.log('QQ登录成功')
      console.log(data)
    }
  )
})

/**
 * 登录按钮事件
 */
const onQQLogin = () => {
  openQQWindow()
}

/**
 * 处理 QQ 登录视窗
 */
const openQQWindow = async () => {
  window.open(
    QQ_LOGIN_URL,
    'oauth2Login_19669',
    'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes'
  )
}
</script>

（4）使用这个qq登录组件

javascript 复制代码

<qq-login-vue></qq-login-vue>

（5）防止下次打开，再次触发登录成功

复制代码

QC.Login.signOut()

二、后端处理与用户绑定

前端把"通行证"（QQ的accessToken或微信的code）拿到手了，接下来就需要后端服务器出场，去兑换真正的"用户信息"，并完成在你自家系统的注册或登录。

5.1 QQ登录后端流程

QQ的流程相对直接。前端传回 accessToken（在QQ的回调URL的hash片段中），后端需要用这个 accessToken 去QQ的接口换取用户的唯一标识 openid 和基础信息。

用 access_token 获取 openid：调用QQ接口：https://graph.qq.com/oauth2.0/me?access_token=YOUR_ACCESS_TOKEN 这个接口会返回一个包含 openid 的JSONP格式响应。openid 是同一个QQ用户在你应用下的唯一标识，永远不会变。

用 access_token 和 openid 获取用户信息：调用QQ接口：https://graph.qq.com/user/get_user_info?access_token=YOUR_ACCESS_TOKEN\&oauth_consumer_key=YOUR_APP_ID\&openid=USER_OPENID 这个接口返回昵称、头像等基本信息。

后端拿到 openid 和用户信息后，逻辑就很清晰了：

去你的用户数据库里查，有没有一个用户的第三方类型是 QQ 且第三方ID 是这个 openid。

如果找到了：说明这个QQ用户以前已经绑定过你的网站了。直接为你网站的这个用户生成登录态（如JWT Token），返回给前端，前端跳转到首页，完成登录。

如果没找到：说明这个QQ用户是第一次来。你可以选择： a. 自动注册：用QQ返回的昵称和头像，自动在你的系统里创建一个新账号，并关联这个 openid。然后同样生成Token登录。这是最流畅的体验。 b. 引导绑定：跳转到一个绑定页面，让用户补充一下用户名、邮箱等信息，再创建账号关联。这种方式能获取更多用户信息。

因为我还未将项目部署到服务器上，还未获取真时的回调地址，所以这里做下梳理，后续再完善