码迷,mamicode.com
首页 > Web开发 > 详细

【实用工具】网站引入QQ登录和新浪微博登录

时间:2014-12-20 14:09:14      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:

转自 :http://www.pengyaou.com/LegendsZ/File/2014/08/25/20140825100811471.html

在网站中引入了QQ和新浪微博登陆后,对网站登录门槛的降低就已经做到了,因为这个2个基本上是所有网名都有的,特别是QQ。下载详解下这2种登录方法。

1.QQ需要申请认证,以及创建应用申请。如下图:

技术分享

点击网站,填写网站信息,如下图:

技术分享

点击创建应用,等待审核,审核通过后我们就可以使用基本的API了。下面是QQ互联API列表。

技术分享

下面就是调用代码:

//引入JS脚本
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101044974" charset="utf-8"> 
//引入登录按钮以及回调函数:
<span style="margin-left:10px; margin-top:60px !important; float:left;"  
                id="qq_login_btn" data-role="none"> </span>   
        <script type="text/javascript">  
                    QC.Login({  
                        btnId: "qq_login_btn",  
                        scope: "all",  
                    },  
                    function() {  
                        QC.api("get_user_info").success(function(s) {  
                            var paras = {  
                                format: "json"  
                            };  
                            QC.api("get_info", paras).success(function(w) {  
                                var data = eval(w.data);  
                                var weiboUrl = "http://t.qq.com/"   data.data.name;  
                                var lc = data.data.location;  
  
                            }).error(function(e) {  
  
}).complete(function(c) { //完成请求回调  
                            
                                var nickName = s.data.nickname;  //称谓
                                var userQQSmallImage = s.data.figureurl_qq_1; //大小为40×40像素的QQ头像URL。  
                                userQQLargeImage = s.data.figureurl_qq_2; //大小为100×100像素的QQ头像URL。  
                                var userQQZoneImage = s.data.figureurl_1; //大小为50×50像素的QQ空间头像URL  
                            });  
                        });  
                    });  
                </script>  

演示地址:http://www.pengyaou.com/LegendsZ/Images/FileImage/QQLoginDemo.html

2.新浪微博:

登录新浪微博开放平台,点击进入管理中心,点击添加网站,先验证网站所有权,验证后会在我的网站,未上线栏目里增加刚刚我们填写的网站,然后需要提交审核,审核完成后获取到APPID即可使用。

技术分享

详细接口信息:

http://open.weibo.com/wiki/%E5%BE%AE%E5%8D%9AAPI

登录按钮引入以及代码:

//引入JS
<script src=" http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=APPKEY" type="text/javascript" charset="utf-8"></script>
//登录按钮以及回调函数
 <wb:login-button type="3,2" onlogin="login" onlogout="logout" style=" margin:0 auto; margin-top:50px;"> </wb:login-button>
    <script type="text/javascript">
                    function login(o) {
                        //
                        $.ajax({
                            type: "Get",
                            url: "https://api.weibo.com/2/users/show.json?source=2890452764&screen_name="   o.screen_name   "",
                            dataType: "jsonp",
                            success: function(data) {
                                var lc = data.data.location;
                                var nickName = o.screen_name;//称谓
                                var userQQLargeImage = o.avatar_large;//大头像
                                var weiboUrl = "http://weibo.com/u/"   o.idstr;//微博地址
                            },
                            error: function(xhr, msg, e) {
                                  alert(msg);
}
                        });
                    }

                    function logout() {
                        alert(‘logout‘);
                    }
                </script> 

演示地址:http://www.pengyaou.com/LegendsZ/eg/sinaLoginDemo.html

QQ登录和新浪微博登录的方法很相似,步骤也都一样。大体就是申请认证,引入代码,接收回调,注销登录。如果需要使用到一些比较高级的API的话,需要我们另行申请。这里就不介绍了。

 

【实用工具】网站引入QQ登录和新浪微博登录

标签:

原文地址:http://www.cnblogs.com/studies/p/4175312.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!