想必第一次大家接觸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登陸時的管理中心頁面，填寫自己的回調地址，此處非常重要，填錯，就無法進行跳轉。