QQ登录网站基础教程
网站通过在登录页放置“QQ登录“按钮，用户点击即可使用QQ帐号直接登录第三方网站，减少用户注册成本，为网站引流。
本站已经成功申请QQ网站登录，在此特地把过程留下共同学习。
QQ网站登录作用：网站通过在登录页放置“QQ登录“按钮，用户点击即可使用QQ帐号直接登录第三方网站，减少用户注册成本，为网站引流。
前提是你必须拥有一个自己的网站，然后在http://connect.qq.com/manage/index?apptype=web上申请开通。
申请前还需要经过身份验证，申请成功后会得到一个
下面我们来做一个最简单的登录例子，假设登录地址是index.html，回调地址back.html
index.html代码：
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>QQ登陆网站</title>
<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="100510949" data-redirecturi="http://www.scscms.com/back.html" charset="utf-8"></script>
</head>
<body>
<span id="qqLoginBtn"></span>
<script type="text/javascript">
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){//登录成功
//根据返回数据，更换按钮显示状态方法
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),
figureurl : reqData.figureurl
}));//这里是登陆成功执行的代码
}, function(opts){
//注销成功
alert('QQ登录 注销成功');
}
);
</script>
</body>
</html>
data-appid="100510949" data-redirecturi="http://www.scscms.com/back.html" 对应的是APPID与回调地址，需要改成你自己的。执行了QC.Login()函数后js会自动在id=qqLoginBtn的标签中生成图片按钮链接
点击图标后就会弹出登录窗口。
back.html代码：
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>QQ登陆</title> <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script> </head> <body> <div>请稍候正在登陆中……</div> </body> </html>
其实这只是一个空白过渡页，所以不需要特殊的html内容，只需要链接qc_loader.js文件，但要注意data-callback="true"属性表示可回调函数，只有添加了本属性，弹出的小窗口才会自动关闭并回调函数。本页面不建议写入其他js脚本，如果你需要在登录前与登录后执行脚本都请写在index.html页面的QC.Login()的函数内。
===========================分割线==========================
直接打开QQ登录弹窗示例：
QC.Login.showPopup({
appId:"222222",
redirectURI:"http://www.scscms.com/back.html"
});
注意：1.参数不是必传，不传此数时，登录成功后会跳回登录按钮所在页面。
2.如果已使用QC.Login方法，则不需再使用此方法。
其他函数：
QC.Login.signOut() //注销当前登录用户
QC.Login.check() //检测当前登录状态
QC.Login.getMe(function(openId, accessToken){}) //获取当前登录用户的Access Token以及OpenID
关键词: qq,腾讯,qq网站登录 编辑时间: 2013-09-02 16:50:38
3
高兴
0
支持
7
搞笑
4
不解
0
谎言
3
枪稿
0
震惊
0
无奈
1
无聊
0
反对
1
愤怒
中搜索：QQ登录网站基础教程
中搜索：QQ登录网站基础教程
- 暂无评论
文章图片 article Pictrue
网友评论