QQ互聯(lián) JS-SDK

對于自己最近在做QQ第三方登錄的過程過個簡單的總結(jié)和筆記读存。方便自己以后的記憶也希望可以幫到有需要的朋友春叫。

1. 首先，需要申請接入QQ登錄量蕊，并成功獲取到 appid 和 appkey起暮。另外還要拿到之前在QQ互聯(lián)申請接入時候填的回調(diào)地址卖氨。

2. 設(shè)置2個頁面：QQ登錄頁面和回調(diào)地址頁面。

（注：如果QQ登錄頁面與回調(diào)地址頁面是同一個頁面， 則只需要引用一次腳本文件双泪。）

回調(diào)地址頁面（因為回調(diào)地址頁面比較簡單）

只要添加一下的代碼可以：

    <script src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" 
    data-callback="true" charset="utf-8"  type="text/javascript"></script> 
    

QQ登錄頁面

?
引入JS SDK的JS文件

    <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" 
    data-appid="[APPID]" data-redirecturi="[回調(diào)地址]" charset="utf-8"></script>

設(shè)置QQ登錄按鈕

 <span id="qqLoginBtn"></span>
 <script type="text/javascript">
//調(diào)用QC.Login方法持搜，指定btnId參數(shù)將按鈕綁定在容器節(jié)點中
QC.Login({
    //btnId：插入按鈕的節(jié)點id密似，必選
    btnId:"qqLoginBtn",    
    //用戶需要確認(rèn)的scope授權(quán)項焙矛，可選，默認(rèn)all
    scope:"all",
    //按鈕尺寸残腌，可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S]村斟，可選，默認(rèn)B_S
    size: "A_XL"
})
</script>

如果正確的話會出現(xiàn)這個按鈕:

image

這個時候點擊按鈕的時候抛猫，就會跳轉(zhuǎn)到QQ用戶的登錄授權(quán)頁面蟆盹。

【鏈接是由你的appid，回調(diào)地址闺金，授權(quán)信息和一些設(shè)置得到的逾滥。用戶確認(rèn)授權(quán)之后，跳轉(zhuǎn)到回調(diào)頁面并得到code和state參數(shù)之后败匹，在去獲取Access Token寨昙，等到這個Token之后結(jié)合appid去拿到每個QQ用戶唯一的OpenID，之后就可以調(diào)用用戶的數(shù)據(jù)和權(quán)限等掀亩，OAuth的具體詳情有興趣可以參考我另一篇文章舔哪。】

授權(quán)成功返回數(shù)據(jù)

只要授權(quán)和登錄成功后捉蚤，就可以獲取用戶數(shù)據(jù)和調(diào)用接口了，JS的SDK不會很復(fù)雜缆巧，只要掌握好對應(yīng)的幾個公開方法既可操作。

 QC.Login(
 /*設(shè)置按鈕的樣式*/
 {
     btnId: "qqLoginBtn",
     scope: "all",
     size: "B_M"
 },
 /*
 @登錄成之后的回調(diào)方法
 @oInfo object 返回用基本信息
 @oOpts object 按鈕的基本情況陕悬，多個按鈕時可用來區(qū)分
 */
 function(oInfo, oOpts){
     console.log(oInfo);
     console.log(oOpts);
 }
 );

就可以根據(jù)登錄成功的回調(diào)函數(shù)獲取到基本信息去設(shè)置用戶登錄的狀態(tài)了。

image

JS SDK公開方法介紹：

1. QC.Login.showPopup(oOpts)【直接打開QQ登錄彈窗】

   參數(shù)說明：

   oOpts：需要指定appId墩莫，回調(diào)地址redirect_URI逞敷。

   參數(shù)示例如下：

   QC.Login.showPopup({
      appId:"[appId]",
      redirectURI:"[回調(diào)地址]"
   });
   

   注意：

   oOpts參數(shù)不需必傳狂秦，不傳此參數(shù)時，登錄成功后會跳回登錄按鈕所在頁面推捐。
   如果已使用QC.Login方法裂问，則不需再使用此方法。

2. QC.Login.signOut()【注銷當(dāng)前登錄用戶】

3. QC.Login.check()【檢測當(dāng)前登錄狀態(tài)】

   返回值說明：

   true：說明登錄成功。
   false：說明登錄失敗堪簿。

4. QC.Login.getMe(function(openId, accessToken){})【獲取當(dāng)前登錄用戶的Access Token以及OpenID】

參數(shù)說明：
這里的參數(shù)為回調(diào)函數(shù)痊乾，通過回調(diào)函數(shù)獲取openId和accessToken。
openId：用戶身份的唯一標(biāo)識椭更。建議保存在本地哪审，以便用戶下次登錄時可對應(yīng)到其之前的身份信息，不需要重新授權(quán)虑瀑。
accessToken：表示當(dāng)前用戶在此網(wǎng)站/應(yīng)用的登錄狀態(tài)與授權(quán)信息湿滓，建議保存在本地。

參數(shù)示例如下:

      QC.Login.getMe(function(openId, accessToken){
          console.log("當(dāng)前登錄用戶的accessToken為："+accessToken);
          console.log("當(dāng)前登錄用戶的openId為："+openId);
      });

注意：
getMe方法只能在用戶登錄授權(quán)后調(diào)用舌狗，建議總是在使用check方法并返回true的條件下叽奥，調(diào)用getMe方法。

調(diào)用QQ登錄OpenAPI接口

QQ互聯(lián)在JS SDK中封裝了所有的OpenAPI接口痛侍，開發(fā)者只需要傳遞OpenAPI名稱朝氓，以及OpenAPI需要的相關(guān)參數(shù)，就可以調(diào)用OpenAPI主届。
QC.api(api, paras, fmt, method)【OpenAPI統(tǒng)一調(diào)用方式】

參數(shù)說明：

直接上代碼最靠譜了纠拔。
可以直接用個function包含起來，然后通過一個按鈕的事件去觸發(fā)而獲取到用戶信息

   <script type="text/javascript">
        //從頁面收集OpenAPI必要的參數(shù)泛豪。get_user_info不需要輸入?yún)?shù)侦鹏，因此paras中沒有參數(shù)
        var paras = {};  
        //用JS SDK調(diào)用OpenAPI
        QC.api("get_user_info", paras)
            //指定接口訪問成功的接收函數(shù)略水，s為成功返回Response對象
            .success(function(s){
                //成功回調(diào)渊涝，通過s.data獲取OpenAPI的返回數(shù)據(jù)
                alert("獲取用戶信息成功驶赏！當(dāng)前用戶昵稱為："+s.data.nickname);
            })
            //指定接口訪問失敗的接收函數(shù)，f為失敗返回Response對象
            .error(function(f){
                //失敗回調(diào)
                alert("獲取用戶信息失敻俏摹！");
            })
            //指定接口完成請求后的接收函數(shù)洒敏，c為完成請求返回Response對象
            .complete(function(c){
                //完成請求回調(diào)
                alert("獲取用戶信息完成凶伙！");
            });
     </script>

這個可以add_t接口也是可以用個function包含起來函荣，然后通過一個按鈕的事件去觸發(fā)用戶發(fā)布微博傻挂。

   <script type="text/javascript">
        var paras = {content : "#QQ互聯(lián)JSSDK測試#曾經(jīng)滄海難為水挖息，除卻巫山不是云套腹。"};
        QC.api("add_t", paras)
            .success(function(s){//成功回調(diào)
                alert("發(fā)送微博成功，請到騰訊微博內(nèi)查看幢码！");
            })
            .error(function(f){//失敗回調(diào)
                alert("發(fā)送微博失敻蛴！");
            })
            .complete(function(c){//完成請求回調(diào)
                alert("發(fā)送微博完成底洗！");
            });
     </script>

而我們需要的只是更改API調(diào)用的接口名亥揖。如果沒有參數(shù)就為空圣勒，如果有圣贸，則為JSON的鍵值對形式填寫。
具體的眾多參數(shù)請訪問API列表滑负。

Request與Response內(nèi)置對象

1. Request

JS SDK在初始化時會根據(jù)瀏覽器環(huán)境創(chuàng)建不同的請求代理矮慕，QC.api的每次調(diào)用都是一個Request對象啄骇。
 
Request對象的公開方法如下：  
success(resp): 請求完成并且返回碼為0的回調(diào)。  
error(resp): 請求完成并且返回碼不為0的回調(diào)痪寻。  
complete(resp): 請求完成后的回調(diào)槽华。
 
調(diào)用時序為success/error -> complete趟妥，每個方法都可以調(diào)用多次，每次調(diào)用返回Request本身亲雪，支持鏈?zhǔn)秸{(diào)用疚膊。  
resp參數(shù)為回調(diào)函數(shù)寓盗，回調(diào)函數(shù)參數(shù)為Response對象璧函。

2. Response

Response為Request對象綁定的回調(diào)函數(shù)的返回參數(shù)蘸吓，每次QC.api調(diào)用的異步響應(yīng)都會返回一個Response對象库继，該對象在Request對象的success/error -> complete調(diào)用流程中傳遞窜醉。
 
Response的公開方法如下：  
stringifyData：返回該Response對象包含的數(shù)據(jù)體的文本串榨惰。
 
Response的公開屬性如下：  
status：響應(yīng)狀態(tài)，-1：代表未知；404：響應(yīng)錯誤杰捂；200：響應(yīng)成功棋蚌。  
fmt：響應(yīng)數(shù)據(jù)格式，json/xml蒿往。  
code/ret：響應(yīng)返回碼瓤漏，0為成功颊埃，其他為失敗班利。  
data：響應(yīng)數(shù)據(jù)實體，json對象/xml對象庸队。  
seq：響應(yīng)序號彻消，從1000開始編號。