191119_01 网站集成QQ第三方登录

网站集成QQ第三方授权登录

作者：邵发

官网：http://afanihao.cn/java

本文是Java学习指南系列教程的官方配套文档。

内容介绍如何在网站中集成QQ的第三方授权登录功能，演示项目基于Java8 + Tomcat8 + Spring5 的开发环境。第三方认证登录即OAuth（Open Authorization开放认证），常见的有QQ登录、微博登录等都属于第三方认证。本文附带所用的演示项目源码。

1.  QQ登录流程演示

点此观看登录演示。在登录页面下方，放置一个QQ登录的按钮链接。

点此按钮，则浏览器会跳到qq.com的官方授权页面。

注意此时的地址栏是 graph.qq.com 。用户在此页面里输入自己的QQ号，登录成功后，浏览器再次跳转到我们自己的网站 demo.afanihao.cn 。

这便是一个QQ三方登录的标准过程演示。

2.  资质审核

现在介绍如何给自己的网站添加这样功能。要实现这样的登录过程，是要先取得qq.com的官方审核的。

点击进入QQ应用申请页面，用自己的QQ号登录，然后按它的提示创建一个网页应用。示例图所示。

在填写应用资料时，需要填写你的网站的域名、接口地址和备案号，这意味着你必须有一个正常的网站（域名已经备案）才可以通过这一审核。

示例：

域名： http://demo.afanihao.cn

回调接口： http://demo.afanihao.cn/qq/callback

按要求填完后，提交审核，一般在1，2个工作日之内便可以通过审核。

3 应用开发

应用审核完成后，就可以在自己的网站里集成QQ登录了。以下代码演示中，均以demo.afanihao.cn 代表示例网站的域名，你在开发的时候应替换为自己的网站域名。

3.1 前端，添加一个QQ登录图标

点此按钮的时候，打开 http://demo.afanihao.cn/qq/useOauth

3.2 后台，实现 /qq/useOauth

后台实现 /qq/useOauth服务，实现一个Redirect，控制浏览器跳转到graph.qq.com进行页面授权。

@GetMapping("/qq/useOAuth")
public String useOAuth(HttpSession session) throws Exception
{
	// 产生一个随机码, 用于鉴别回调的安全性
	int rand = 10000 + new Random().nextInt(10000);
	String qqState = String.valueOf(rand);
	session.setAttribute("qqState", qqState);


	String qqAuthUrl = "https://graph.qq.com/oauth2.0/authorize"
		+"?response_type=code"
		+"&client_id=" + appID
		+"&state=" + qqState
		+"&redirect_uri=" + callbackUrl
	;

	return "redirect:" + qqAuthUrl;
}

在页面授权成功后，浏览器会跳转回 http://demo.afanihao.cn/qq/callback 地址，将附加一个code参数。

3.3 后台，实现/qq/callback 服务

实现/qq/callback，使用授权码code，继续与graph.qq.com交互，取得用户的信息。注意，此处使用的是后台间接口调用。

@GetMapping("/qq/callback")
public String callback(HttpSession session
		, HttpServletRequest request
		, HttpServletResponse response
		, String code
		, String state) throws Exception
{

	/* 与QQ后台交互，取得 AccessToken 。。。*/
	String url2 = "https://graph.qq.com/oauth2.0/token"
		+"?grant_type=authorization_code"
		+"&client_id=" + appID
		+"&client_secret=" + appSecret
		+"&code=" + code
		+"&redirect_uri=http://user.afanihao.cn/qqcallback"
	;

	HTTP http = new HTTP();
	System.out.println("获取AccessToken: " + url2);
	String reply2 = http.get(url2, null);
	System.out.println("reply2: " + reply2);
	String accessToken = parseAccessToken(reply2);
	if(accessToken == null || accessToken.length()==0)
		throw new Exception("无法解析出accessToken，应答为: " + reply2);

	/* 获取用户的 OpenID */
	String url3 = "https://graph.qq.com/oauth2.0/me"
		+ "?access_token=" + accessToken;
	String reply3 = http.get(url3, null);
	System.out.println("reply3: " + reply3);
	String openid = parseOpenID( reply3);
	System.out.println("用户的OpenID=" + openid);

	。。。。。。。。

至此，已经取得了当前用户的openid，此号对应了QQ用户的一个全局唯一账户ID。下面，只需要用这个openid在本网站的数据库处理一下就行了。

处理起来也简单：如果系统中没有这个帐户，就创建一个新的帐户；如果系统中有这个帐户，就取出这个帐户信息。以下代码仅为示意。

// 以openid作为查询，先查看本系统中没有这个用户
User user = UserDB.i.queryByQQ(openid);
if( user == null)
{
	user = new User();
	user.name = "qq" + openid;
	user.qqid = openid;
	UserDB.i.insert(user);
}

其实还可以进一步取得当前用户的QQ头像、昵称等信息，详情请参考本示例的项目源码。最后在校验完成后，将此用户的信息放在Session中，登录完成。

至此，已经完成QQ登录的集成。本文演示所用的项目源码在此获取。