关闭

[JS]怎样实现QQ登录 JS SDK版(新)

2336人阅读 评论(0) 收藏 举报
准备阶段的知识就不说了,建议还是先看看腾讯的相关文档,实在没思路不知道怎么下手再参考我这篇教程吧
HTML页面部分(即Login.htm登录页)
1、把注册获得的APPID、redirect地址写入下面对应的地方,放到登录页JS位置
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="100283211" data-redirecturi="http://www.javapk.net/login.htm?passed=3232" charset="utf-8"></script>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script> 
   
2、放置QQ登录按钮,把这段代码放到HTML页面中
<a href='https://graph.qq.com/oauth2.0/authorize?client_id=100283211&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.xxxxxx.com%2Flogin.htm%3Fpassed%3D3232'><img border="0" alt="QQ登录" src="../images/qq_widget_connect.png"></img></a>
<a>的href的请求地址可以从点击登录QQ图标弹出的框的地址栏直接获取。

注意:
建议采用图片和超链接形式(即上面这种方式),不推荐使用JS SDK加载QQ图标(即下面的代码部分),原因有两点:
1、SDK加载JS需要一定的时间,如果网速不快会导致打开网页后一段时间才会显示出QQ图标;
2、SDK加载JS方式,当点击图标时会打开一个新窗口,在回调时可能会出问题,特别是针对IE浏览器,不兼容IE。

不推荐使用下面的JS做登录入口(图标):

<span id="qqLoginBtn"></span>

<span id="qqLoginBtn"></span>

<script type="text/javascript">
QC.Login({
btnId:"qqLoginBtn" //插入按钮的节点id

});

</script>
或者:

<script type="text/javascript">

   //调用QC.Login方法,指定btnId参数将按钮绑定在容器节点中

  QC.Login({

    //btnId:插入按钮的节点id,必选

   btnId:"qqLoginBtn", 

   //用户需要确认的scope授权项,可选,默认all

   scope:"all",

   //按钮尺寸,可用值[A_XL| A_L| A_M| A_S|  B_M| B_S| C_S],可选,默认B_S

   size: "B_M"

   }, function(reqData, opts){//登录成功

    //根据返回数据,更换按钮显示状态方法

   var dom = document.getElementById(opts['btnId']),

   _logoutTemplate=[

   //头像

   '<span><img src="{figureurl}" class="{size_key}"/></span>',

    //昵称

    '<span>{nickname}</span>',

     //退出

   '<span><a href="javascript:QC.Login.signOut();">退出</a></span>' 

   ].join("");

     dom && (dom.innerHTML = QC.String.format(_logoutTemplate, {

      nickname : QC.String.escHTML(reqData.nickname),

     figureurl : reqData.figureurl

    }));

   }, function(opts){//注销成功

   var msg="嗯嗯,希望下次再看到你的光临哦!";

 alert(msg); 

    }

);

</script> 

 
 
3、调用QQ登录API(JS SDK)

<script type="text/javascript">

//下面这段if判断代码的作用是延迟加载,不写也可以,但为了好的体验建议写上,当然这个800是毫秒数,可以自定义 if(document.location.search.indexOf('signout_qq')>=0){ setTimeout(function(){ QC.Login.signOut(); alert('QQ登录,退出成功'); }, 800) } //从页面收集OpenAPI必要的参数。get_user_info不需要输入参数,因此paras中没有参数 var paras = {}; //用JS SDK调用OpenAPI QC.api("get_user_info", paras) //指定接口访问成功的接收函数,s为成功返回Response对象 .success(function(s){ //成功回调,通过s.data获取OpenAPI的返回数据 QC.Login.getMe(function(openId, accessToken){ qq_Login(s,openId,accessToken);//对应JS的qq_Login()的方法,继续往下看 }) }) //指定接口访问失败的接收函数,f为失败返回Response对象 .error(function(f){ //失败回调 qq_error(f); //这个地方可以自动以逻辑处理,也可以不处理,就是请求失败的提示 }) //指定接口完成请求后的接收函数,c为完成请求返回Response对象 .complete(function(c){ //完成请求回调 // qq_complete(c); }); </script>

4、在JS中使用AJAX向后台发送请求,把请求URL和参数换成自己的就可以了,逻辑可以自定义

/** * QQ登录 * @author zhangbing * @param s * @param openId * @param accessToken * @date 2012-06-26 */ function qq_Login(s,openId,accessToken){ //把openId,accessToken存入Cookie中 addCookie("qq_openId",openId,90); addCookie("qq_accessToken",accessToken,90); //判断性别 var sex=0; if(s.data.gender=="女"){ sex=1; }else{ sex=0; } //向后台发送数据 if(getCookie("qq_openId")=="" || getCookie("qq_openId")==null){ //如果Cookie里面没有保存openId,则传入新openId $.post( "login.htm", { 'passed':'qqLogin', 'openId':openId, 'accessToKen':accessToken, 'nickname':s.data.nickname, 'figureurl_1':s.data.figureurl_1, 'figureurl_2':s.data.figureurl_2, 'sex':sex, 'vip':s.data.vip }, function(result){ loginBackUrl(result); }); }else{ //如有Cookie里面有openId,则直接引用Cookie里面的openId $.post( "login.htm", { 'passed':'qqLogin', 'openId':getCookie("qq_openId"), 'accessToKen':getCookie("qq_accessToken"), 'nickname':s.data.nickname, 'figureurl_1':s.data.figureurl_1, 'figureurl_2':s.data.figureurl_2, 'sex':sex, 'vip':s.data.vip }, function(result){ loginBackUrl(result); }); } } //完成请求回调 function qq_complete(c){ if(c.ret==0){ alert("完成请求回调!"); // window.parent.location.href = window.opener.location.href // window.close(); }else{ alert("指定接口访问成功,但请求回调失败!"); } } function qq_error(f){ alert("出错了"); }

java,仅供参考

public void onPost(){ new BackurlUtil().setBackurl(hreq, "tag=spy"); try { appDomain = wlUtil.getAppProperty("AppDomain"); if(passed.equals("userLogin")){//如果是淘必得登录 wisher = wlUtil.checkLi555User(emailaddress, loginpassword); session.setAttribute("wisher", wisher); if(wisher!=null){ //登录成功 try { DESPlus des = new DESPlus("li555"); //登录成功后,加密,保存入cookie helloLi555CK = new Cookie("Helloli555CK", des.encrypt(emailaddress +'#'+ loginpassword)); session.setAttribute("username",emailaddress); helloLi555CK.setMaxAge(5184000); helloLi555CK.setPath("/"); hrep.addCookie(helloLi555CK); if (baseurl.indexOf("login.htm")>=0) { baseurl = "/"; } msg = "({'backurl':'" + baseurl+"'," + "'susuidCK':'"+wisher.getSnsUid()+"'," + "'result':'LOGIN_SUCCESS'," + "'renren_uid':'"+wisher.getWisherid()+"'," + "'snstypeCK':'"+wisher.getSnsType()+"'})"; } catch (Exception e) { msg = "({'result':'LOGIN_FAIL"+e+"'})"; e.printStackTrace(); } Json.outPut(hrep, msg); } } else if(passed.equals("qqLogin")){ //如果是QQ登录 QQUser qqUser=new QQUser(); qqUser.setQQUid(openId); qqUser.setName(nickname); qqUser.setSex(sex); qqUser.setVip(vip); qqUser.setTinyurl(figureurl_1); qqUser.setMainurl(figureurl_2); wisher=wlUtil.checkQQUser(qqUser,""); wisherId = wisher.getWisherid(); session.setAttribute("wisher",wisher); uidCK = new Cookie("qq_uid", wisherId); uidCK.setMaxAge(5184000); hrep.addCookie(uidCK); //判断上一次请求的URL BackurlUtil url=new BackurlUtil(); String backurl=url.getBackurl(hreq, "/"); backurl = (String) session.getAttribute("backurl"); if (backurl.indexOf("login.htm")>=0){ backurl = baseurl; }else{ backurl = backurl.replaceAll(appDomain+"/", ""); } if(backurl!=""){ Json.outPut(hrep, backurl); } } } catch(Exception e){ } }

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9723次
    • 积分:204
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:13篇
    • 译文:0篇
    • 评论:0条
    文章分类