网站接入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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
jQuery 解析xml文件
Aug 09 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
vue 解决provide和inject响应的问题
Nov 12 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中防止恶意刷新页面的代码小结
2012/10/31 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
npm的lock机制解析
2019/06/20 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
Python GUI编程完整示例
2019/04/04 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
python实现飞船大战
2020/04/24 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
工作态度检讨书
2014/02/11 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
MySQL之高可用集群部署及故障切换实现
2021/04/22 MySQL