月满满

QQ授权登录

 

官方文档地址：http://wiki.connect.qq.com/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_server-side

整个登录流程如下图：

 

第一步 ，准备工作

　　　　 申请成为开发者，按网站提示步骤注册一个，完成后将会获得appid和appkey。

 

第二步 ， 在页面上放置登录入口

　　　　在登录页面上加入代码

　　　　　<div>

   　　　　<span>其他方式登录：</span> <span><a
　　　　　　href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=appid&scope=all&redirect_uri=回调地址"><img
　　　　　　src="/img/qqlogin.png" /></a></span>
　　　　　　</div>

　　　　appid：配置第一步申请到的appid

　　　　回调地址：本地测试时，填写http://localhost:8080

　　　　scope： 请求用户授权时向用户显示的可进行授权的列表

 

　　　　打开页面后就是下面的样子，点击图片登录就是跳转到qq登录页面啦。

      　　 

第三步 ，在登录页面上，获取Access_tocken，成功后通过Access_token获取openId 

　　　　这里代码是写在一个if else语句块里的：

        　

<!DOCTYPE HTML>
<head>
<title>QQ登录</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.js"></script>
</head>
<body>
    <p>页面跳转中...</p>
</body>
<script type="text/javascript">

    //应用的APPID
    var appID = "1106280871";
    //成功授权后的回调地址
    var redirectURI = "http://localhost:8080/pages/qqlogin.html";

    //构造请求，没有获取到accesstoken时window.location.hash.length=0
    if (window.location.hash.length == 0) {
        var path = 'https://graph.qq.com/oauth2.0/authorize?';
        var queryParams = [ 'client_id=' + appID,
                'redirect_uri=' + redirectURI, 'scope=' + 'all',
                'response_type=token' ];

        var query = queryParams.join('&');
        var url = path + query;
        window.location.href = url;
    } else {
        //获取access token
        var access_token = window.location.hash.substring(1);
        //获取openId
        var map = toParamMap(access_token);
        //使用Access Token来获取用户的OpenID
        var path = "https://graph.qq.com/oauth2.0/me?";
        //callback=affterGetOpenId表示请求成功后，回调affterGetOpenId方法
        var queryParams = [ access_token, 'callback=affterGetOpenId' ];
        var query = queryParams.join('&');
        var url = path + query;
        var script = document.createElement('script');
        script.src = url;
        document.body.appendChild(script);
    }

    //获取openid成功的回调方法
    function affterGetOpenId(user) {
        var openid = user.openid;
        //获取用户资料,保存openid到server
        var access_token = $.cookie("access_token");
        var accessToken = access_token.split("=")[1];
        //跳转到后台，存储openid，获取用户资料
        window.location.href = "/login/getUserQQInfo?openId=" + openid
                + "&accessToken=" + accessToken;
    }
    
    //切割字符串转换参数表
    function toParamMap(str) {
        var map = {};
        var segs = str.split("&");
        for ( var i in segs) {
            var seg = segs[i];
            var idx = seg.indexOf('=');
            if (idx < 0) {
                continue;
            }
            var name = seg.substring(0, idx);
            var value = seg.substring(idx + 1);
            map[name] = value;
        }
        return map;
    }
</script>

第四步，获取用accessToken和openid获得授权用户资料

 

　private static final String GET_INFO_URL = "https://graph.qq.com/user/get_user_info";
/**
     * 获取qq用户资料
     * 
     * @param openId
     * @param accessToken
     * @return
     */
    @RequestMapping(value = "/login/getUserQQInfo", method = RequestMethod.GET)
    @ResponseBody
    public Map<String, String> getUserQQInfo(@RequestParam String openId,
            @RequestParam String accessToken) {
        try {
            HttpClient client = new HttpClient();
            PostMethod postMethod = new PostMethod(String.format(GET_INFO_URL,
                    accessToken, APPID, openId));
            postMethod.getParams().setParameter(
                    HttpMethodParams.HTTP_CONTENT_CHARSET, "utf-8");
            logger.info("openId =" + openId);
            logger.info("accessToken =" + accessToken);
            logger.info("APPID =" + APPID);
            NameValuePair[] date = {
                    new NameValuePair("access_token", accessToken),
                    new NameValuePair("oauth_consumer_key", APPID),
                    new NameValuePair("openid", openId) };
            postMethod.setRequestBody(date);
            int status = client.executeMethod(postMethod);
            if (status == HttpStatus.SC_OK) {
                String sss = postMethod.getResponseBodyAsString();
                logger.info(sss);
                // 登录成功跳转到主页，并加载用户信息
            }
        } catch (Exception e) {
            logger.error("get usr qq info fail", e);
        }
        return null;
    }

 

　　　　

 

　　

 

posted on 2017-08-18 16:55  月满满  阅读(3269)  评论(0)  编辑  收藏  举报

导航