如何将QQ第三方登录集成到网站的详细教程

学习NO.1 · 发表于 2016-1-5 22:27:34

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由学习NO.1 于 2016-1-5 22:29 编辑

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

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

如何将QQ第三方登录集成到网站的详细教程01

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

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

填写相应信息并验证。

如何将QQ第三方登录集成到网站的详细教程03

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

[

如何将QQ第三方登录集成到网站的详细教程04

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

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

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101215352" charset="utf-8" data-redirecturi="http://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>

复制代码

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

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！