想必第一次大家接触QQ第三方登陆都会遇到各种各样的问题，备受折磨，因此，今天我把自己做QQ登陆的过程描述一下，希望给大家提供参考，少走弯路。
在开发之前，我们先了解下QQ登陆的流程
第一：查看熟悉 网站接入概述
第二：开发者注册 网站接入流程
第三：前两步熟悉以后，获取到appid后，即可进行开发了。
本次只介绍PC网站接入QQ过程
- 登陆页面放置QQ登陆按钮
<span id="qqLoginBtn" ></span>
id可自定义修改，如果样式不对，也可以自定义class，做一些样式控制。
- 在登陆页面引用QQ登陆js库。
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="XXXX" data-redirecturi="http://www.51purse.com/qq_back.html" charset="utf-8" ></script>
data-appid对应的XXXX需要替换为你自己的appid,上面您完成开发者注册后，即可获取到appid。
data-redirecturi为回调地址，后面对应的值是我目前网站的回调页面，大家也可以自己写一个页面。 - 新建空白页面（回调页面）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>我爱管账网</title> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="keywords" content="我爱钱包,钱包管家,我爱记账,我爱管账" /> <meta http-equiv="description" content="我爱管账网是一种给主要给用户提供记账理财的工具，帮助用户更好更合理的管理自己的资金，帮助用户分析和控制预算" /> <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-callback="true" charset="utf-8" ></script> </head> <body> </body> </html>
大家一定要切记：此处必须是空白页面，就是什么内容都不放，值建一个空的HTML文件，引入sdk文件即可，大家完全可复制我的。
- 登陆页面初始化相关参数，初始化QQ图标，自定义尺寸，传入id。
if($("#qqLoginBtn").size()>0){ QC.Login({ btnId : "qqLoginBtn",//插入按钮的html标签id size : "A_M",//按钮尺寸 scope : "get_user_info",//展示授权，全部可用授权可填 all display : "pc"//应用场景，可选 },function(reqData, opts){ document.cookie="flag=2"; window.location.href="welcome.html"; }); }
此处代码，引入到登陆页面中，初始化的时候，就会加载QQ图片到按钮上去。function(reqData,opts){}方法，即为登陆成功后的回调，登陆成功以后，我这边会手动让他回到主页面，因为我是JS开发者，做的是单页面应用，所以只能自己手动回到主页面，当然，大家其它语言的，可以直接通过action跳转到主页面。
- 在主页面（welcome.html）同样需要引用sdk文件库，如果QQ按钮和主页面在同一个页面的话，只需要引入一次即可，比如某些论坛。
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="XXXX" data-redirecturi="http://www.51purse.com/qq_back.html" charset="utf-8" ></script>
此处代码，同登陆页面一样，大家直接复制过去即可。
- 登陆成功后，大家需要调用QQ的API来获取用户的资料信息，方便在自己网站上展示，同时可将相关字段存入自己的数据库，以维护用户的数据。
//判断当前用户是否登陆 if(QC.Login.check()){//如果已登录 //用JS SDK调用OpenAPI，此处可获得openId, accessToken QC.Login.getMe(function(openId, accessToken){ //调用get_user_info接口，可得到用户的资料信息,此处不需要传入任何参数，因为QQapi会自动带入参数 QC.api("get_user_info",{}).success(function(rep){ var nickName = rep.data.nickname; var gender = rep.data.gender; var figureurl = rep.data.figureurl; $("#currentUserNickName").text(rep.data.nickname); }); }); }else{ document.cookie="flag=1;expires="+new Date(0).toUTCString(); window.location.href="login.html"; }
此代码可以获取用户资料信息，同时也可以获取到openId和accessToken。
- 到此基本QQ第三方登陆就结束了，另外一个非常重要的地方是，在您个人的管理中心中，申请appid的地方，需要将回调地址，改成和上面建的空白页面的地址一样即为：
http://www.51purse.com/qq_back.html，切记，必须这么写，否则，登陆会报错（redirect uri is illegal(100010)），这一点我深有体会，官网的Demo是有问题的，我查阅了很多资料都无法解决，我总以后是登陆成功后的页面，所以，我之前填的是主页面，可是怎么弄都不想，必须是之前建的空白页面。 - 以上7条基本可以实现完整的QQ登陆了。下面给大家补充一下get_user_info接口的返回数据，大家其实也可以去查看API文档，我这边稍微提一下。
get_user_info接口 ret 返回码 msg 如果ret<0，会有相应的错误信息提示，返回数据全部用UTF-8编码。 nickname 用户在QQ空间的昵称。 figureurl 大小为30×30像素的QQ空间头像URL。 figureurl_1 大小为50×50像素的QQ空间头像URL。 figureurl_2 大小为100×100像素的QQ空间头像URL。 figureurl_qq_1 大小为40×40像素的QQ头像URL。 figureurl_qq_2 大小为100×100像素的QQ头像URL。需要注意，不是所有的用户都拥有QQ的100x100的头像，但40x40像素则是一定会有。 gender 性别。 如果获取不到则默认返回"男" is_yellow_vip 标识用户是否为黄钻用户（0：不是；1：是）。 vip 标识用户是否为黄钻用户（0：不是；1：是） yellow_vip_level 黄钻等级 level 黄钻等级 is_yellow_year_vip 标识是否为年费黄钻用户（0：不是； 1：是） { "ret":0, "msg":"", "nickname":"Peter", "figureurl":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/30", "figureurl_1":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/50", "figureurl_2":"http://qzapp.qlogo.cn/qzapp/111111/942FEA70050EEAFBD4DCE2C1FC775E56/100", "figureurl_qq_1":"http://q.qlogo.cn/qqapp/100312990/DE1931D5330620DBD07FB4A5422917B6/40", "figureurl_qq_2":"http://q.qlogo.cn/qqapp/100312990/DE1931D5330620DBD07FB4A5422917B6/100", "gender":"男", "is_yellow_vip":"1", "vip":"1", "yellow_vip_level":"7", "level":"7", "is_yellow_year_vip":"1" }
。。
- 最好给大家提供几个地址：
sdk下载地址
api文档列表地址 - 给大家看下我的登陆效果
这是登陆页面渲染出来的QQ登陆图标。
这是点击QQ登陆后，跳转第三方QQ登陆窗口页面。
这是登陆成功后的主页面。
这是我再申请QQ登陆时的管理中心页面，填写自己的回调地址，此处非常重要，填错，就无法进行跳转。