文章分类 Classification
QQ登录网站实战教程
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2013-09-02 阅读次数: 1383 查看权限: 游客查看
以本站例子讲解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
2
高兴
0
支持
0
搞笑
0
不解
0
谎言
0
枪稿
0
震惊
0
无奈
1
无聊
0
反对
0
愤怒
71.43%(5)
28.57%(2)
中搜索：QQ登录网站实战教程
中搜索：QQ登录网站实战教程
- 暂无评论
文章图片 article Pictrue
网友评论