一、写在前面
关于qq微信登录的原理之流我就不一一赘述了，对应的官网都有，在这里主要是展示我是怎么实现出来的，看了好几个博客，有的是直接复制官网的，有的不知道为什么实现不了。我只能保证我的这个是我实现后才贴出来的，本文有看不懂的地方请结合官网看。（话说我感觉我写博客废话好多）
二、准备工作
通过以下官网获得相应AppID和AppSecret以及对应的回调地址。
QQ登录官网：https://connect.qq.com
微信登录官网：https://open.weixin.qq.com
三、登录实现第三方
3.1、QQ授权登录实现
这里的实现主要用JS_SDK来实现，通过这种实现回调地址基本没有什么用，区别于这种实现方式：如何在自己的网站上实现QQ授权登录？。步骤就不一一说了，直接上代码（红色部分为qq授权相关的，里面的appid和回调地址改成自己申请时候的既可）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%String path = request.getContextPath() ;%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="UTF-8"> <title>登录页</title> <link href="<%=path%>/resource/css/public.css" rel="stylesheet" type="text/css" /> <link href="<%=path%>/resource/css/index.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="<%=path%>/resource/js/tools/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="<%=path%>/resource/js/tools/base.js"></script> <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="1013XXXXX" data-redirecturi="http://www.xxxxxx.com/qqlogincheck.jsp" charset="utf-8"> </script> <script type="text/javascript"> var PATH ='<%=path%>'; var FROM='${from}'; jQuery(function(){loginEnterCheck(); }); function getOs(){var OsObject = "";if (navigator.userAgent.indexOf("MSIE") > 0) {return "MSIE";}if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {return "Firefox";}if (isSafari = navigator.userAgent.indexOf("Safari") > 0) {return "Safari";}if (isCamino = navigator.userAgent.indexOf("Camino") > 0) {return "Camino";}if (isMozilla = navigator.userAgent.indexOf("Gecko/") > 0) {return "Gecko";} }//回车键登陆，支持火狐和IE浏览器; function loginEnterCheck(){//获取当前浏览器;var browser = getOs();if(browser=="Firefox"){//判断IE还是火狐浏览器;$("html").die().live("keydown",function(event){ if(event.keyCode==13){ //调用登陆方法;$(".J_login_btn").click(); } }); }else if(browser=="" || browser=="MSIE"){document.onkeydown=function(){if(event.keyCode==13||event.which==13){ $(".J_login_btn").click();}}}else{if(event.keyCode==13||event.which==13){ $(".J_login_btn").click();}} }function getInfo() {if(QC.Login.check()){QC.api("get_user_info").success(function(s){//成功回调QC.Login.getMe(function(openId, accessToken){var _data={loginName:s.data.nickname,openId:openId,otype:1,token:accessToken};//console.log(_data);$.ajax({url:PATH+"/security/qqlogin.do",type:"POST",data:_data,dataType:'json',success:function(result) {if(result.code==200){ //登录成功 window.location.href=PATH+'/';}else{if(result.code==101){$("#openId").val(result.openId);console.info(result);$("#loginName_qw").val(result.loginName); var fm=document.getElementById("qqcheckForm"); // fm.action="";fm.submit(); }}}});})}).error(function(f){//失败回调alert("获取用户信息失败！登录失败！");location.href = "/security/toLoginPage.do";}).complete(function(c){//完成请求回调//alert("获取用户信息完成！");});}else{alert("请先登录qq！");location.href = "/security/toLoginPage.do";} }function qqlogin(){QC.Login({}, function (reqData, opts) {//登录成功getInfo();}, function (opts) {alert('注销成功');});QC.Login.showPopup({appId:"10139XXXX",redirectURI:"http://www.xxxxxx.com/qqlogincheck.jsp"}); }</script><script type="text/javascript" src="<%=path%>/resource/js/login.js"></script> </head> <body οnkeydοwn="loginEnterCheck();"><form method="post" action="<%=path%>/security/toQwRegisterPage.do" id="qqcheckForm"><input type="hidden" id="openId" name="openId"><input type="hidden" id="loginName_qw" name="loginName_qw"></form> <div class="m_header"><div class='m_header_logo fix m_setWidth'><a href='http://www.xxxxxx.com' class='m_logo'><img src='<%=path%>/resource/images/logo.png' /></a><span class='welcome_title'>欢迎登录</span></div> </div> <div class="m_login_wrapper"><div class='m_login m_setWidth fix'><div class='m_login_from'><div class='m_login_box'><p class='m_login_title'>西玛会员</p><div class='m_login_input fix'><i class='m_login_user'></i><input name="loginName" type='text' placeholder='用户名' class='m_input J_user'/></div><div class='m_login_input fix'><i class='m_login_lock'></i><input name="password" type='password' placeholder='密码' class='m_input J_password'/></div><div class='m_login_handle fix'><span class='m_square_box c_switch checked'><span class='m_square'></span><i class='m_square_text'>自动登录</i></span><a href='<%=path%>/security/findPassword.do' class='m_forget_password'>忘记密码</a></div><button class='c_btn c_btn_green J_login_btn'>登录</button><div class='m_login_handle fix'><a >其他登录方式></a></div><div class='m_header_title_left '> <a style="margin-right: 10px;" οnclick="qqlogin()" ><img src='<%=path%>/resource/images/login/btn_qzone.png' alt="QQ授权登录 " ></a> <a style="margin-right: 10px;" href="http://open.weixin.qq.com/connect/qrconnect?appid=wx1fbfXXXXXX&redirect_uri=http%3A%2F%2Fwww.xxxxxx.com%2Fsecurity%2FgetWebchatCode.do&response_type=code&scope=snsapi_login&state=3d6be0a4035d839573b04816624a415e#wechat_redirect"><img src='<%=path%>/resource/images/login/btn_weixin.png' alt="微信授权登录 "></a></div><div class='m_to_register'><a href='<%=path%>/security/toRegisterPage.do'>免费注册></a></div></div></div></div> </div> <jsp:include page="../public/buttom.jsp" flush="true" /> </body> </html>
这里用到的是 QC.Login.showPopup，期间遇到了showPopup 这种不能回调的情况，参考了：QC.Login.showPopup可有回调？ 。
qq授权后台处理思路：通过点击qq登录，登录成功后回调，在回调中通过 QC.api("get_user_info")获取登录后的信息，在后台通过qq的openid来查询数据库，若是库中有值，则直接进入登录成功流程，若是没有值则跳转到手机号注册流程。（回调地址里面基本为空）
3.2、微信授权登录实现
上面代码的蓝色部分即为微信登录的连接，相应地方改成申请的既可.
这里有三个地方需要注意：
1、地址需要改成转义后的，%3A%2F%2F就等于://这样的形式。
2、若是前面微信开放平台的是https，对应的回调也是https。
3、这里写的回调地址是http://www.xxxxxx.com/security/getWebchatCode.do，但是微信申请里写http://www.xxxxxx.com既可。
下面看看微信登录成功后的后台处理代码
/*** 微信登录获取code*/@RequestMapping(value = "/getWebchatCode.do")public ModelAndView getWebchatCode(HttpServletRequest request, HttpServletResponse response) {String code = request.getParameter("code");System.out.println("微信登录获取code=="+code);String url="https://api.weixin.qq.com/sns/oauth2/access_token?appid="+appid+"&secret=XXX&code="+code+"&grant_type=authorization_code";Map<String, Object> map = new HashMap<String, Object>();map.put("from", code);try { JSONObject jb = HttpUtils.httpRequest(url,"GET",null);System.out.println("通过code获取token=="+jb.toString());String access_token= jb.getString("access_token"); JSONObject userinfo = HttpUtils.httpRequest("https://api.weixin.qq.com/sns/userinfo?access_token="+access_token+"&openid="+appid+"","GET",null);System.out.println("通过token获取=="+userinfo.toString());String loginName= userinfo.getString("nickname");String openId=userinfo.getString("openid");Member member = memberService.selectOneByWeixinOpenId(openId);if (member != null ) {//通过qq唯一openID判断该qq是否之前用过，同时判断loginName是否唯一member.setLastLoginTime(new Date());memberService.update(member);// 设置线程变量 CurrentThreadContext.setValue(CurrentThreadContext.CURRENT_USER_ID, member.getId());CurrentThreadContext.setValue(CurrentThreadContext.CURRENT_MEMBER, member);CurrentThreadContext.setValue(CurrentThreadContext.CURRENT_MANAGE_SHOP_ID, member.getManageShopId());// 单点登录CookieCookie cookie_sso = new Cookie(CurrentThreadContext.COOKIES_LOGIN_KEY, AESUtil.encrypt(loginName,PropertiesUtil.getInstance().getValue("security.cipher.key")));cookie_sso.setMaxAge(-1);cookie_sso.setDomain(PropertiesUtil.getInstance().getValue("security.root.domain"));cookie_sso.setPath("/");response.addCookie(cookie_sso);// 用户CookieloginName = DESUtil.strEnc(loginName, PropertiesUtil.getInstance().getValue("security.cipher.key"), "","");String shopFlage = "";if (member.getManageShopId() != null) {Shop t = new Shop();t.setId(member.getManageShopId());Shop shop = shopApiService.selectOne(t);if (shop != null && shop.getStatus() != null&& shop.getStatus().equals(ShopConstant.SHOP_STATUS_3)) {shopFlage = member.getManageShopId().toString();}}Cookie cookie_memberinfo = new Cookie(CurrentThreadContext.COOKIES_MEMBERINFO,loginName + "|" + shopFlage + "|" + member.getId());cookie_memberinfo.setMaxAge(-1);cookie_memberinfo.setDomain(PropertiesUtil.getInstance().getValue("security.root.domain"));cookie_memberinfo.setPath("/");response.addCookie(cookie_memberinfo);map.put("code", "200");map.put("msg", "登录成功");return new ModelAndView("redirect:/",map);} else {//qq授权的不存在，跳转到输入手机验证码的地方map.put("code", "101");Member membertemp = memberService.selectOneByLoginName(loginName);if(membertemp!=null){map.put("loginName", loginName+"_xima"+new Random().nextInt(1000));}else{map.put("loginName", loginName);}map.put("wqType", "weixin");map.put("openId", openId);/* map.put("msg", "用户名或密码不正确");*/return new ModelAndView("security/qwRegister",map);}} catch (Exception e) {// TODO Auto-generated catch block e.printStackTrace();}return new ModelAndView("security/login",map);}
主要是几次握手过程。
四、总结
qq微信的第三方登录按照官方文档一步一步实习还是比较容易的，有什么问题可以交流交流。
以上用到的连接若是对该作者造成影响的，可以联系删掉。
