网站接入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.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
javascript History对象原理解析
Feb 17 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
js实现3D旋转相册
Aug 02 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
防止登录页面出现在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
2020年4月放送!《Princess Connect Re:Dive》制作组 & 角色声优公开!
2020/03/06 日漫
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
javascript实现禁止右键和F12查看源代码
2014/12/26 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
selenium+python实现自动登录脚本
2018/04/22 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
python中正则表达式与模式匹配
2019/05/07 Python
计算s=f(f(-1.4))的值
2014/05/06 面试题
什么是makefile? 如何编写makefile?
2012/08/08 面试题
签约仪式主持词
2014/03/19 职场文书
妇联主席先进事迹
2014/05/18 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
开国大典观后感
2015/06/04 职场文书
南极大冒险观后感
2015/06/05 职场文书
导游词幽默开场白
2019/06/26 职场文书
七年级作文之英语老师
2019/10/28 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
Spring 使用注解开发
2022/05/20 Java/Android