必威体育Betway必威体育官网
当前位置:首页 > IT技术

网站实现QQ登录功能

时间:2019-06-16 16:43:12来源:IT技术作者:seo实验室小编阅读:88次「手机版」
 

qq网页登陆器

转自: http://blog.csdn.net/wowkk/article/details/17315637

一般网站要先做个用户注册的功能页面,但我的网站名气不大,不需要要求用户注册,所以直接使用腾讯QQ登录的API接口。

   如何使用JS_SDK让网站拥有QQ登录的功能,官网的这篇文章写得还算完整:http://connect.qq.com/intro/login/jssdk-demo  但是,里面有些地方并没有填写“实例”,只是说那个地方需要填写什么东西,但有时这样说是不够的,我就是试了挺多遍才知道填写的格式。

   所以我重新整理下过程。

   一:准备工作

域名注册,空间购买,网站接入申请这些我就不说了。使用API要求有个“回调地址”,所以本地调试就别想了。

我所用的域名是:http://bbs.yirenge.net/   填写网站基本信息就是这样的:

 QQ登陆功能申请

   二:制作一个回调网页

当访客点击“QQ登录”时,网页就跳转到“QQ某数据中心登录页面”,正确登录之后,就会返回到“我们制作的回调网页”,然后再跳到“访客刚刚点击登录的地方”。

[html] view plain copy

  1. <html>  
  2. <head>  
  3.     <meta http-equiv="content-Type" content="text/html; charset=utf-8" />  
  4.     <title>伊人阁 </title>  
  5. </head>  
  6. <body>  
  7.     <h3>  
  8.         数据传输中,请稍后...</h3>  
  9. </body>  
  10. </html>  
  11. <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"  
  12.     charset="utf-8" data-callback="true"></script>  

  命名为:qc_back.htm  保存在根目录下。

三:首页进行QQ登录

  1:默认形式

[html] view plain copy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>伊人阁 代购服务 购物分享 售后服务</title>  
  5.     <script type="text/JavaScript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"  
  6.         data-APPid="100575629" data-redirecturi="http://bbs.yirenge.net/qc_back.htm"  
  7.         charset="utf-8"></script>  
  8. </head>  
  9. <body>  
  10.     <span id="qq_login_btn" data-role="none"></span>  
  11.     <script type="text/javascript">  
  12.         QC.Login({//按默认样式插入QQ登录按钮  
  13.             btnId: "qq_login_btn"   //插入按钮的节点id  
  14.         });                 
  15.     </script>  
  16. </body>  
  17. </html>  

实现效果:

2:自定义效果

[html] view plain copy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>伊人阁 代购服务 购物分享 售后服务</title>  
  5.     <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"  
  6.         data-appid="100575629" data-redirecturi="http://bbs.yirenge.net/qc_back.htm"  
  7.         charset="utf-8"></script>  
  8. </head>  
  9. <body>  
  10.     <span id="qqLoginBtn"></span>  
  11.     <script type="text/javascript">  
  12.         //调用QC.Login方法,指定btnId参数将按钮绑定在容器节点中  
  13.         QC.Login({  
  14.             //btnId:插入按钮的节点id,必选  
  15.             btnId: "qqLoginBtn",  
  16.             //用户需要确认的scope授权项,可选,默认all  
  17.             scope: "all",  
  18.             //按钮尺寸,可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S],可选,默认B_S  
  19.             size: "A_XL"  
  20.         }, function (reqData, opts) {//登录成功  
  21.             //根据返回数据,更换按钮显示状态方法  
  22.             var dom = document.getelementbyid(opts['btnId']),  
  23.        _logoutTemplate = [  
  24.             //头像  
  25.             '<span><img src="{figureurl}" class="{size_key}"/></span>',  
  26.             //昵称  
  27.             '<span>{nickname}</span>',  
  28.             //退出  
  29.             '<span><a href="javascript:QC.Login.signOut();">退出</a></span>'  
  30.        ].join("");  
  31.             dom && (dom.innerHTML = QC.string.format(_logoutTemplate, {  
  32.                 nickname: QC.String.escHTML(reqData.nickname), //做xss过滤  
  33.                 figureurl: reqData.figureurl  
  34.             }));  
  35.         }, function (opts) {//注销成功  
  36.             alert('QQ登录 注销成功');  
  37.         }  
  38. );  
  39.     </script>  
  40. </body>  
  41. </html>  

获取用户信息的文档:http://wiki.connect.qq.com/get_user_info  修改一些参数可以改变登陆后显示的头像大小等信息,但我这边暂时显示不出其它头像,不知道是不是测试阶段(还没通过审核)的限制。

PS:现在我只能用自己的QQ进行登录。每次做了修改的话,需要清理浏览器缓存。

四:判断是否登录

我新建一个目录Mine,里面放一个Index.htm页面,代码如下:

[html] view plain copy

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>我的领地</title>  
  5.     <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"  
  6.         data-appid="100575629" data-redirecturi="http://bbs.yirenge.net/qc_back.htm"  
  7.         charset="utf-8"></script>  
  8.     <script src="../Resource/JQueryMobile/jquery.js" type="text/javascript"></script>  
  9.     <script type="text/javascript">  
  10.         if (QC.Login.check()) {//如果已登录  
  11.             //向“后台”请求数据  
  12.             alert("欢迎登录");  
  13.             QC.Login.getMe(function (openId, accessToken) {  
  14.             //向“后台”请求当前“用户openId”的数据  
  15.                 $("#message").html("当前登录用户的openId为:" + openId + "\n accessToken为:" + accessToken);  
  16.             });  
  17.         }  
  18. </script>  
  19. </head>  
  20. <body>  
  21. <p id="message"></p>  
  22. </body>  
  23. </html>  

[plain] view plain copy

  1. •openId是用户身份的唯一标识,可以保存在本地,以便用户下次登录时可对应到其之前的身份信息,不需要重新授权。  
  2. •accessToken是表示当前用户在此网站/应用的登录状态与授权信息,也可以保存在本地。  

相关阅读

一加携QQ飞车开启全国挑战赛 90Hz流体屏引领高帧游戏

近日,一加手机宣布将与QQ飞车手游联手开启&ldquo;OnePlus QQ飞车手游全国挑战赛&rdquo;。活动将于7月11日-7月15日 18:00~23:00期

【Ubuntu】腾讯QQ安装

参考链接:Ubuntu 16.04安装QQ国际版图文详细教程 安装包下载:             链接: https://pan.baidu.com/s/19Pf7T1X_Kucj-C

微信开发者工具首次登录,显示网络连接失败

微信开发者工具首次登录,显示网络连接失败首次打开是下面这样电脑是64位的操作系统,所以一直下的是64位的版本,查看网上的解决办法:删

QQ浏览器接入乐播投屏SDK,智能物联凸显投屏重要性

作为国内率先接入乐播投屏功能的浏览器&mdash;&mdash;QQ浏览器,如期发布了9.7安卓端版本此次改版,重点改善了视频投屏功能引导及页

手机浏览器,QQ通讯组件无法唤醒QQ客户端

新博客地址昨天遇到了这个问题,在网页端可以正常使用QQ通讯组件,但是放到了移动端就不行。试了好久终于搞定,在此分享一下我的经验,如

分享到:

栏目导航

推荐阅读

热门阅读