网站接入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 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
使用Angular.js实现简单的购物车功能
Nov 21 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
Mar 06 Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 Javascript
微信小程序实现搜索功能
Mar 10 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之Smarty模板使用方法示例详解
2014/07/08 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
js字符串转成JSON
2013/11/07 Javascript
php中给js数组赋值方法
2014/03/10 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
超简单使用Python换脸实例
2019/03/27 Python
Python中的类与类型示例详解
2019/07/10 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
校领导推荐信
2013/11/01 职场文书
十八大宣传标语
2014/10/09 职场文书
质量承诺书格式范文
2015/04/28 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis