当前位置: 秋叶网络博客 网站建设 ◊ 把QQ第三方登录集成到网站教程

把QQ第三方登录集成到网站教程

作者: 发表时间:2015年05月01日

为了从访客的便利性出发,很多网站都集成了第三方登录,但是大部分网站都是用的插件,或者是程序自带的功能,那么对于一个没有此项功能的网站来说,比如说个人网站wordpress,如何集成QQ第三方登录按钮?今天手把手教大家怎么实现按钮的申请和布置。

首先打开QQ开放平台网址http://connect.qq.com/intro/login,选择申请加入,

申请加入qq互联

会提示让你登录,选择qq快捷登录后会进入QQ互联界面,点击右上角的“创建应用”,选择“网站”。

选择网站应用

填写相应信息并验证。

填写相应信息并验证

验证之后点击创建应用,跳转到你的应用中心,里面有你这个应用的APP ID和APP KEY,点击“图标素材”上传图标,一定要按照它的要求上传png格式的图标,大小要一致,完善之后就可以提交审核了。

完善图标

在审核期间,把登录图标的代码布置上自己的网站上,这样审核才会容易通过。布置代码的方法为:

在网站的head头部加入以下代码:

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101215352" charset="utf-8" data-redirecturi="//www.mizuiren.com"></script>

红色的数字修改成你的APP ID,红色的网址修改成你的网站地址,然后在网站底部加入以下代码:

//qq第三方登录
<script>jQuery(document).ready(function($){
QC.Login({
btnId: "qq_login_btn",
scope: "all", },
function() {
QC.api("get_user_info").success(function(s) {
var paras = { format: "json" };
QC.api("get_info", paras).success(function(w) {
var data = eval(w.data);
// weiboUrl = "http://t.qq.com/"+data.data.name;
// lc = data.data.location;
}).error(function(e) {
}).complete(function(c) { //完成请求回调
document.getElementById("qq_login_btn").style.display="none";
var userQQSmallImage = s.data.figureurl_qq_1; //大小为40×40像素的QQ头像URL。
// userQQLargeImage = s.data.figureurl_qq_2; //大小为100×100像素的QQ头像URL。
document.getElementById("QQImg").src=s.data.figureurl_qq_2;
document.getElementById("QQLogin").innerHTML=s.data.nickname+"(注销登录)";
document.getElementById("MainQQ").style.display="block";
document.getElementById("QQLogin").onclick=function(){
QC.Login.signOut();location.reload();}
// var userQQZoneImage = s.data.figureurl_1; //大小为50×50像素的QQ空间头像URL
}); }); }); });
</script>

这些准备都做好了,就剩下html按钮位置的部署了,在你的网站需要显示qq登录按钮的地方加入以下代码:

<span id="MainQQ" style="display:none;"><img id="QQImg"><a id="QQLogin">QQ登录</a></span>
<span id="qq_login_btn"></span>

刷新你的网站吧,哈哈,登录图标是不是出来了,点击登录试试看,已经可以成功回调了。至于整合到网站的会员数据库中就靠大家去整了。

0
文章作者: 秋叶网络博客,本站鼓励原创。
转载请注明本文地址:https://www.mizuiren.com/346.html
目录:网站建设 | 标签:QQ互联登录 | 9933次阅读