三步製作自定義圖標的微博第三方登錄

參照新浪微博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點擊事件

1. 同上加入微博的js腳本
2. 綁定點擊事件
   代碼如下

$('.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