网站接入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中的ready函数冲突的解决方法
May 17 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
ionic3 懒加载
Aug 16 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
基于jQuery拖拽事件的封装
Nov 29 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
用Socket发送电子邮件
2006/10/09 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
yii2控制器Controller Ajax操作示例
2016/07/23 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
浅析Python基础-流程控制
2016/03/18 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
爱普生美国官网:Epson美国
2018/11/05 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
什么是索引指示器
2012/08/20 面试题
一年级班主任寄语
2014/01/19 职场文书
大课间活动实施方案
2014/03/06 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
先进工作者推荐材料
2014/12/23 职场文书
2015年个人思想总结
2015/03/09 职场文书