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

原创 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第三方登录的应用

现在这种第三方登录的应用很广泛也很方便。省得用户进行注册了。现在把QQ登录的方法和步骤记录一下,以备使用时方便。    第一步,到http://connect.qq.com/intro/login/...

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

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

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

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

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

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

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

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

360浏览器登录新浪微博图标显示为字母及占用CPU过高问题的解决

问题:使用360安全浏览器登录网页版新浪微博,页面里的图标显示为英文字母 解决: 打开360浏览器的设置,点击【实验室】选项,在右边系统那一项,把【开启DirectWrite高清字体渲染支持...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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