參照新浪微博API新浪微博第三方登錄方式應該有如下幾個步驟(需要提前申請appId)
1.1添加腳本
<script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=YOUR APPKEY"
type="text/javascript"
charset="utf-8">
</script>
1.2在自己需要的位置添加div
<div id="wb_connect_btn" ></div>
1.3將div的id和登錄、登出時的回調作爲參數。調用sina的javascript方法
WB2.anyWhere(function (W) {
W.widget.connectButton({
id: "wb_connect_btn",
type: '3,2',
callback: {
login: function (o) { //登錄後的回調函數
alert("login: " + o.screen_name)
},
logout: function () { //退出後的回調函數
alert('logout');
}
}
});
});
完成後是如下的按鈕。
但是,太醜。或者說很可能和網站整體設計格格不入。
遂繼續查API文檔。
進行嘗試自定義的loginButton,
2.1定義div
<div class='wbLoginBtn'><img src='...'></div>
img標籤中可以放置美工做好的圖片。
這裏用class是爲了適應有多出登陸按鈕,不用id。
2.2點擊事件
- 同上加入微博的js腳本
- 綁定點擊事件
代碼如下
$('.wbLoginBtn').click(function () {
WB2.login(function () {
})
}
運行代碼,正常點擊就可以出現微博登錄彈出網頁
2.3在回調中調用接口獲取第三方登陸的uid
參考文檔
完善代碼
$('.wbLoginBtn').click(function () {
WB2.login(function () {
WB2.anyWhere(function (W) {
W.parseCMD('/account/get_uid.json', function (oResult, bStatus) {
if (bStatus) {
//to do something...
console.log(oResult.uid);
}, {
source: appId //你的appId
}, {
method: 'get',
cache_time: 30
});
});
});
在WB.login的回調中執行WB.anyWhere()。參考文檔發出請求/account/get_uid.json,參數爲source:appid。請求會返回登陸用戶的uid。
至此就可以根據自己的需求進行代碼編寫了。
效果預覽
鏈接 www.coolrun.cn
參考文檔:
http://jssdk.sinaapp.com/widget/login-button.php
http://jssdk.sinaapp.com/api.php
http://open.weibo.com/wiki/2/account/get_uid