DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 網站接入QQ登錄的兩種方法教程
網站接入QQ登錄的兩種方法教程
編輯:關於JavaScript     

首先引入授權js文件

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

然後接入QQ登錄

第一種使用系統自帶按鈕登錄,但是這樣會彈出新窗口,不喜歡 
//調用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: "B_M" 
}, function(reqData, opts){//登錄成功 
console.log(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();" rel="external nofollow" >退出</a></span>' 
].join(""); 
dom && (dom.innerHTML = QC.String.format(_logoutTemplate, { 
nickname : QC.String.escHTML(reqData.nickname), //做xss過濾 
figureurl : reqData.figureurl 
})); 
}, function(opts){//注銷成功 
alert('QQ登錄 注銷成功'); 
}); 

第二種,使用自定義按鈕<a>標簽鏈接過去,然後成功後調用這個地址,a標簽的href可以參考第一種window.location 
QC.api("get_user_info", {}) 
//指定接口訪問成功的接收函數,s為成功返回Response對象 
.success(function(s){ 
console.log(s); 
//成功回調,通過s.data獲取OpenAPI的返回數據 
alert("獲取用戶信息成功!當前用戶昵稱為:"+s.data.nickname); 
}) 
//指定接口訪問失敗的接收函數,f為失敗返回Response對象 
.error(function(f){ 
//失敗回調 
alert("獲取用戶信息失敗!"); 
}) 
//指定接口完成請求後的接收函數,c為完成請求返回Response對象 
.complete(function(c){ 
//完成請求回調 
alert("獲取用戶信息完成!"); 
}); 

//檢查是否登錄 
if(QC.Login.check()){//如果已登錄 
QC.Login.getMe(function(openId, accessToken){ 
alert(["當前登錄用戶的", "openId為:"+openId, "accessToken為:"+accessToken].join("\n")); 
}); 
//這裡可以調用自己的保存接口 
//... 
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved