个人博客系统开发总结之第三方登录（QQ、微博）

最新推荐文章于 2023-11-01 11:59:40 发布

原创

最新推荐文章于 2023-11-01 11:59:40 发布 · 1.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#第三方登录

本文总结了在个人博客系统中实现QQ和微博第三方登录的流程，包括认证成为开发者、创建应用、设置回调地址，以及在网站中添加登录功能的详细步骤。用户授权后，通过回调地址获取code，再换取access token和openId，从而获取用户信息。完整代码可在GitHub上查看。

当别人访问我的博客系统时，如果需要评论，就需要登录。如果此时要求注册，就比较麻烦，并且会引起访问者的反感。于是就采用第三方登录。目前支持QQ、微博登录。

QQ登录

QQ互联开放平台为第三方网站提供了丰富的API。第三方网站接入QQ互联开放平台后，即可通过调用平台提供的API实现用户使用QQ帐号登录网站功能，且可以获取到腾讯QQ用户的相关信息。

1、认证成为开发者

要使用腾讯提供的QQ登录API，就必须在QQ互联管理中心新建应用以获取应用的APPID 和 APP KEY，新建应用之前需要认证成为开发者，否则应用无法提交审核。认证成为开发者就是提供一些个人资料，比如联系方式，身份证号，身份证照片等，提交腾讯审核，审核通过即可成为开发者。

2、新建网站应用

点击上图中创建应用按钮，进行创建应用。填写应用信息，包括网站名称、类别、简介、网站地址、网站回调地址、网站备案号等。网站回调地址即用户授权QQ登录后的回调地址。新建的网站应用需通过审核才能让其他人使用QQ登录功能，如果审核未通过，只有网站所有者能使用QQ登录功能。

微博登录

微博登录的准备工作同QQ登录的准备工作，在微博开放平台上注册成为开发者，创建应用，提交审核等。

3、网站中添加QQ登录、微博登录功能

（1）网站中添加QQ、微博登录标识

<span data-platform-id="3" class="login-logo" title="QQ登录" 
    onclick="oRegisterBtn.loginQQ()">
	<i class="layui-icon" style="font-size: 40px; color: #1E9FFF;">&#xe676;</i>
</span>
<span data-platform-id="3" class="login-logo" title="微博登录"     
    onclick="oRegisterBtn.weiboLogin()">
	<i class="layui-icon" style="font-size: 40px; color: #EE2C2C;">&#xe675;</i>
</span>

（2）loginQQ、weiboLogin

/**
 * 第三方QQ登录
 */
 loginQQ: function() {
	 let clientId = '101528188';
	 let redirect_uri = 'http://22815l1b14.iask.in/thirdLogin/qqLogin';
	 let state = '123456789';
	 window.open(`https://graph.qq.com/oauth2.0/authorize?        
 client_id=${clientId}&response_type=code&redirect_uri=${encodeURIComponent(redirect_uri)}&state=${state}`);
},
/**
 * 微博登录
 */
 weiboLogin: function(){
	 let weiboAppId = '2191145838';
	 let weiboAuthPath = 'http://22815l1b14.iask.in/thirdLogin/weiboLogin';