码迷,mamicode.com
首页 > 其他好文 > 详细

QQ快速登录功能

时间:2015-08-11 19:22:53      阅读:579      评论:0      收藏:0      [点我收藏+]

标签:开发平台   管理中心   百度   开发者   电脑   qq快速登录功能   

如果想让网站实现QQ登录功能,前提是网站要具备api的接口,如果没有这个接口,那就很难实现这个功能了。

网站QQ登录功能,是通过接入QQ登录,用户可以使用QQ账号直接登录接入的站点,从而可以达到无需注册也能登录成为网站用户。快速方便有效,可大大提高网站的用户注册数量,提升网站人气。

下面小编就告诉大家,实现这个功能的操作方法。

技术分享

方法/步骤1

  1. 1

    首先在百度上搜索【QQ登录】,然后进入一个名为【QQ登录-QQ互联】的网站。

    技术分享

  2. 或者是搜索”QQ开发开发平台“或者直接打开:http://connect.qq.com/


  3. 在网页右上角,点击【登录】,登录自己的QQ账号。

    技术分享

  4. 登录完成后在页面左边,点击【申请加入】。

    技术分享

  5. 这里认真填写开发者的申请信息,并点击【注册】,完成注册。

    技术分享

  6. 注册完成后,在管理中心右上角位置,点击【创建应用】。在弹出的窗口中选择应用的平台,我这里就以电脑平台作为演示。

    技术分享

    技术分享

  7. 这里就对应填写网站信息就可以了,不过我重点讲一下回调地址。回调地址很多人都不知道是什么也不会填,其实只要填写不带http://的地址就可以了。然后把鼠标放到【验证】这里,会弹出一条代码,我们把这条代码复制起来。

    技术分享

  8. 然后用FTP打开网站源码,找到网站头部文件,把这条代码放到【<head>与</head>之间】。然后保存起来,再回到刚才复制代码的位置点击【开始验证】。

    技术分享

  9. 验证成功后,我们发现还需要审核,而现在还不能提交审核,原因是还没有添加图片素材,我们点击添加【图片素材】。

    技术分享

  10. 在图片素材时,对应上传相同大小的图片素材。注意:这里的图片素材,最好选择网站的LOGO,因为在用户使用QQ登录时,这些图片会展现在右下角弹出的窗口中。

    技术分享

  11. 上传好图片素材后,我们单击顶部菜单栏中的【管理中心】,在管理中心下面,先点击【未审核】,然后再未审核的应用里再点击应用名称,进入该应用。

    技术分享

    技术分享

  12. 进入该应用后,我们便可点击【提交申请】。点击提交申请后,会弹出一个提示窗口,提示我们是否确认提交,我们选择【确认提交】。

    技术分享

    技术分享

  13. 等待审核成功,在审核期间,我们就可以先把APP ID和APP KEY填到网站上。在页面左上角我们可以看到APP ID的信息,复制他们,然后到网站后台填写上去,大功告成!

    技术分享

    技术分享




上面是获取appid和appkey:

下面是实现源码:

登录页面:

<!--start QQ登录-->
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101240478" data-redirecturi="http://www.baby0898.com" charset="utf-8"></script><!--head引用的js文件-->

<!--data-appid:即是申请获取到的appid,data-redirecturi:即是申请时填写的回调地址-->

 <span id="qqLoginBtn"></span>
<script type="text/javascript">

    var cbLoginFun = function (oInfo, oOpts) {
        //alert(oInfo.nickname); // 昵称
        //alert(oOpts.btnId);    // 点击登录的按钮Id
        window.location.href = "http://www.baby0898.com/default.aspx?nickname=" + escape(oInfo.nickname) + "&figureurl=" + escape(oInfo.figureurl);
    };
    QC.Login({ btnId: "qqLoginBtn", size: "C_S" }, cbLoginFun);

</script>
<!--end QQ登录-->



default.aspx页面:

<!--begin QQ 登录-->
<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script><!--head引用的js文件-->

<div id="QQLogin">
<span id="QQnickName">游客</span>
<span id="QQID">请登录</span>
<span id="QQExit"><a href="javascript:QC.Login.signOut();">退出</a></span><!--退出登录-->
</div>
<script type="text/javascript">
    //获取url参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }

    window.onload = function () {
        var name = getQueryString("nickname"); //获取QQ登录后的昵称
        var figureurl = getQueryString("figureurl"); //获取QQ登录后图像
        $("#QQnickName").html(name);
    }


    //判断QQ是否已经登录,获取QQ登录的唯一ID标识
    if (QC.Login.check()) {//如果已登录  
        //向“后台”请求数据  
        //alert("欢迎登录");
        QC.Login.getMe(function (openId, accessToken) {
            //alert(openId);//openId是用户身份的唯一标识
            $("#QQID").html(openId);
        });
    } else {
        $("#QQLogin").hide();
    }

</script>

<!--end QQ 登录-->


具体步骤参考官网:http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E

也可以参考:http://blog.csdn.net/wowkk/article/details/17315637


QQ快速登录功能

标签:开发平台   管理中心   百度   开发者   电脑   qq快速登录功能   

原文地址:http://haihuiwei.blog.51cto.com/4789207/1683565

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!