本站推荐

快速为网站加入QQ登陆的教程

来 源:共享世纪 作 者:lennyash 时间:2013-01-14 点击:
loading...

“QQ登录”是目前最为流行的网站社会化登陆方式,是腾讯公司提供给第三方网站的一种服务,可以让用户使用QQ帐号及信息在其它网站上登录,分享内容、同步信息,从而大大减少了用户注册的繁琐步骤,真正实现了一键登陆。借助QQ庞大的用户群,接入QQ登陆的第三方网站,可以轻松地提升网站的用户数。

connect_summary_1.png
常见的“QQ登陆”形式

既然是讨论如何“快速为网站加入QQ登陆的教程”,就废话少说,直奔主题:

一、申请接入,获取appid和appkey,申请地址:http://open.qq.com/

需要注意:
需要先注册成为应用开发者,一般选个人就可以了。
申请了开发者之后,打开申请QQ登录的链接。
这个页面中的,网站名称、域名、图标等都是填写你自己的,登录页地址和回调地址域名都是填写你自己的网站域名就可以了!
认证空间QQ号码填你自己的QQ号码就行!
申请之后,直接通过审核,然后在我的申请页面你就会得到用于登录的app ID和app KEY,如下图:

二、加入QQ登录按钮

1、新建登陆页 index.htm,在<head>标签中加入QQ登录的JS SDK库:
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="申请来的APPID" data-redirecturi="回调页面URL,如:http://www.2ky.cn/qqlogin/transfer.htm" charset="utf-8"></script>

2、在<body>标签中需要显示QQ登陆图标的地方,加入以下代码:

  1. <span id="qq_login_btn"></span> 
  2. <script type="text/javascript"> 
  3. QC.Login({//按默认样式插入QQ登录按钮 
  4. btnId:"qq_login_btn"    //插入按钮的节点id 
  5. }); 
  6. </script> 

注意:回调页面URL中的域名,必须与你之前回调地址域名中填写的根域一致。如果回调地址域名填了:abc.com,回调页面URL,就必须是http://www.abc.com/...。

3、新建回调页 transfer.htm,在<head>标签中加入:<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>;

4、在<body>标签中,加入以下代码:<h3>数据传输中,请稍后...</h3>,这样在回调过程中,可以看得很清楚,此步骤也可省略!

注意:因为注册时,填写了回调地址域名,且回调页面URL必须包含回调地址域名,所以无法在本机调试,调试可上传至任何支持静态html页面的空间。

上述演示:http://www.2ky.cn/qqlogin/

这只是一个基本实例的演示,QQ开放平台提供了非常丰富的API接口参数,可供开发者调用各类信息,今后我站将在此基础上继续讲解,请大家关注!

系列教程:

2、QQ登陆网页后用户状态的自定义教程

来源:http://www.2ky.cn/h/17/qqlogin.htm
转载要求注明来源,请尊重作者版权!

关键字: QQ登陆 qq互联 一键登陆

会员登陆close X