三步制作自定义图标的微博第三方登录

原创 2015年07月11日 00:20:18

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

分别嵌入 新浪微博、QQ、微信 做第三方授权登录 获取到头像 昵称等信息

下面提到的这三种 授权登录 是分别嵌入,不是 share sdk 或者友盟 其它的。 一、下载sdk 地址 1.新浪微博 新浪微博SDK 下载 2.QQ  QQ SDK 下载 3.微信 ...

ThinkPHP微博第三方登陆

1 html 中增加链接 2 在ThinkPHP中,ThinkPHP-Extend-Vendor放入微博第三方登陆接口 3设置微博登陆配置 ...

TP框架实现第三方登录(QQ/微信)

TP3.2 Third party login GavinLiu ToWrite

友盟第三方登录 QQ 微信 新浪微博 自定义友盟的dirlog

上一篇 算是详细的说了友盟第三方分享,这里就说下第三方登录的这个功能。   我们看友盟官网的社会化分享API中 分享和登录是在一起的,就是在同一个jar里。所以我们集成了分享,登录的配置差不多了,官网...

iphone开发我的新浪微博客户端-用户登录自定义弹出窗口篇(1.2)

本篇的目的是开发一个自定义的弹出对话窗口组件,就是上面图6中半透明的信息提示窗口,其实系统类库中已经有UIActionSheet、UIAlertView能做到这样的功能组件,但是显示外观不怎么美观而且...
  • mkhgg
  • mkhgg
  • 2011年08月31日 16:41
  • 415

iphone开发我的新浪微博客户端-用户登录自定义弹出窗口篇(1.2)

本篇的目的是开发一个自定义的弹出对话窗口组件,就是上面图6中半透明的信息提示窗口,其实系统类库中已经有UIActionSheet、UIAlertView能做到这样的功能组件,但是显示外观不怎么美观而且...

新浪微博自定义分享利器

  • 2011年07月03日 11:38
  • 6KB
  • 下载

VS2010添加自定义控件以及使用第三方控件的方法 自定义图标设置方法

当原始控件无法满足你的开发要求的时候,自定义控件无疑
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:三步制作自定义图标的微博第三方登录
举报原因:
原因补充:

(最多只允许输入30个字)