网站接入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 键盘事件的几个基本方法
Oct 30 Javascript
js对象的构造和继承实现代码
Dec 05 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
Nuxt的路由动画效果案例
Nov 06 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访问查询mysql数据的三种方法
2006/10/09 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
smarty简单分页的实现方法
2014/10/27 PHP
php表单处理操作
2017/11/16 PHP
asp.net和php的区别点总结
2019/10/10 PHP
Prototype Object对象 学习
2009/07/12 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
JS的数组迭代方法
2015/02/05 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
Python中的日期时间处理详解
2016/11/17 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
pandas的resample重采样的使用
2020/04/24 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
会计辞职信范文
2014/01/15 职场文书
商场中秋节活动方案
2014/02/07 职场文书
我们的节日春节活动方案
2014/08/22 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书