参照新浪微博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