准备阶段的知识就不说了，建议还是先看看腾讯的相关文档，实在没思路不知道怎么下手再参考我这篇教程吧 HTML页面部分（即Login.htm登录页） 1、把注册获得的APPID、redirect地址写入下面对应的地方，放到登录页JS位置admin管理员组文章数量:1530842
| <script type="text/javascript" src="http://qzonestyle.gtimg/qzone/openapi/qc_loader.js" data-appid="100283211" data-redirecturi="http://www.javapk/login.htm?passed=3232" charset="utf-8"></script> <script type="text/javascript" src="http://qzonestyle.gtimg/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script> |
注意： 建议采用图片和超链接形式（即上面这种方式），不推荐使用JS SDK加载QQ图标（即下面的代码部分），原因有两点： 1、SDK加载JS需要一定的时间，如果网速不快会导致打开网页后一段时间才会显示出QQ图标； 2、SDK加载JS方式，当点击图标时会打开一个新窗口，在回调时可能会出问题，特别是针对IE浏览器，不兼容IE。
不推荐使用下面的JS做登录入口（图标）：
3、调用QQ登录API（JS SDK）<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>
4、在JS中使用AJAX向后台发送请求，把请求URL和参数换成自己的就可以了，逻辑可以自定义<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>
java，仅供参考/** * 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("出错了"); }
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){ } }
版权声明：本文标题：[JS]怎样实现QQ登录 JS SDK版(新) 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1725630571a1033699.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论