现在很多网站为了用户方便，一般都有第三方账号登陆的需求。今天以QQ登陆为例，来实现一个最简单的第三方登陆。
目前主流的第三方登录都是依赖的Oauth2.0实现的，最常见的就是在各种中小型网站或者App中的QQ登录，微信登录等等。所以我建议想要学习和实现第三方登录同学去了解下这个协议。
在使用QQ实现第三方登陆之前首先要了解一个重要概念，那就是什么是Oauth2.0（理解OAuth 2.0 – 阮一峰）
准备工作
如果要实现QQ第三方登录我们必须要有的东西是什么呢
- 登录http://connect.qq.com/，注册成为QQ互联平台开发者，注册一个网站应用
- 准备一个可访问的域名
- 一个服务器来承载我们的网站应用。阿里云，腾讯云，或者是自己搭建的都可以
注意：如果你和我一样，只是为了测试或者体验一下第三方登录，增加一下自己的技能书的话，那么第二点和第三点都不是必须的。
在QQ互联注册我们的应用
首先要登陆QQ互联官网 ，点击创建应用 > 创建网站应用 > 填写资料 > 注册一个网站应用。
在申请网站应用过程中，需要一些以下资料。如下图所示：
注意事项：
域名：网站应用的域名。
网站回调域：用户访问QQ互联登录校验成功后的回调地址。这个地址非常重要。建议在回调页面可以做一些保存QQ用户信息的操作，比如用户openId、accessToken、昵称、QQ空间头像等信息。回调地址支持多个，应用审核后也可以再次编辑。
提供方：一般为公司名称或者开发者的名称
网站备案号：网站域名的备案信息，如果是在万网，或者阿里云购买的域名，可以使用阿里云备案，还是比较方便
网站图标：会在一些场景显示出来，供展示使用
用户使用QQ登录时的提示界面（以熊猫直播的第三方登录为例），展示的信息有网站名称，网站图标，网站域名：
但是有些同学会问：我只是学习以下第三方登录，我怎么测试？
答案是：正常填写资料，
在网站回调域一栏填写一个可以在本机正常访问的地址
在网站回调域一栏填写一个可以在本机正常访问的地址
在网站回调域一栏填写一个可以在本机正常访问的地址
我个人在本地使用的网站回调域是http://127.0.0.1:8080/qq-login.html。只要是在本机可以正常访问就可以。其他的域名，备案号等没有就随便填，自己有的话就填上。如果填写完成后，等待审核，资料都OK的话，应该会审核成功，如果有错误数据，比如不合法的备案号。那么会审核失败。 审核失败的应用我们可以拿来作为测试应用使用。
注意：审核失败的应用，只有对应的登录QQ互联的QQ号可以使用正常的第三方登录功能。换句话说，失败的应用我们依然可以用来测试，只不过对测试的账户有所限制。
网站应用审核成功后，在应用管理界面可以看到我们的应用。如下图：
此时我们就可以用这个网站应用来测测试一下QQ第三方登录的实现过程了
实现QQ登录
本部分以JavaScript和QQ互联官网给出的jssdk为例，代码非常简单。
新建一个html文件如下：
解释<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qq登录测试</title>
</head>
<body style="margin: 0 auto;width: 400px;">
<h1>这里是QQ登录测试界面</h1>
<span id="qqLoginBtn"></span>
<!-- 引入QQ第三方登陆的javascript的SDK，appid，redirecturi修改为自己创建的应用的数据，要注意redirecturi一定要和我们申请的网站应用中的回调域完全匹配，否则会报错 -->
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101415280" data-redirecturi="http://127.0.0.1:8080/qq-login.html"
charset="utf-8"></script>
<!-- 使用官方默认的方法放置QQ登录按钮 -->
<script type="text/javascript">
QC.Login({
btnId: "qqLoginBtn" //插入按钮的节点id
});
</script>
</body>
</html>
页面如下所示
点击QQ登录，此时用户点击QQ登录后，QQ会默认拉取QQ或者TIM的登录状态，如果用户电脑上存在这两款软件的登录状态，那么登录界面如下所示，如果没有，则只显示二维码登录。
用户登录成功之后会回调页面，为了方便测试，我的回调地址同样是 http://127.0.0.1:8080/qq-login.html。登录成功，返回到这个地址，你会发现原来的界面变成下图所示
这代表用户已经登录成功。打开控制台，发现cookie里面已经存储了一些和QQ相关的信息。此时我们可以通过SDK提供的方法来获取用户的数据。
在上面的qq-login.html页面中增加以下代码：
解释<button onclick="getMe()">getMe</button>
<!-- 添加获取用户数据的方法 -->
<script>
function getMe() {
if (QC.Login.check()) {
QC.Login.getMe(function (openId, accessToken) {
console.log('openId', openId);
console.log('accessToken', accessToken);
})
} else {
console.log('不好意思用户没有登录');
}
}
</script>
在用户成功登录之后，我们点击getMe按钮，发现我们成功的获取到了用户的openId，accessToken并且已经打印在了控制台当中。
openId：对于每一个网站应用的每一个QQ用户，都有一个唯一的
openId与之对应。简单说就是对于我们的网站。openId就是每个QQ用户的唯一标示，可以当做主键来使用
accessToken：当前的用户的口令，在口令的过期时间内，可以直接通过accessToken来和QQ的服务器进行交互，比如说获取用户的昵称，头像的等信息，所有建议口令存储在安全性更高的数据库中。
QQ登录的业务逻辑是怎么样的？
到目前为止，我们已经成功的获取到了使用QQ用户的唯一标示，那么我们QQ登录的具体的业务逻辑应该怎么写呢？如何实现用户点击QQ头像就直接登录成功了呢？
其实我们首先要明白。一个网站的用户系统是可大可小的问题，一个大型网站的用户系统本身就是一个非常庞大的模块。要实现这样的支持第三方登录的用户系统，还需要后台乃至数据存储方面的配合。现在我们获取到了QQ登录非常重要的openId，accessToken。那么如何去存储这些信息的？首先我们要设计一个合理的用户存储结构。此处推荐一篇廖雪峰大大的文档。这三篇将的非常清楚
简单来说就是在数据库中添加一个表oauth_qq，记录下我们获取的QQ的第三方登录的信息，然后通过外键的方式和我们的用户表Users关联起来。
然后我们把oauth_qq这张表的数据作为一种验证方式，在用户使用QQ登录的时候首先验证一下用户在数据库中心的信息，用户验证过第三方的QQ信息，就可以直接登录了。
如果要添加用户绑定或者解除第三方登录的信息，直接删除对应的oauth_qq表的记录就可以了，不过在删除之前，为了安全起见，建议做一下用户身份校验。
到这里一个简单的第三方登录就实现完成了，但是其实这篇文章讲的比较粗浅，只是给大家提供一个实现第三方登录的思路。如果大家想要实现更多的功能，或者集成更多平台的第三方登录。一定要先对Oauth 2.0协议有一个比较深的理解。其实Oauth 2.0协议除了可以让我们使用QQ这样的第三方授权协议之外，甚至我们自己也可以根据此协议搭建一个Server端来给其他的网站或者应用进行授权，不过这需要我们掌握更多的知识，对Oauth 2.0有更加深入的了解才可以。
后记
学习一项新技术最好的办法就是去看官方文档。第一手的资料永远是最有参考价值的。官方文档的完整性和权威性是不可替代的，可以让我们有一个完整的知识结构，而不会让你在知识结构上出现大的漏洞。但是这并不是说博客类的文章就没有意义，博客往往是琐碎的一点一点的知识片段，是使用经验，让我们少走一些弯路。
