【Vue中QQ登录】开发经验小节

这几天接到PC系统第三方登录的需求，需要支持QQ账号授权登录进入公司的PC系统，经过几番折腾终于搞定了，实现了小目标——登录成功。

那么首先我们来看看，如何登录？

QQ登录流程

1. 网站应用接入网站应用接入概述 — QQ互联WIKI
2. 网站开发流程
   • 准备工作_OAuth2.0
   • 放置“QQ登录”按钮
   • 获取Access_Token
   • 获取用户OpenID
   • OpenAPI调用说明

一、准备工作

1. 申请开发者账号
2. 提交审核
3. 理解熟读OAuth2.0 流程

QQ登录无法像微信一样申请个人测试号，所以需要申请正式的QQ平台应用账号。申请开通账号后，需要提交审核，审核这一步卡了好几天，经历了各种失败原因。几经波折后终于通过了，这一步前端的关键问题在于如何放置QQ登录按钮。

审核规范参考：

应用审核规范 — QQ互联WIKI

网站前端页面规范****

二、 开发阶段

我们这里采用的是server-side模式授权登录

前端只需通过登录按钮触发QQ授权，点击授权登录成功后获取到code，将code发送给server端获取到QQ用户信息 并在PC系统中注册生成新用户，注册成功后返回openId给前端。

web端操作步骤如下：

• 调用QQ登录,成功回调至系统登录页
• 成功返回code并发送至server端
• 成功获取到openid调用系统登录接口，登录进入系统

话不多说，show me code

<!-- 引入QQ官方提供的jssdk -->
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"></script>

三、测试阶段

线上环境测试

总结