QQ互聯 JS-SDK

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

1. 首先，需要申請接入QQ登錄，并成功獲取到 appid 和 appkey。另外還要拿到之前在QQ互聯申請接入時候填的回調地址。

2. 設置2個頁面：QQ登錄頁面和回調地址頁面。

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

回調地址頁面（因為回調地址頁面比較簡單）

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

    <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="[回調地址]" charset="utf-8"></script>

設置QQ登錄按鈕

 <span id="qqLoginBtn"></span>
 <script type="text/javascript">
//調用QC.Login方法，指定btnId參數將按鈕綁定在容器節點中
QC.Login({
    //btnId：插入按鈕的節點id，必選
    btnId:"qqLoginBtn",    
    //用戶需要確認的scope授權項，可選，默認all
    scope:"all",
    //按鈕尺寸，可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S]，可選，默認B_S
    size: "A_XL"
})
</script>

如果正確的話會出現這個按鈕:

image

這個時候點擊按鈕的時候，就會跳轉到QQ用戶的登錄授權頁面。

【鏈接是由你的appid，回調地址，授權信息和一些設置得到的。用戶確認授權之后，跳轉到回調頁面并得到code和state參數之后，在去獲取Access Token，等到這個Token之后結合appid去拿到每個QQ用戶唯一的OpenID，之后就可以調用用戶的數據和權限等，OAuth的具體詳情有興趣可以參考我另一篇文章。】

授權成功返回數據

只要授權和登錄成功后，就可以獲取用戶數據和調用接口了，JS的SDK不會很復雜，只要掌握好對應的幾個公開方法既可操作。

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

就可以根據登錄成功的回調函數獲取到基本信息去設置用戶登錄的狀態了。

image

JS SDK公開方法介紹：

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

   參數說明：

   oOpts：需要指定appId，回調地址redirect_URI。

   參數示例如下：

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

   注意：

   oOpts參數不需必傳，不傳此參數時，登錄成功后會跳回登錄按鈕所在頁面。
   如果已使用QC.Login方法，則不需再使用此方法。

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

3. QC.Login.check()【檢測當前登錄狀態】

   返回值說明：

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

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

參數說明：
這里的參數為回調函數，通過回調函數獲取openId和accessToken。
openId：用戶身份的唯一標識。建議保存在本地，以便用戶下次登錄時可對應到其之前的身份信息，不需要重新授權。
accessToken：表示當前用戶在此網站/應用的登錄狀態與授權信息，建議保存在本地。

參數示例如下:

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

注意：
getMe方法只能在用戶登錄授權后調用，建議總是在使用check方法并返回true的條件下，調用getMe方法。

調用QQ登錄OpenAPI接口

QQ互聯在JS SDK中封裝了所有的OpenAPI接口，開發者只需要傳遞OpenAPI名稱，以及OpenAPI需要的相關參數，就可以調用OpenAPI。
QC.api(api, paras, fmt, method)【OpenAPI統一調用方式】

參數說明：

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

   <script type="text/javascript">
        //從頁面收集OpenAPI必要的參數。get_user_info不需要輸入參數，因此paras中沒有參數
        var paras = {};  
        //用JS SDK調用OpenAPI
        QC.api("get_user_info", paras)
            //指定接口訪問成功的接收函數，s為成功返回Response對象
            .success(function(s){
                //成功回調，通過s.data獲取OpenAPI的返回數據
                alert("獲取用戶信息成功！當前用戶昵稱為："+s.data.nickname);
            })
            //指定接口訪問失敗的接收函數，f為失敗返回Response對象
            .error(function(f){
                //失敗回調
                alert("獲取用戶信息失敗！");
            })
            //指定接口完成請求后的接收函數，c為完成請求返回Response對象
            .complete(function(c){
                //完成請求回調
                alert("獲取用戶信息完成！");
            });
     </script>

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

   <script type="text/javascript">
        var paras = {content : "#QQ互聯JSSDK測試#曾經滄海難為水，除卻巫山不是云。"};
        QC.api("add_t", paras)
            .success(function(s){//成功回調
                alert("發送微博成功，請到騰訊微博內查看！");
            })
            .error(function(f){//失敗回調
                alert("發送微博失敗！");
            })
            .complete(function(c){//完成請求回調
                alert("發送微博完成！");
            });
     </script>

而我們需要的只是更改API調用的接口名。如果沒有參數就為空，如果有，則為JSON的鍵值對形式填寫。
具體的眾多參數請訪問API列表。

Request與Response內置對象

1. Request

JS SDK在初始化時會根據瀏覽器環境創建不同的請求代理，QC.api的每次調用都是一個Request對象。
 
Request對象的公開方法如下：  
success(resp): 請求完成并且返回碼為0的回調。  
error(resp): 請求完成并且返回碼不為0的回調。  
complete(resp): 請求完成后的回調。
 
調用時序為success/error -> complete，每個方法都可以調用多次，每次調用返回Request本身，支持鏈式調用。  
resp參數為回調函數，回調函數參數為Response對象。

2. Response

Response為Request對象綁定的回調函數的返回參數，每次QC.api調用的異步響應都會返回一個Response對象，該對象在Request對象的success/error -> complete調用流程中傳遞。
 
Response的公開方法如下：  
stringifyData：返回該Response對象包含的數據體的文本串。
 
Response的公開屬性如下：  
status：響應狀態，-1：代表未知；404：響應錯誤；200：響應成功。  
fmt：響應數據格式，json/xml。  
code/ret：響應返回碼，0為成功，其他為失敗。  
data：響應數據實體，json對象/xml對象。  
seq：響應序號，從1000開始編號。