第三方登录(1)---qq登录

最近没做出什么比较有意思的需求，一直在考虑写什么文章，考虑了下觉得出几篇基础一点的实战教程更适合。接下来几天我将会详细介绍集中常见第三方登录--QQ，微博，微信。从创建项目开始讲解，尽量让每一个读者都能真正动手去实现第三方登录功能。首先，我是使用Node.js + mysql实现的，所以我默认已经安装成功Node.js以及mysql.

申请应用

首先我们需要前往QQ互联官网申请开发者身份，官网：https://connect.qq.com/index.html。

点击右上角头像，进入填写开发者资料进行审核。个人认证就选择个人接入，这个就是填写真实信息，提交审核。我这里就不详细说了。一般情况当天就可以审核完毕。

点击上方应用管理，进行应用申请界面。

我们可以看到，我们可选择的应用有网站应用、移动应用、小程序三中类型。我们现在创建一个网站应用。

申请应用需要填写域名备案信息，所以申请的前提就是需要有一个备案成功的域名。按照要求填写应用信息提交审核，审核通过即可接入QQ登录。现在回到应用管理界面，而我们可以看到我们目前有一个审核通过的网站项目。

现在我们开始接入QQ登录到我们的网站项目中。首先，桌面创建一个空文件夹TencentLogin，然后打开Visual Studio Code,打开我们创建的项目。然后在终端使用npm init项目初始化项目。

初始化项目后，我们会发现在项目根目录生成了package.json文件，这个就是项目的包管理文件。首先，在项目TencentLogin根目录创建login.html文件，Login.html其实就是一个正常登录界面，我们现在的逻辑就是点击用QQ账号登录就会使用QQ第三方授权登录，登录成功在登陆界面显示基本信息。

首先我们需要在login.html的head头部加载js脚本，使用的时候将data-appid更换成你应用的appid,将data-redirecturl更换成你的应用回调地址。这两个参数应用审核通过都可以获得。脚本如下：

<script src="https://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101552960"

data-redirecturi="https://www.niyueling.cn/login.html" charset="utf-8"></script>

在页面合适的地方放置QQ登录按钮

可以看到，我定义了一个id为qqLoginBtn的a标签来放置QQ登录按钮。然后使用刚才在head引入的脚本中内置的QC.Login方法，将登录按钮绑定到容器节点上。在QC.Login方法中将按钮与容器进行绑定，设置用户需要确认的scope授权项，设置QQ登录按钮尺寸。

到这里，我们初步配置完成了。我们现在测试下界面效果。

我们现在在界面最上方设置了一个QQ登陆按钮，点击按钮会打开新的页面进行第三方登录。

QC.Login进行第三方登录成功，会执行第一个回调方法，回调方法第一个参数reqData就会接收QQ登录的基本个人信息。我们在控制台打印下reqData看看效果。

可以看到我们成功获取到用户个人信息了。成功登录，会自动回调到我们申请应用时填写的回调地址，比如我是直接回调到原界面，然后将个人信息显示出来。

由于只是测试，所以没有对css进行调整。我们可以看到我们将用户登录信息成功获取到了。正常的操作我们可以将用户QQ登录信息保存数据库，而我们一般网站是可以注册账号的，所以我们一般回调地址应该是一个绑定账号的界面，将用户QQ登录信息与我们网站账号进行绑定。因为这些知识简单的数据库操作，所以我代码没有去进行实现。有兴趣的人可以去进行操作，其实原理很简单，在回调函数中取得用户QQ登录基本信息，然后发起ajax连接数据库，将QQ登录基本信息保存到数据库，这时候会回调到绑定个人账号界面，用户输入已经注册的该网站账号，验证账号密码然后进行更新数据库。

当我们点击退出按钮时，会调用QC.Login.signOut()方法退出当前的登录状态。就会回到最开始的登录界面了。

QQ第三方登录测试地址：https://www.niyueling.cn.需要源码的可以联系我进行提供。

到这里，使用Node.js实现QQ第三方登录就已经实现了，其实逻辑非常的简单，你只需要会一点js基础就完全足够了。希望这篇文章对你们有所帮助。如果喜欢，请帮我分享给更多的用户观看。下一篇，我会介绍实现第三方微信登录。