三步制作自定义图标的微博第三方登录
2015-07-11 00:20
218 查看
参照新浪微博API新浪微博第三方登录方式应该有如下几个步骤(需要提前申请appId)
完成后是如下的按钮。
但是,太丑。或者说很可能和网站整体设计格格不入。
遂继续查API文档。
进行尝试自定义的loginButton,
img标签中可以放置美工做好的图片。
这里用class是为了适应有多出登陆按钮,不用id。
绑定点击事件
代码如下
运行代码,正常点击就可以出现微博登录弹出网页
完善代码
在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
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
相关文章推荐
- 【CF应用开发大赛】微博社交简历
- 微博回应“用户信息被出售”事件:已上报司法机关
- 我是运营,我没有假期
- [网络资讯]新浪微博新版三栏布局开放公测
- 开始我觉得新浪微博傻,现在才慢慢明白新浪微博的高瞻远瞩
- jQuery+PHP+ajax实现微博加载更多内容列表功能
- nodejs开发微博实例
- iOS开发之路--微博“更多”页面
- Android 第三方应用接入微信平台研究情况分享(二)
- Android 第三方应用接入微信平台研究情况分享(一)
- Android应用内调用第三方应用的方法
- 基于python编写的微博应用
- php新浪微博登录接口用法实例
- Java使用新浪微博API开发微博应用的基本方法
- java实现的新浪微博分享代码实例
- iOS开发之路--微博骨架搭建
- 仿微博字符限制效果实现代码
- 用MySQL实现微博关注关系的方案分析
- 让程序员使用微博形式工作日志
- 离线缓存