网站接入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 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
基于jquery的放大镜效果
May 30 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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 获取SWF动画截图示例代码
2014/02/10 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
JS的反射问题
2010/04/07 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python 解压pkl文件的方法
2018/10/25 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
通过Python扫描代码关键字并进行预警的实现方法
2020/05/24 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
String和StringBuffer的区别
2015/08/13 面试题
春节活动策划方案
2014/01/24 职场文书
大学生自荐书范文
2015/03/05 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
2015年路政工作总结
2015/05/22 职场文书
投资入股协议书
2016/03/22 职场文书
2019年思想汇报
2019/06/20 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python