网站接入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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
javaScript实现滚动新闻的方法
Jul 30 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
Vue计算属性的使用
Aug 04 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
js实现电灯开关效果
Jan 19 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
防止登录页面出现在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
php 文章调用类代码
2011/08/11 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python urlopen()和urlretrieve()用法解析
2020/01/07 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
cf战队收人广告词
2014/03/14 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
个人年终总结怎么写
2015/03/09 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
高中历史教学反思
2016/02/19 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android