对接第三方登录

1.点击第三方登录按钮：执行window.open方法，打开一个第三方指定的URL窗口，该地址会指向第三方登录的
URL，并且由第三方提供一个对应的二维码
2.弹出一个小窗口，展示对应二维码：此处展示的二维码，即为上一步中第三方提供的二维码
3.手机打开对应的APP进行扫码之后，会跳转到同意页面，同时浏览器端也会显示扫码成功：在第三方中会一直对该
页面进行轮询，配合第三方APP来判断是否扫码成功
4.手机端操作同意登录之后，会出现两种情况：在APP中同意之后，第三方会进行对应的跳转，
跳转地址为你指定的地址，在该地址中可以获取到第三方的用户信息，该信息即大第三方登录时要获取到的关键数据。
5、至此，第三方操作完成。接下来需要登陆判定。
1.该注册指的是第三方用户是否在本平台中进行了注册。
2.因为在之前的所有操作中，我们拿到的是*第三方的用户信息。
3.该信息可以帮助我们直接显示对用的用户名nickname和头像，但是因为不包含关键信息（手机号、用户名、密码）所以我们无法使用该信息帮助用户直接登录
4.所以我们需要判断当前用户是否在咱们自己的平台中完成了注册
1、当前用户已注册：
1.直接登录
2、当前用户未注册：
1. 执行注册功能

qq开放平台路程

1.注册账户

2.认证开发者

3.注册应用

 腾讯开放平台 OPEN.QQ.COM

QQ登录对接流程

1.导入QQ SDK

2.点击登录图片出发事件出现qq弹窗

const openQQWindow = async () => {
  window.open(
    QQ_LOGIN_URL,
    'xxxx',
    'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes'
  )
  // 打开视窗之后开始等待
  brodacast.wait().then(async (oauthObj) => {
    // 登录成功,关闭通知
    brodacast.clear()
    // 执行登录操作
    oauthLogin(LOGIN_TYPE_QQ, oauthObj)
  })
}

3.登录成功回调

onMounted(() => {
  QC.Login(
    {
      btnId: 'qqLoginBtn' //插入按钮的节点id
    },
    // 登录成功之后的回调，但是需要注意，这个回调只会在《登录回调页面中被执行》
    // 登录存在缓存，登录成功一次之后，下次进入会自动重新登录（即：触发该方法，所以我们应该在离开登录页面时，注销登录）
    (data, opts) => {
      console.log('QQ登录成功')
      // 1. 注销登录，否则在后续登录中会直接触发该回调
      QC.Login.signOut()
      // 2. 获取当前用户唯一标识，作为判断用户是否已注册的依据
      const accessToken = /access_token=((.*))&expires_in/.exec(
        window.location.hash
      )[1]
      // 3. 拼接请求对象
      const oauthObj = {
        nickname: data.nickname,
        figureurl_qq_2: data.figureurl_qq_2,
        accessToken
      }
      // 4. 完成跨页面传输
      brodacast.send(oauthObj)

      // 针对于 移动端而言：通过移动端触发 QQ 登录会展示三个页面，原页面、QQ 吊起页面、回调页面。并且移动端一个页面展示整屏内容，且无法直接通过 window.close() 关闭，所以在移动端中，我们需要在当前页面继续进行后续操作。
      oauthLogin(LOGIN_TYPE_QQ, oauthObj)
      // 5. 在 PC 端下，关闭第三方窗口
      window.close()
    }
  )
})