网站接入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回车完美实现tab切换功能
Mar 13 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
JavaScript canvas实现流星特效
May 20 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 file_get_contents设置超时处理方法
2013/09/30 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
python使用锁访问共享变量实例解析
2018/02/08 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
简述安装Slackware Linux系统的过程
2012/05/08 面试题
保险专业大专生求职信
2013/10/26 职场文书
资料员岗位职责范本
2015/04/13 职场文书
执行力心得体会范文
2016/01/11 职场文书
《春酒》教学反思
2016/02/22 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
Hive日期格式转换方法总结
2022/06/25 数据库