QQ登陸JS SDK教程，調用openapi接口

QQ登陸將用戶信息存儲在cookie中,命名爲__qc__k ，請不要佔用 __qc__k :

 

1) :: 在頁面頂部引入JS SDK庫：
將「js?」後面的appid參數（示例代碼中的：100229030）替換成您本身的appid：

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

 

2) :: HTML頁面中粘貼以下代碼，插入QQ登陸按鈕

<span id="qqLoginBtn"></span>
<script type="text/javascript">
    QC.Login({
        btnId:"qqLoginBtn"  //插入按鈕的節點id
    });
</script>

 

3) :: 調用openapi：

<script type="text/javascript">
var paras = {};

QC.api("get_user_info", paras)
    .success(function(s){//成功回調
        alert("獲取用戶信息成功！當前用戶暱稱爲："+s.data.nickname);
    })
    .error(function(f){//失敗回調
        alert("獲取用戶信息失敗！");
    })
    .complete(function(c){//完成請求回調
        alert("獲取用戶信息完成！");
    });
</script>

 

返回 json格式的用戶信息；請指定接口訪問成功的接收參數，如demo中的success(function(s))，即指定將成功返回值傳遞到s中; 其中全部API的返回均爲response對象，包括：data, code, status等屬性，分別表示數據、返回碼、請求的響應狀態

 

3.2) ※ 調用openapi發分享 [相同url參數只能分享一次]：

<script type="text/javascript">
//從頁面收集openapi必要的參數
var paras = {
    images:"http://y.photo.qq.com/img?s=OnbP8BwOF&l=y.jpg",
    title:"#QQ互聯JSSDK測試#我是標題啊標題",
    url:"http://connect.qq.com/",
    comment:"我是評論：轉發緣由",
    summary:"我是摘要：內容說明"
};

//用jssdk調用openapi
QC.api("add_share", paras)
    .success(function(s){//請自行改寫成功回調
        alert("分享成功，請到空間內查看！");
    })
    .error(function(f){//請自行改寫失敗回調
        alert("分享失敗！");
    })
    .complete(function(c){//請自行改寫完成請求回調
        alert("分享完成！");
    });
</script>

 

3.3) ※ 調用openapi發微博：

<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>

 

3) :: 獲取openId 與 accessToken

<script type="text/javascript">
if(QC.Login.check()){//若是已登陸
    QC.Login.getMe(function(openId, accessToken){
        alert(["當前登陸用戶的", "openId爲："+openId, "accessToken爲："+accessToken].join("\n"));
    });
    //這裏能夠調用本身的保存接口
    //...
}
</script>

 

用戶經過「QQ登陸」登陸成功後，能夠調用示例代碼將獲取到openId與accessToken

• openid是用戶身份的惟一標識，請保存在本地，以便用戶下次登陸時可對應到其以前的身份信息，不須要從新受權。
• accessToken：表示當前用戶在此網站/應用的登陸狀態與受權信息，也請保存在本地。

原文：http://qzonestyle.gtimg.cn/qzone/openapi/js-sdk-demo.html

 

完整實例：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="qc:admins" content="12772662310165464510063757" />
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="101037443" data-redirecturi="http://ikeepstudying.com/services/qq.php" data-callback="true" charset="utf-8"></script>

<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"
   }, function(reqData, opts){//登陸成功
        //根據返回數據，更換按鈕顯示狀態方法
        var dom = document.getElementById(opts['btnId']),
        _logoutTemplate=[
            //頭像
            '<span><img src="{figureurl}" class="{size_key}"/></span>',
            //暱稱
            '<span>{nickname}</span>',
            //退出
            '<span><a href="javascript:QC.Login.signOut();">退出</a></span>'
        ].join("");
        dom && (dom.innerHTML = QC.String.format(_logoutTemplate, {
           nickname : QC.String.escHTML(reqData.nickname), //作xss過濾
           figureurl : reqData.figureurl
        }));

     //     QC.Login.getMe(function(openId, accessToken){
     //     alert(["當前登陸用戶的", "openId爲："+openId, "accessToken爲："+accessToken].join("\n"));
        // });

        //這裏能夠調用本身的保存接口
        //...

   }, function(opts){//註銷成功
         alert('QQ登陸 註銷成功');
   }
);
</script>

 

須要注意的是，若是登陸地址和回調地址相同的話就要把 data-callback="true" 也加進去，不然彈出窗口不會關閉。如：

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="101037443" data-redirecturi="http://ikeepstudying.com/services/qq.php" data-callback="true" charset="utf-8"></script>

 

若是登陸地址和回調地址不是贊成頁面的話就要分別寫。

登陸頁面爲

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="101037443" data-redirecturi="http://ikeepstudying.com/services/qq.php" charset="utf-8"></script>

回調地址爲

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