您当前位置:首页 > 文章中心 > SCSCMS > 功能讲解

QQ登录网站实战教程

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2013-09-02   阅读次数: 1020   查看权限: 游客查看

以本站例子讲解QQ登录网站功能。

请先查看 QQ登录网站基础教程:http://www.scscms.com/html/article/20130902-qq-web-login.html

基础教程中讲到在纯html+javascrpt下QQ登陆过程。但这并没有存入数据库中以及存储时的问题。

    //QQ登陆开始,建议写在函数内,当检查到没有登录时调用。
    QC.Login({
        btnId:"qqLoginBtn",//生成登录按钮的ID
        size: "B_M"//QQ图标大小
    }, function(reqData, opts){
        //登陆成功执行
        var name=QC.String.escHTML(reqData.nickname);//获取QQ会员名
        var info={
            name:name.slice(-8),//会员名取后8位字符
            gender:reqData.gender,//性别:男|女
            figureurl:reqData.figureurl_qq_2 //头像100X100
        };
        if(QC.Login.check()){
            //QQ成功登陆
            QC.Login.getMe(function(openId, accessToken){
                info.openId=openId;
                info.accessToken=accessToken;
                //开始写入数据库
            });
        }
    },function(opts){
        //console.log("QQ注销成功");
    });

登陆成功后,建一个对象info用来储存数据。因会员名在本系统中有限制,所以只取最多8位字符。然后加上姓别、头像、opedId、accessToken。特别说明一下:QQ登录是不可能获取QQ号的,最重要的信息就是openId与accessToken,这是QQ身份的唯一标识,也是调用其他API需要的KEY。接下来就是把信息POST到后台写入数据库。

$.getJSON("/inc/scs_ajax.asp?action=qq_login",info,function (json) {
    if (json.err){
        $.messager.alert("系统提示",json.err,"error");
    }else if(json.qq=="qq"){
        //QQ登陆成功!请绑定本站会员或者新建帐号!        
    }else{
        //成功登录并写入数据库
    }
});

后台接收到数据后,先查找数据库,看有没有相应的openId与accessToken存在在数据库,没有就先插入一条记录,并以json.qq=qq标明。返回后显示绑定帐号界面。

绑定后删除那条记录。不绑当可新建会员,如果会员不绑定也不新建会员,那下次登录又会提醒,总之不绑定又不新建此会员只能以QQ号来登录,因为数据库的密码是随机的,你不新建就不可能知道那个密码。而绑定会员是把会员的信息与此QQ号信息合并。比如金币、经验值累加。

        $("#username").val(json.name);
        var txt="绑定帐号",nameID="bind_name";
        $("input[name='bind_radio']").click(function(){
            var i=$(this).val();
            txt=i==1?"新建帐号":"绑定帐号";
            nameID=i==1?"username":"bind_name";
            $("li.bind_name").hide().eq(i).show();
            $("#bind_accounts").linkbutton({"text":txt});
        });
        $("#bind_accounts").unbind("click").click(function(){
            if($.checksql("用户",nameID,1,2,20)&&$.checksql("密码","bind_pass",1,6,12)&&$.checksql("验证码","bind_code",0,4,4)){
                $.messager.confirm("系统提示", "您确定要"+txt+"吗?", function (r) {
                    if (r) {
                        user_login_window(0);//显示会员信息
                        info.radio=$("input[name='bind_radio']:checked").val();
                        info.name=$("#"+nameID).val();//会员名
                        info.mima=$("#bind_pass").val();//密码
                        info.code=$("#bind_code").val();//验证码
                        $.getJSON("/inc/scs_ajax.asp?action=qq_bind",info,function (json){
                            if (json.err){
                                user_login_window(3);
                                $.messager.alert("系统提示",json.err,"error");
                            }else{
                                $("#username,#bind_name,#bind_pass").val("");
                                user_login_window(json);
                                window.rb_info("恭喜您!成功"+txt+"!", "ok","show");
                            }
                        });
                    }
                });
            }
        })

这里为了安全,绑定或者新建会员同样需要传与openId与accessToken区别是绑定还是新建就靠info.radio。最终显示会员信息。同时建议把openId与accessToken以cookies存储以便下次使用。

以上代码整合为:

//登陆窗口
function user_login_window(id){
    if(typeof id =="number"){
        $("#login_div").animate({scrollTop:id*150},"slow","easeOutBounce");
        if(1==id&&$("#qqLoginBtn").html()==""){
            qq_login();//QQ登陆
        }
    }else if(typeof id =="object"){
        var html='<li>会员:'+id.name+" "+id.vip+'</li><li>经验:'+id.exper+'</li><li>金币:'+id.money+'</li><li>操作:<a href="/user/index.asp">会员后台</a></li><li>操作:<a href="javascript:void(0)" onclick="login_out()">退出登陆</a></li><li>上次登陆日期:'+id.last+'</li>';
        $(".login_ul:eq(0)").html(html).css("background","url('"+id.pic+"') no-repeat 150px 20px");
    }
}
//QQ登陆
function qq_login(){
    QC.Login({
        btnId:"qqLoginBtn",
        size: "B_M"
    }, function(reqData, opts){
        var name=QC.String.escHTML(reqData.nickname);
        var info={
            name:name.slice(-8),
            gender:reqData.gender,
            figureurl:reqData.figureurl_qq_2
        };
        if(QC.Login.check()){
            QC.Login.getMe(function(openId, accessToken){
                info.openId=openId;
                info.accessToken=accessToken;
                $.getJSON("/inc/scs_ajax.asp?action=qq_login",info,function (json) {
                    if (json.err){
                        $.messager.alert("系统提示",json.err,"error");
                    }else if(json.qq=="qq"){
                        window.rb_info("QQ登陆成功!请绑定本站会员或者新建帐号!","ok","show");
                        user_login_window(3);//提示绑定
                        user_login_window(json);//显示信息
                        $("#username").val(json.name);
                        var txt="绑定帐号",nameID="bind_name";
                        $("input[name='bind_radio']").click(function(){
                            var i=$(this).val();
                            txt=i==1?"新建帐号":"绑定帐号";
                            nameID=i==1?"username":"bind_name";
                            $("li.bind_name").hide().eq(i).show();
                            $("#bind_accounts").linkbutton({"text":txt});
                        });
                        $("#bind_accounts").unbind("click").click(function(){
                            //绑定帐号..............
                            if($.checksql("用户",nameID,1,2,20)&&$.checksql("密码","bind_pass",1,6,12)&&$.checksql("验证码","bind_code",0,4,4)){
                                $.messager.confirm("系统提示", "您确定要"+txt+"吗?", function (r) {
                                    if (r) {
                                        user_login_window(0);
                                        info.radio=$("input[name='bind_radio']:checked").val();
                                        info.name=$("#"+nameID).val();
                                        info.mima=$("#bind_pass").val();
                                        info.code=$("#bind_code").val();
                                        $.getJSON("/inc/scs_ajax.asp?action=qq_bind",info,function (json){
                                            if (json.err){
                                                user_login_window(3);
                                                $.messager.alert("系统提示",json.err,"error");
                                            }else{
                                                $("#username,#bind_name,#bind_pass").val("");
                                                user_login_window(json);
                                                window.rb_info("恭喜您!成功"+txt+"!", "ok","show");
                                            }
                                        });
                                    }
                                });
                            }
                        })
                    }else{
                        user_login_window(json);
                        user_login_window(0);
                    }
                    //先查找数据库,有没有对应的openId,没有就先插入一条记录,返回后显示绑定帐号界面。绑定后删除那条记录。不绑当新会员。
                })
            });
        }
    },function(opts){
        //console.log("QQ登录 注销成功");
    });
}

 

关键词: 实战教程,腾讯,qq网站登录   编辑时间: 2013-09-02 21:21:44

  • 感到高兴

    1

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    1

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
71.43%(5)
28.57%(2)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介
  • QQ登录网站实战教程