第三方-QQ登录流程

参考官方文档sdk使用说明 JS_SDK使用说明 — QQ互联WIKI

第一步：准备工作：

• 需要在 QQ互联 平台注册，需要实名身份认证，审核通过（7个工作日）。
• 然后创建我的web应用，需要有网站域名，需要域名备案号，设置登录成功回跳地址，审核通过。
• 得到 appid 和 回跳地址。

第二步：参考官网的 JS_SDK使用说明 实现QQ登录功能

• 引用JS SDK的JavaScript文件

  1. 首先需要申请接入QQ登录参考第一步，成功获取到appid和appkey。假设我们得到了appid和回跳地址

  # 测试用 appid 
  # 146267546
  # 测试用 redirect_uri
  # http://meiliyisheng.ma.net/login/callback

  2. 在html页面适当的位置引入JS脚本包（将下面代码中的“APPID”替换为申请接入QQ登录时获得的appid；"REDIRECTURI"替换为申请接入QQ登录时输入的回调地址）：

  <script type="text/javascript"  charset="utf-8"
      src="http://connect.qq.com/qc_jssdk.js"
      data-appid="APPID"
      data-redirecturi="REDIRECTURI"
  ></script>

  注意：回调地址必须以http或https开头。 

  

• 放置QQ登录按钮

         在html页面需要插入QQ登录按钮的位置，粘贴如下代码：

<span id="qqLoginBtn"></span>
<script type="text/javascript">
    // QC这里是全局变量
    QC.Login({
       btnId:"qqLoginBtn"	//插入按钮的节点id
});
</script>

上述代码中放置了一个html元素节点，并给该节点指定全页面唯一的id，例如上面例子中的<span id="qqLoginBtn"></span>。开发者也可将其改成自定义的元素id。
上述步骤正确执行后，页面粘贴上述代码处会出现QQ登录按钮：

 点击该QQ登录按钮，即可跳转 如下页面 发起登录请求，在此页面扫码登录即可，登录成功就会回跳到你自定义的回跳地址页面，该步骤的作用是回调地址将获取到的Access Token和OpenID返回给调用页面 login/callback

 同时也可以自定义QQ登录按钮，类似这样

此时可以通过QQ登录按钮QC.Login的方式（和上面点击qq登录得到的跳转地址一样）在地址栏得到登录的回跳地址，赋给这个自定义按钮（可以是a链接）点击即可实现上面快捷登录页面的跳转

第三步：​​​​​登录成功后页面回跳

因为提前配置过回跳地址，所以扫码登录成功后即会回跳到前端业务页面/login/callback

在这个页面取到qq返回的openId，使用openId调用后端的qq登录接口（登录成功返回的用户信息记得保存）

取到qq返回的openId 需要用到 QC.Login.check（检查是否已经登录）和 QC.Login.getMe（返回用户身份的唯一标识。建议保存在本地，以便用户下次登录时可对应到其之前的身份信息，不需要重新授权）这两个方法，参考JS_SDK使用说明 — JS SDK的其他公开方法

代码示例：

const openId = ref('')
const isNeedBind = ref(false)
onMounted(() => {
  if (QC.Login.check()) {
    QC.Login.getMe((id: string) => {
      openId.value = id
      // 使用openId调用后端提供的qq登录接口进行登录：
      loginByQQ(id)
        .then((res) => {
          // 登录成功-已绑定手机号
          loginSuccess(res)
        })
        .catch((err) => {
          // 登录失败-未绑定手机号，展示手机绑定页面信息
          isNeedBind.value = true
        })
    })
  }
})

​给全局变量QC添加ts类型
interface Window {
  _AMapSecurityConfig: {
    securityJsCode: string
  }
}

type QCType = {
  Login: {
    check(): boolean
    getMe(cb: (id: string) => volid): void
  }
}

declare const QC: QCType

在上述的代码示例的业务中，取到openId后，使用openId调用QQ登录接口loginByQQ，登录成功代表用户已经绑定过登录的手机号，接下来就需要保存用户信息，回调首页或者用户页面，提示登录成功，store信息的清空。

// 绑定成功的逻辑
const loginSuccess = (res: { data: User }) => {
  store.setUser(res.data)
  router.replace(store.returnUrl || '/user')
  showSuccessToast('登录成功')
  store.setReturnUrl('')
}

 未登录成功，就提示用户绑定手机号，并且展示手机绑定页面信息，待用户输入个人信息后，点击绑定进行绑定接口的调用即可，绑定成功就提示用户登录成功，保存接口返回的用户信息，回跳来源页，基本和上述绑定成功逻辑一样。

 至此，qq登录一条完整的业务算全部完成。