一般网站要先做个用户注册的功能页面,但我的网站名气不大,不需要要求用户注册,所以直接使用腾讯QQ登录的API接口。
如何使用JS_SDK让网站拥有QQ登录的功能,官网的这篇文章写得还算完整:http://connect.qq.com/intro/login/jssdk-demo 但是,里面有些地方并没有填写“实例”,只是说那个地方需要填写什么东西,但有时这样说是不够的,我就是试了挺多遍才知道填写的格式。
所以我重新整理下过程。
一:准备工作
域名注册,空间购买,网站接入申请这些我就不说了。使用API要求有个“回调地址”,所以本地调试就别想了。
我所用的域名是:http://bbs.yirenge.net/ 填写网站基本信息就是这样的:
二:制作一个回调网页
当访客点击“QQ登录”时,网页就跳转到“QQ某数据中心登录页面”,正确登录之后,就会返回到“我们制作的回调网页”,然后再跳到“访客刚刚点击登录的地方”。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伊人阁 </title>
</head>
<body>
<h3>
数据传输中,请稍后...</h3>
</body>
</html>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
charset="utf-8" data-callback="true"></script>
命名为:qc_back.htm 保存在根目录下。
三:首页进行QQ登录
1:默认形式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>伊人阁 代购服务 购物分享 售后服务</title>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="100575629" data-redirecturi="http://bbs.yirenge.net/qc_back.htm"
charset="utf-8"></script>
</head>
<body>
<span id="qq_login_btn" data-role="none"></span>
<script type="text/javascript">
QC.Login({//按默认样式插入QQ登录按钮
btnId: "qq_login_btn" //插入按钮的节点id
});
</script>
</body>
</html>
实现效果:
2:自定义效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>伊人阁 代购服务 购物分享 售后服务</title>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="100575629" data-redirecturi="http://bbs.yirenge.net/qc_back.htm"
charset="utf-8"></script>
</head>
<body>
<span id="qqLoginBtn"></span>
<script type="text/javascript">
//调用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: "A_XL"
}, function (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();">退出</a></span>'
].join("");
dom && (dom.innerHTML = QC.String.format(_logoutTemplate, {
nickname: QC.String.escHTML(reqData.nickname), //做xss过滤
figureurl: reqData.figureurl
}));
}, function (opts) {//注销成功
alert('QQ登录 注销成功');
}
);
</script>
</body>
</html>
获取用户信息的文档:http://wiki.connect.qq.com/get_user_info 修改一些参数可以改变登陆后显示的头像大小等信息,但我这边暂时显示不出其它头像,不知道是不是测试阶段(还没通过审核)的限制。
PS:现在我只能用自己的QQ进行登录。每次做了修改的话,需要清理浏览器缓存。
四:判断是否登录
我新建一个目录Mine,里面放一个Index.htm页面,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我的领地</title>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="100575629" data-redirecturi="http://bbs.yirenge.net/qc_back.htm"
charset="utf-8"></script>
<script src="../Resource/JQueryMobile/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
if (QC.Login.check()) {//如果已登录
//向“后台”请求数据
alert("欢迎登录");
QC.Login.getMe(function (openId, accessToken) {
//向“后台”请求当前“用户openId”的数据
$("#message").html("当前登录用户的openId为:" + openId + "\n accessToken为:" + accessToken);
});
}
</script>
</head>
<body>
<div id="message"></div>
</body>
</html>
•openId是用户身份的唯一标识,可以保存在本地,以便用户下次登录时可对应到其之前的身份信息,不需要重新授权。
•accessToken是表示当前用户在此网站/应用的登录状态与授权信息,也可以保存在本地。
分享到:
相关推荐
该组件操作十分简单。你只需要按照普通的操作在后台进行安装,然后稍作配置,就可以实现在网站上添加QQ登录,微博登陆等第三方登录的功能。该组件支持在线更新。
包括登录注册 及好友页面聊天页面 动态设置页面 基本的功能的实现 qq有的基本都有
4. 详细设计及实现 19 4.1界面设计 19 4.2数据输入输出设计 23 4.3代码实现 24 5 系统测试 31 5.1注册测试 31 5.2登陆测试 31 5.3私聊测试 32 5.4群聊测试 33 5.5文件传输测试 34 6 总结 35 参考文献 37 4.3.3...
C#实现的高仿QQ源码,可在广域网部署运行。绝对的好东西! 功能列表: (01)注册、登录、添加好友、好友列表。 (02)自拍头像。 (03)文字聊天、字体设置、GIF动态表情、窗口震动、截图、手写板、登录状态(在线...
已实现的功能 (01)注册、登录、添加好友、好友列表。 (02)自拍头像。 (03)文字聊天、字体设置、GIF动态表情、窗口震动、截图、手写板、登录状态(在线、离开、忙碌、勿打扰、隐身)、输入提醒 (04)群功能:...
已实现的功能 (01)注册、登录、添加好友、好友列表。 (02)自拍头像。 (03)文字聊天、字体设置、GIF动态表情、窗口震动、截图、手写板、登录状态(在线、离开、忙碌、勿打扰、隐身)、输入提醒 (04)群功能:...
基于java的QQ截屏工具的设计和实现能够实现对屏幕的随机截取,复制,保存以及添加文字等操作,便于用户对数据的处理。 该软件的功能: (1)随机获取屏幕指定区域; (2)编辑(添加文字)截图; (3)存储...
目 录 ...4. 详细设计及实现 19 4.1界面设计 19 4.2数据输入输出设计 23 4.3代码实现 24 5 系统测试 31 5.1注册测试 31 5.2登陆测试 31 5.3私聊测试 32 5.4群聊测试 33 5.5文件传输测试 34 6 总结 35
目 录 摘 要 I Abstract II 1项目意义及功能简介 1 1.1项目设置的目的以及意义 1 1.2 论文页眉页脚的编排 2 2开发工具介绍 1 ...6.3测试的功能 19 6.3测试方法 20 7 总 结 22 结 论 23 参 考 文 献 24 致 谢 25
GG2014 已经实现了如下功能: (01)注册、登录、添加好友、好友列表。 (02)自拍头像。 (03)文字聊天、字体设置、GIF动态表情、窗口震动、截图、手写板、登录状态 (在线、离开、忙碌、勿打扰、隐身)、...
本文实例讲述了Android实现使用微信登录第三方APP的方法。分享给大家供大家参考,具体如下: 使用微信登录APP,免去注册过程,现在已经有很多的类似应用了。集成该功能过程不复杂,但还是有一些地方需要注意的。 ...
GGTalk 最新版本 V5.1,已经实现的功能: 01、注册、登录、查找用户、添加好友、好友列表。 02、自拍头像。 03、文字聊天、字体设置、GIF动态表情、窗口震动、截图、手写板、登录状态(在线、离开、忙碌、勿打扰...
19:后台网站属性设置增加自定义Bottom菜单,是否开启注册用户签收功能。 20:初始化时可选择部份初始化,统计数据可以初始化。 21:全新的个人用户 博客 功能 22:全面支持RSS聚合新闻 XML 功能 23:全面修改总...
19.系统集成了定时器功能,方便二次开发的用户进行定时执行任务操作,例如:备份数据库、发送邮件等。 20.系统支持用户注册、登录、忘记密码找回、邮件激活绑定等功能。 21.实现了系统注册用户之间的即时聊天功能...
带ACCESS数据库,ASP实现三级联动功能,如果有不清楚的,请加QQ:450200641或者发邮件到zhongjin-19@163.com,在下会详述。不好意思,写了些多余的话,CSDN要求多写的……
项目功能 1.注册与登录.... 4 1.1注册.... 5 1.2 找回密码.... 8 1.3 登录(验证码).... 9 1.4 修改用户信息.... 11 2.待办列表.... 12 2.1待办列表页面.... 12 2.2增加待办项.... 13 2.3修改待办项.... 14...
companyweb整站系统V8.0版本发布 你只要会 HTML 就能做一个动态网站 ...19.站内短信功能 20.编辑器上传图片功能 21.下载管理 22.系统日志管理 联系QQ:931057233 演示地址: http://www.safe-120.com/
17. 增加管理员登录日志,有利于网站异常分析 18. 相关商品、热卖商品、最近浏览商品可选三种显示形式,分别是: 大图片显示、文字显示、小图片结合文字显示 19. 首页、类别、商品详细介绍页面图片尺寸智能设置,...
第6章 企业qq系统(c# 3.5+ microsoft sql server 2000实现) 241 视频讲解:1小时7分钟 6.1 开发背景 242 6.2 需求分析 242 6.3 系统设计 242 6.3.1 系统目标 242 6.3.2 系统功能结构 242 6.3.3 ...
<br>5、其他功能和QQ的家园设计一样 <br>6、加入了会员之间的在线即时聊天功能 <br>7、加入访客前台能在线试用小屋设计跟虚拟形象的装扮 <br>8、加入访客在线心情小贴士 <br>9、加入会员等级,分...