网站接入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中巧用cssText属性批量操作样式
Mar 13 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
Oct 21 Javascript
jQuery中的deferred使用方法
Mar 27 jQuery
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
详解Vue.js Mixins 混入使用
Sep 15 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
Vue实现简单分页器
Dec 29 Javascript
详解javascript函数写法大全
Mar 25 Javascript
vue实现商品列表的添加删除实例讲解
May 14 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 selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
ajax jquery实现页面某一个div的刷新效果
2021/03/04 jQuery
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
Python函数学习笔记
2008/10/07 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
对python中的装包与解包实例详解
2019/08/24 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
火车来了教学反思
2014/02/11 职场文书
统计学教授推荐信
2014/09/18 职场文书
商业门面租房协议书
2014/11/25 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
Nginx反向代理、重定向
2022/04/13 Servers