前言
現如今，第三方登錄已成為大部分網站必備的一項基礎技能，引入時髦的第三方登錄不僅能幫你吸引更多的用戶，也讓你的網站可以充分利用其他大型網站的用戶資源。本次教程將讓你的網站最快捷便利地引入QQ登錄。
QQ第三方登錄目前提供了JS SDK功能，這也是目前最簡單直接的接入QQ互聯的方式，沒有之一。下面我將通過簡單的幾步輕松地讓你的網站接入QQ登錄。
准備工作
在正式接入之前你需要了解以下名詞的含義：
1. appid ：應用的唯一標識。在OAuth2.0認證過程中，appid的值即為oauth_consumer_key的值。
2. appkey：appid對應的密鑰，訪問用戶資源時用來驗證應用的合法性。在OAuth2.0認證過程中，appkey的值即為oauth_consumer_secret的值。
3. redirecturl：成功授權后的回調地址，必須是注冊appid時填寫的主域名下的地址，建議設置為網站首頁或網站的用戶中心。注意需要將url進行URLEncode。
4. access token：用來判斷用戶在本網站上的登錄狀態，具有3個月有效期，用戶再次登錄時自動刷新。
5. openid：是此網站上唯一對應用戶身份的標識，網站可將此ID進行存儲便於用戶下次登錄時辨識其身份，或將其與用戶在網站上的原有帳號進行綁定。
第一步
要接入QQ登錄，必不可少的是appid和appkey，通過申請接入QQ登錄，按照相應步驟操作即可輕松獲得，在此不做贅述。
第二步
在需要放置QQ登錄按鈕的頁面加入下面SCRIPT代碼：
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"></script>
PS：APPID 和 REDIRECTURI 換成第一步申請所得到的對應內容，REDIRECTURI 就是登錄之后返回的回調地址，在申請頁面自己填寫，一般寫網站主域名即可。注意：回調地址必須以http或https開頭。
第三步
在頁面放置一個元素節點用來展現登錄按鈕，並且指定其ID，如：
<div id="qq"></div>
然后在頁面加入如下SCRIPT：
<script type="text/javascript">
QC.Login({
btnId:"qq" //插入按鈕的節點id
});
</script>
這時你就可以在頁面看到如下效果：
如何你對這個展示效果不滿意，也可以自定義登錄按鈕。
第四步
在 REDIRECTURI 即回調地址頁面加入如下SCRIPT：
<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
PS：官方說法如果回調地址頁與加入QQ登錄按鈕是同一個頁面，則只需要引用一次腳本文件。如果你理解不了這種官方說法，可以在第一步的腳本中加入data-callback="true"屬性，而忽略第四步，前提是回調地址頁與加入QQ登錄按鈕的頁面是同一個頁面。
第五步
因為JS SDK封裝了獲取Access Token以及OpenID的方法，因此開發者不需要用開發代碼進行獲取，直接調用QQ登錄OpenAPI即可。
調用OpenAPI時，請統一遵循下述調用方式：
QC.api(api, paras, fmt, method)
參數說明：
| 參數名稱 | 是否必須 | 描述 |
| api | 必須 | 指定要調用的OpenAPI名稱。例如：調用add_t時，OpenAPI名稱為“add_t”。 各OpenAPI的名稱具體請參見API列表。 |
| paras | 必須 | 指定要調用的OpenAPI對應的參數。各參數使用JSON的鍵值對格式列出。 OpenAPI對應的參數具體請參見API列表中各OpenAPI的參數說明。 注意：此處參數不需要自行傳遞access_token與openid |
| fmt | 可選 | 指定OpenAPI的返回格式，可用值為“json”或“xml”。默認為“json”。 注意：json、xml為小寫，否則將不識別。 |
| method | 可選 | 指定OpenAPI調用請求的發起方式，可用值為“GET”或“POST”。根據配置，默認發送數據為“POST”，獲取數據為“GET”。 |
最后
提供一種代碼接入思路，僅供參考：
QC.api("get_user_info", {}) //get_user_info是API參數
//指定接口訪問成功的接收函數，s為成功返回Response對象
.success(function (s) {
//成功回調，通過s.data獲取OpenAPI的返回數據
nick = s.data.nickname; //獲得昵稱
headurl = s.data.figureurl_qq_1; //獲得頭像
if (QC.Login.check()) {//判斷是否登錄
QC.Login.getMe(function (openId, accessToken) { //這里可以得到openId和accessToken
//下面可以調用自己的保存方法
……
});
}
})
//指定接口訪問失敗的接收函數，f為失敗返回Response對象
.error(function (f) {
//失敗回調
alert("獲取用戶信息失敗！");
});
////指定接口完成請求后的接收函數，c為完成請求返回Response對象
//.complete(function (c) {
// //完成請求回調
// alert("獲取用戶信息完成！");
//});
結束語
如果按照上述步驟操作后得不到你需要的用戶信息，別擔心，刷新下頁面可能會有意想不到的驚喜哦。這是因為你在本地測試和你在申請時填的回調地址不匹配造成的，真正上線之后就沒有問題了。
最后希望本次教程對大家有點幫助和啟發。
本文原創自我愛學框架，歡迎轉載，請保留原文鏈接！
原文鏈接：http://www.itframe.top/Detail/Index/article/eed968bd-a64a-47d3-b9cf-40291bdcc7be.html