网站接入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 jQuery中的DOM操作
Mar 21 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
AngularJS实现表单验证
Jan 28 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
HTML+JS实现在线朗读器
Feb 15 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
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python装饰器基础详解
2016/03/09 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
python实现图片识别汽车功能
2018/11/30 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python中threading开启关闭线程操作
2020/05/02 Python
Python调用飞书发送消息的示例
2020/11/10 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
艺术节主持词
2014/04/02 职场文书
运动会主持词大全
2015/07/02 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python