网站接入QQ登录的两种方法


Posted in Javascript onJuly 22, 2014

首先引入授权js文件

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101140406" data-redirecturi="http://127.0.0.1" charset="utf-8"></script>

然后接入QQ登录

第一种使用系统自带按钮登录,但是这样会弹出新窗口,不喜欢 
//调用QC.Login方法,指定btnId参数将按钮绑定在容器节点中 
QC.Login({ 
//btnId:插入按钮的节点id,必选 
btnId:"qqLoginBtn", 
//用户需要确认的scope授权项,可选,默认all 
scope:"all", 
//按钮尺寸,可用值[A_XL| A_L| A_M| A_S| B_M| B_S| C_S],可选,默认B_S 
size: "B_M" 
}, function(reqData, opts){//登录成功 
console.log(reqData, opts); 
//根据返回数据,更换按钮显示状态方法 
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();" rel="external nofollow" >退出</a></span>' 
].join(""); 
dom && (dom.innerHTML = QC.String.format(_logoutTemplate, { 
nickname : QC.String.escHTML(reqData.nickname), //做xss过滤 
figureurl : reqData.figureurl 
})); 
}, function(opts){//注销成功 
alert('QQ登录 注销成功'); 
}); 

第二种,使用自定义按钮<a>标签链接过去,然后成功后调用这个地址,a标签的href可以参考第一种window.location 
QC.api("get_user_info", {}) 
//指定接口访问成功的接收函数,s为成功返回Response对象 
.success(function(s){ 
console.log(s); 
//成功回调,通过s.data获取OpenAPI的返回数据 
alert("获取用户信息成功!当前用户昵称为:"+s.data.nickname); 
}) 
//指定接口访问失败的接收函数,f为失败返回Response对象 
.error(function(f){ 
//失败回调 
alert("获取用户信息失败!"); 
}) 
//指定接口完成请求后的接收函数,c为完成请求返回Response对象 
.complete(function(c){ 
//完成请求回调 
alert("获取用户信息完成!"); 
}); 

//检查是否登录 
if(QC.Login.check()){//如果已登录 
QC.Login.getMe(function(openId, accessToken){ 
alert(["当前登录用户的", "openId为:"+openId, "accessToken为:"+accessToken].join("\n")); 
}); 
//这里可以调用自己的保存接口 
//... 
}
Javascript 相关文章推荐
javascript制作2048游戏
Mar 30 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 Javascript
javascript简单链式调用案例分析
May 10 Javascript
Express框架之connect-flash详解
May 31 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
防止登录页面出现在frame中js代码
Jul 22 #Javascript
一个支付页面DEMO附截图
Jul 22 #Javascript
一个仿糯米弹框效果demo
Jul 22 #Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 #Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 #Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 #Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 #Javascript
You might like
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
python实现简单登陆流程的方法
2018/04/22 Python
python操作excel的方法
2018/08/16 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
python 和c++实现旋转矩阵到欧拉角的变换方式
2019/12/04 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
基于python检查矩阵计算结果
2020/05/21 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
公司成立感言
2014/01/11 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
监护人证明
2015/06/19 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android