QQ快速登录功能

发布时间：2020-06-20 08:03:20 作者：365850153
来源：网络阅读：402

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

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

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

QQ快速登录功能

方法/步骤1

1
首先在百度上搜索【QQ登录】，然后进入一个名为【QQ登录-QQ互联】的网站。
或者是搜索”QQ开发开发平台“或者直接打开：http://connect.qq.com/
在网页右上角，点击【登录】，登录自己的QQ账号。
登录完成后在页面左边，点击【申请加入】。
这里认真填写开发者的申请信息，并点击【注册】，完成注册。
注册完成后，在管理中心右上角位置，点击【创建应用】。在弹出的窗口中选择应用的平台，我这里就以电脑平台作为演示。
这里就对应填写网站信息就可以了，不过我重点讲一下回调地址。回调地址很多人都不知道是什么也不会填，其实只要填写不带http://的地址就可以了。然后把鼠标放到【验证】这里，会弹出一条代码，我们把这条代码复制起来。
然后用FTP打开网站源码，找到网站头部文件，把这条代码放到【<head>与</head>之间】。然后保存起来，再回到刚才复制代码的位置点击【开始验证】。
验证成功后，我们发现还需要审核，而现在还不能提交审核，原因是还没有添加图片素材，我们点击添加【图片素材】。
在图片素材时，对应上传相同大小的图片素材。注意：这里的图片素材，最好选择网站的LOGO，因为在用户使用QQ登录时，这些图片会展现在右下角弹出的窗口中。
上传好图片素材后，我们单击顶部菜单栏中的【管理中心】，在管理中心下面，先点击【未审核】，然后再未审核的应用里再点击应用名称，进入该应用。
进入该应用后，我们便可点击【提交申请】。点击提交申请后，会弹出一个提示窗口，提示我们是否确认提交，我们选择【确认提交】。
等待审核成功，在审核期间，我们就可以先把APP ID和APP KEY填到网站上。在页面左上角我们可以看到APP ID的信息，复制他们，然后到网站后台填写上去，大功告成！

上面是获取appid和appkey：

下面是实现源码：

登录页面：

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

<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>


default.aspx页面：

<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>

<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>

具体步骤参考官网：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快速登录功能

方法/步骤1

相关阅读