网站接入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 相关文章推荐
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
js正则相关知识点专题
May 10 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
uni-app实现获取验证码倒计时功能
Nov 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实现递归循环每一个目录
2010/08/08 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
js实现数组转换成json
2015/06/26 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python字符串详细介绍
2015/05/09 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
PyQt5每天必学之组合框
2018/04/20 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
python selenium爬取斗鱼所有直播房间信息过程详解
2019/08/09 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
python函数超时自动退出的实操方法
2020/12/28 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
关于逃课的检讨书
2014/01/23 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
教师自查自纠材料
2014/10/14 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书