腾讯空间、新浪微博、腾讯微博登录接口的使用。
注意:在网站对接前,请先申请注册好您的QQ登录appid、新浪登录Appkey、腾讯微博appkey。
1、引用JS文件
- <script src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="appid" type="text/javascript" language="javascript"></script> <!--腾讯QQ-->
- <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=Appkey" type="text/javascript" language="javascript"></script> <!--新浪微博-->
- <script type="text/javascript" src="http://mat1.gtimg.com/app/openjs/openjs.js"></script> <!--腾讯微博-->
其中,上面代码中的“APPID”替换为申请接入QQ登录时获得的appid;“Appkey”替换为申请接入新浪登录时获得的Appkey。
2、HTML代码
- <span id="tpa_login_qq"></span>
- <span id="tpa_login_sina"></span>
- <span id="tpa_login_tqq"></span>
3、JS脚本
- $(document).ready(function() {
- tpaLogin.init();
- });
- //第三方平台登录
- var tpaLogin = {
- init: function() {
- tpaLogin.qzone(); //初始化QQ登录
- tpaLogin.sina(); //初始化新浪登录
- tpaLogin.tqq(); //初始化腾讯微博登录
- },
- //保存登录用户信息
- param: {
- tpaUserSerialNo: '', //用户序号
- nickname: '', //用户昵称
- figureurl1: '', //用户头像Url(小图)
- figureurl2: '', //用户头像Url(中图)
- figureurl3: '', //用户头像Url(大图)
- gender: '' //性别(1:男、2:女)
- },
- //参数重置
- paramReset: function() {
- tpaLogin.param.tpaUserSerialNo = '';
- tpaLogin.param.nickname = '';
- tpaLogin.param.figureurl1 = '';
- tpaLogin.param.figureurl2 = '';
- tpaLogin.param.figureurl3 = '';
- },
- //QQ空间
- qzone: function() {
- QC.Login(
- {
- btnId: "tpa_login_qq",
- //按钮尺寸,可用值[A_XL| A_L| A_M| A_S| B_M| B_S| C_S],可选,默认B_S
- size: "B_M"
- },
- function(reqData, opts) {
- tpaLogin.paramReset();
- //获取登录用户信息
- QC.Login.getMe(function(openId, accessToken) {
- tpaLogin.param.tpaUserSerialNo = openId; //用户序号
- });
- tpaLogin.param.nickname = reqData.nickname;
- tpaLogin.param.figureurl1 = reqData.figureurl;
- tpaLogin.param.figureurl2 = reqData.figureurl_1;
- tpaLogin.param.figureurl3 = reqData.figureurl_2;
- if (reqData.gender == "男") {
- tpaLogin.param.gender = 1;
- } else {
- tpaLogin.param.gender = 2;
- }
- //根据返回数据,更换按钮显示状态方法
- var dom = document.getElementById(opts['btnId']),
- _logoutTemplate = [
- //头像
- '<span><img src="{figureurl}" class="{size_key}"/></span>',
- //昵称
- '<span>{nickname}</span>',
- //退出
- '<span><a href="javascript:QC.Login.signOut();">退出</a></span>'
- ].join("");
- dom && (dom.innerHTML = QC.String.format(_logoutTemplate, {
- nickname: QC.String.escHTML(reqData.nickname), //做xss过滤
- figureurl: reqData.figureurl
- }));
- },
- function(opts) {
- //注销成功
- alert('QQ登录 注销成功');
- }
- );
- },
- //新浪
- sina: function() {
- WB2.anyWhere(function(W) {
- W.widget.connectButton({
- id: "tpa_login_sina", //按钮ID
- type: "3,5", //按钮样式
- callback: {
- login: function(ret) {
- tpaLogin.paramReset();
- //获取登录用户信息
- tpaLogin.param.tpaUserSerialNo = ret.id; //用户序号
- tpaLogin.param.nickname = ret.screen_name;
- tpaLogin.param.figureurl1 = ret.profile_image_url;
- tpaLogin.param.figureurl2 = ret.avatar_large;
- tpaLogin.param.figureurl3 = ret.avatar_large;
- if (ret.gender == "m") {
- tpaLogin.param.gender = 1;
- } else {
- tpaLogin.param.gender = 2;
- }
- },
- logout: function() {
- //注销成功
- alert('新浪登录 注销成功');
- }
- }
- })
- })
- },
- //腾讯微博
- tqq: function() {
- T.init({
- appkey: appkey
- });
- var _loginBtn = $('<a href="javascript:;">登录到腾讯微博</a>').appendTo($("#tpa_login_tqq")).click(function() {
- T.login(function(loginStatus) { // 弹出登录窗口
- // 本次登录成功
- var _name = $('<span style="display:none;"></span>').appendTo($("#tpa_login_tqq"));
- var _logoutBtn = $('<a href="javascript:;" style="display:none;margin-left:5px;">退出</a>').appendTo($("#tpa_login_tqq")).click(function() {
- T.logout(function() {
- //注销成功
- alert('腾讯微博 注销成功');
- _name.hide();
- _logoutBtn.hide();
- _loginBtn.show();
- })
- });
- _name.show().text(loginStatus.nick);
- _logoutBtn.show();
- _loginBtn.hide();
- //获取微博信息
- T.api("/user/info")
- .success(function(response) {
- tpaLogin.param.tpaUserSerialNo = response.data.openid; //用户序号
- tpaLogin.param.nickname = response.data.nick;
- tpaLogin.param.figureurl1 = response.data.head;
- tpaLogin.param.figureurl2 = response.data.head;
- tpaLogin.param.figureurl3 = response.data.head;
- if (response.data.sex == "1") {
- tpaLogin.param.gender = 1;
- } else {
- tpaLogin.param.gender = 2;
- }
- })
- .error(function(code, message) {
- alert(message);
- });
- }, function(error) {
- // 本次登录成功
- //alert("登录失败");
- });
- });
- },
- //退出
- logout: function() {
- if (QC.Login != null && QC.Login.check()) {
- QC.Login.signOut();
- }
- else if (WB2 != null && WB2.checkLogin()) {
- WB2.logout();
- }
- else if (T.loginStatus()) {
- T.logout();
- }
- }
- };
附件
1、QQ登录文档:http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
2、新浪登录文档:http://open.weibo.com/wiki/index.php/Weibo-JS_V2#.E5.BE.AE.E5.8D.9A.E8.BF.9E.E6.8E.A5.E6.8C.89.E9.92.AE
3、腾讯微博文档:http://wiki.open.t.qq.com/index.php/Open-js
来源于:http://blog.csdn.net/pan_junbiao/article/details/17507065