QQ快速安全登录的设计与实现

在使用QQ账号登录腾讯网站时，QQ推荐使用快速安全登录功能来方便快捷安全的登录腾讯网站。快速安全登录除了手机扫描二维码的方式还有另一种方式，通过检测QQ客户端已登录账户的方式进行登录。

问题

Mac版QQ客户端5.1.0以后，加入了这项新功能（PC版QQ客户端同样加入了此项功能）。新版的QQ支持在浏览器快速安全登录，无需浏览器安装插件。

2.0.png

具体的功能怎么样，在电脑上登录QQ客户端，当在浏览器登录腾讯的网站时，网页会提示当前电脑QQ客户端登录的账户，选择一个账户直接登录网页。相较于扫码登录，这种方式及省去了输入账户密码的麻烦同时也避免扫码时对手机的依赖，真正的方便快捷。

2.1.gif

废话一堆堆，那么新版本的QQ客户端是怎样实现在浏览器快速登录的？网页如何检测到当前电脑客户端登录的QQ账号？第一想法是它可能使用了Cookie，用户在登录QQ客户端时会产生一个网页请求，打开浏览器将登录信息写入Cookie。这样做的代价会很大，因为用户电脑上会存在多个浏览器，而且Cookie信息的作用域跟域名有关，针对不同的域名需要多次写入Cookie。

探究

打开浏览器（这里使用的是Chrome）控制台，审查网页元素，重点查看登录界面元素绑定的js事件和url请求。

2.2.png

审查元素的过程中，注意到登录子页面用到了iframe标签。在查看资源文件时找到qc_ptlogin_iframe(xlogin)文件夹，推测登录相关的资源都放在该目录下。仔细查看目录下每个资源请求的结果，找到一个跟包含账户信息的请求。

可疑资源请求

https://localhost.ptlogin2.qq.com:4303/pt_get_uins?callback=ptui_getuins_CB&r=0.2243462042902722&pt_local_tk=-1243521203

请求结果

/* QQ客户端已登录账号的基本信息 */
var var_sso_uin_list=[{"account":"1139356156","face_index":-1,"gender":0,"nickname":"\" Forヾ","uin":"1139356156","client_type":66818,"uin_flag":8388608}];ptui_getuins_CB(var_sso_uin_list);

2.3.png

为了得到更详细的请求信息，打开Network，发现网页在加载时请求该链接4次，其中3次请求失败。

/* 请求成功 */
https://localhost.ptlogin2.qq.com:4303/pt_get_uins?callback=ptui_getuins_CB&r=0.2243462042902722&pt_local_tk=-1243521203
/* 请求失败 */
https://localhost.ptlogin2.qq.com:4305/pt_get_uins?callback=ptui_getuins_CB&r=0.2243462042902722&pt_local_tk=-1243521203
/* 请求失败 */
https://localhost.ptlogin2.qq.com:4309/pt_get_uins?callback=ptui_getuins_CB&r=0.2243462042902722&pt_local_tk=-1243521203
/* 请求失败 */
https://localhost.ptlogin2.qq.com:4307/pt_get_uins?callback=ptui_getuins_CB&r=0.2243462042902722&pt_local_tk=-1243521203

2.4.png

这几次请求唯一不同的地方是请求端口号，分别请求了4303、4305、4307、4309这4个端口。继续查看求请求成功的详情，可以看到HTTP请求的Headers、Response信息。

/* 常规信息 */
Request URL:https://localhost.ptlogin2.qq.com:4303/pt_get_uins?callback=ptui_getuins_CB&r=0.2243462042902722&pt_local_tk=-1243521203
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:4303
Referrer Policy:no-referrer-when-downgrade

/* 请求头 */
Host:localhost.ptlogin2.qq.com:4303

/* 请求参数 */
callback:ptui_getuins_CB
r:0.2243462042902722
pt_local_tk:-1243521203

/* 响应信息 */
var var_sso_uin_list=[{"account":"1139356156","face_index":-1,"gender":0,"nickname":"\" Forヾ","uin":"1139356156","client_type":66818,"uin_flag":8388608}];ptui_getuins_CB(var_sso_uin_list);

2.5.png

看到Remote Address:127.0.0.1:4303时，大家心里估计已经明白了。QQ客户端在登录成功后可能会开启一个HTTP服务，监听本机127.0.0.1的一个指定端口（如4303）。当登录多个账号时，会监听多个端口，不同的端口对应的QQ账户。网页端加载时会针对本机指定的几个端口（如4303、4305等）进行请求，获取已登录账号信息。

简单验证

1、通过ping命令，确定localhost.ptlogin2.qq.com域名对应的ip地址是127.0.0.1。
2、退出QQ客户端，刷新网页。对localhost.ptlogin2.qq.com的请求都失败了，QQ在退出时关闭了HTTP服务。
3、使用lsof -i tcp:4303命令查看4303端口信息，可以看到端口监听程序是确实是QQ客户端。

2.6.png

总结

如何实现的呢？QQ客户端在登录账号时，会启动本地的HTTP服务并监听特定端口中的一个。腾讯网站在加载时会逐个请求本机特定端口，请求成功后可以拿到QQ客户端已登录的账号信息。