拾人牙慧篇之———QQ微信的第三方登录实现

一、写在前面

　　　　关于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 onkeydown="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;" onclick="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());

                    // 单点登录Cookie

                    Cookie 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);

                    // 用户Cookie

                    loginName = 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微信的第三方登录按照官方文档一步一步实习还是比较容易的，有什么问题可以交流交流。

　　　　以上用到的连接若是对该作者造成影响的，可以联系删掉。