網(wǎng)站接入QQ登錄的兩種方法
更新時間:2014年07月22日 15:25:28 投稿:whsnow
網(wǎng)站接入QQ登錄,首先引入授權js文件,這個需要提交申請的,通過之后按照下面的步驟進行操作就可以了
首先引入授權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登錄
第一種使用系統(tǒng)自帶按鈕登錄,但是這樣會彈出新窗口,不喜歡
//調(diào)用QC.Login方法,指定btnId參數(shù)將按鈕綁定在容器節(jié)點中
QC.Login({
//btnId:插入按鈕的節(jié)點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);
//根據(jù)返回數(shù)據(jù),更換按鈕顯示狀態(tài)方法
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>標簽鏈接過去,然后成功后調(diào)用這個地址,a標簽的href可以參考第一種window.location
QC.api("get_user_info", {})
//指定接口訪問成功的接收函數(shù),s為成功返回Response對象
.success(function(s){
console.log(s);
//成功回調(diào),通過s.data獲取OpenAPI的返回數(shù)據(jù)
alert("獲取用戶信息成功!當前用戶昵稱為:"+s.data.nickname);
})
//指定接口訪問失敗的接收函數(shù),f為失敗返回Response對象
.error(function(f){
//失敗回調(diào)
alert("獲取用戶信息失??!");
})
//指定接口完成請求后的接收函數(shù),c為完成請求返回Response對象
.complete(function(c){
//完成請求回調(diào)
alert("獲取用戶信息完成!");
});
//檢查是否登錄
if(QC.Login.check()){//如果已登錄
QC.Login.getMe(function(openId, accessToken){
alert(["當前登錄用戶的", "openId為:"+openId, "accessToken為:"+accessToken].join("\n"));
});
//這里可以調(diào)用自己的保存接口
//...
}
相關文章
js傳中文參數(shù)controller里獲取參數(shù)亂碼問題解決方法
js傳中文參數(shù),在controller里獲取參數(shù)亂碼的問題在本文有個不錯的解決方法,感興趣的朋友可以參考下2014-01-01
一個JavaScript函數(shù)把URL參數(shù)解析成Json對象
一個JavaScript函數(shù)parseQueryString,它的用途是把URL參數(shù)解析為一個對象,很實用,大家可以看看2014-09-09
JS實現(xiàn)基于Sketch.js模擬成群游動的蝌蚪運動動畫效果【附demo源碼下載】
這篇文章主要介紹了JS實現(xiàn)基于Sketch.js模擬成群游動的蝌蚪運動動畫效果,涉及Sketch.js插件的使用及HTML5元素的應用技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-08-08

