开放平台-web实现QQ第三方登录

应用场景

web应用通过QQ登录授权实现第三方登录。

操作步骤

1 注册成为QQ互联平台开发者，http://connect.qq.com/

2 准备一个可访问的域名，如dev.foo.com

3 创建网页应用，配置必要信息，其中包括域名以及回调地址；

其中域名需要验证，需确保对域名主机有足够的控制权限

4 获取应用appID、appKey进行开发

登录流程

开发平台的登录授权采取oauth2.0机制，这也是目前几乎所有互联网开放平台所采取的方式。

需更多了解oauth2.0可参考阮老师的文章： http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html

实现方式

client-side

流程：

前端页面通过Implict方式登录授权 -> 回调获得accessToken -> 获取openid -> 同步用户信息并登录

为了保证数据安全，在获取用户信息并登录这一步必须由服务端实现。

这种方式的开发相对便捷，也是后面的实战案例将要采取的方式。

server-side

流程：

由server端页面跳转到登录授权页面(Authorization code方式) -> 回调获得code -> 置换accessToken -> 获取openid -> 同步用户信息并登录

可参考：http://wiki.connect.qq.com/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_server-side

SDK使用

JSSDK 可快捷实现前端登录授权的功能，可自定制登录按钮

使用文档：http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E

缺点：存在浏览器兼容风险，此外登录按钮UI的定制也存在受限

JavaSDK 屏蔽了oauth授权的复杂度，方便后端实现授权及api操作

缺点：增加依赖jar包，项目容易变得臃肿，尤其是当前项目已经存在oauth功能实现时可不必采用。

案例实战

功能描述

clientside + server-side 通过QQ网页授权登录，并获取用户信息

1 本地开发环境准备

修改hosts文件将dev.foo.com映射到127.0.0.1；

本地服务器以80端口启动， windows下可能会出现80端口被系统进程占用的情况，解决方法可参考 http://www.cnblogs.com/littleatp/p/4414578.html

本地服务器启动后，以dev.foo.com的域名进行访问，在QQ登录授权时可通过域名验证这一步

2 登录跳转页面

<html>

     <head>

        <title>QQ登录跳转</title>

        <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

        <script type="text/javascript">

        //切割字符串转换参数表

        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;

         }

        //隐式获取url响应内容(JSONP)

        function openImplict(url){

            var script = document.createElement('script');

            script.src = url;

            document.body.appendChild(script);

        }

        //获得openid的回调

        function callback(obj)

        {

           var openid = obj.openid;

           $("#openid").text(openid);

           //跳转服务端登录url

           var resulturl = "@{openapi.QQs.login_result()}";

           var accessToken = $("#accessToken").text();

           //向服务端传输access_token及openid参数

           document.location.href=resulturl + "?access_token=" + accessToken + "&openid=" + openid;

        }

        </script>

     </head>

     <body>

            <p>AccessToken:<span id="accessToken"></span>--ExpireIn<span id="expire"></span></p>

            <p>OpenID:<span id="openid"></span></p>

     <!-- 执行脚本 -->

     <script type="text/javascript">

     //应用的APPID

     var appID = "101207268";

     //登录授权后的回调地址，设置为当前url

     var redirectURI = "@@{openapi.QQs.login()}";

     //初始构造请求

     if (window.location.hash.length == 0)

     {

        var path = 'https://graph.qq.com/oauth2.0/authorize?';

        var queryParams = ['client_id=' + appID,

                           'redirect_uri=' + redirectURI,

                           'scope=' + 'get_user_info,list_album,upload_pic,add_feeds,do_like','response_type=token'];

        var query = queryParams.join('&');

        var url = path + query;

        window.location.href= url;

     }

     //在成功授权后回调时location.hash将带有access_token信息，开始获取openid

     else

     {

        //获取access token

        var accessToken = window.location.hash.substring(1);

        var map = toParamMap(accessToken);

        //记录accessToken

        $("#accessToken").text(map.access_token);

        $("#expire").text(map.expires_in);

        //使用Access Token来获取用户的OpenID

        var path = "https://graph.qq.com/oauth2.0/me?";

        var queryParams = ['access_token='+map.access_token, 'callback=callback'];

        var query = queryParams.join('&');

        var url = path + query;

        openImplict(url);

     }

     </script>

     </body>

</html>

功能描述

页面在第一次打开时跳转到QQ登录授权页面；

授权成功之后回到当前页面通过url参数(hash串)获得accessToken；

此后可通过jsonp方式获取用户的openid，url如：

https://graph.qq.com/oauth2.0/me?access_token=YOUR_ACCESS_TOKEN

获取到用户OpenID，返回包如下(JSONP方式获取)：

callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} )

将access_token及openid传到服务端进行处理

3 server端获取用户信息

接收openid的页面方法

      /**

     * 登录结果

     *

     * @param access_token

     * @param openid

     */

    public static void login_result(String access_token, String openid) {

        //调用api获取qq用户信息

        QQUserInfo user = QQApi.getUserInfo(access_token, openid);

        //此时若取得user信息，则可以进行保存，并执行用户登录操作

        ....

        //登录成功后跳转

        redirect(xxx);

    }

QQApi的实现

/**

 * QQ互联API

 *

 * <pre>

 * 登录流程：

 *

 * 1 前端跳转qq授权页面

 * 2 js获得access_token

 * 3 通过jsonp方式获得openid

 * 4 server端根据上传的access_token及openid获取用户信息，如昵称、头像

 *

 * 参考文档：

 * http://wiki.connect.qq.com/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_client-side#Step2.EF.BC.9A.E8.8E.B7.E5.8F.96AccessToken

 * </pre>

 *

 * @author xxx

 * @createDate 2015年3月10日

 *

 */

public class QQApi {

    public static String appId = "xxx";

    public static String appSecret = "xxx";

    public static String baseUrl = "https://graph.qq.com";

    protected static final String URL_GET_USERINFO = baseUrl

            + "/user/get_user_info?access_token=%s&oauth_consumer_key=%s&openid=%s";

    protected static final long ACCESS_TIMEOUT = 15;

    protected static final String DEF_APP_TOKEN_EXPIRE = "3h";

    /**

     * 获取用户信息

     *

     * <pre>

     * http://wiki.connect.qq.com/get_user_info

     *

     *

     * 调用地址：

     * https://graph.qq.com/user/get_user_info

     * 参数

     *   access_token=*************&

     *   oauth_consumer_key=12345&

     *   openid

     *

     * 返回结果如下：

     * {

     *     "ret": 0,

     *     "msg": "",

     *     "is_lost": 0,

     *     "nickname": "小吞",

     *     "gender": "女",

     *     "province": "广东",

     *     "city": "广州",

     *     "year": "1993",

     *     "figureurl": "http://qzapp.qlogo.cn/qzapp/101207268/982C9FEADAF7B242C5069B8F390784BF/30",

     *     "figureurl_1": "http://qzapp.qlogo.cn/qzapp/101207268/982C9FEADAF7B242C5069B8F390784BF/50",

     *     "figureurl_2": "http://qzapp.qlogo.cn/qzapp/101207268/982C9FEADAF7B242C5069B8F390784BF/100",

     *     "figureurl_qq_1": "http://q.qlogo.cn/qqapp/101207268/982C9FEADAF7B242C5069B8F390784BF/40",

     *     "figureurl_qq_2": "http://q.qlogo.cn/qqapp/101207268/982C9FEADAF7B242C5069B8F390784BF/100",

     *     "is_yellow_vip": "0",

     *     "vip": "0",

     *     "yellow_vip_level": "0",

     *     "level": "0",

     *     "is_yellow_year_vip": "0"

     * }

     * </pre>

     *

     * @param accessToken

     * @return

     */

    public static QQUserInfo getUserInfo(String accessToken, String openid) {

        if (StringUtils.isEmpty(accessToken) || StringUtils.isEmpty(openid)) {

            return null;

        }

        String url = String.format(URL_GET_USERINFO, accessToken, appId, openid);

        String resultString = DefaultHttp.get(url, ACCESS_TIMEOUT, GlobalConstants.UTF_8);

        Logger.debug("[sso-qq]get　userinfo. use url '%s'", url);

        QQUserInfo userinfo = JsonUtil.fromJson(resultString, QQUserInfo.class);

        if (userinfo == null || !userinfo.hasGot()) {

            Logger.debug("[sso-qq]get userinfo failed, with result of '%s'", resultString);

            return null;

        }

        Logger.debug("[sso-qq]get userinfo success, with result of '%s'", resultString);

        return userinfo;

    }

常见问题

网页跳转提示 "redirect_uri_mismatch"

通常是应用配置中的域名与当前开发服务器访问地址不一致导致，参照案例中的本地开发环境准备小节

api调用返回错误

查看返回的ret字段，对于非0值的ret则表示异常结果，可通过以下地址查询错误原因：

http://wiki.connect.qq.com/%E5%85%AC%E5%85%B1%E8%BF%94%E5%9B%9E%E7%A0%81%E8%AF%B4%E6%98%8E

接口调用过于频繁或超过限制

应用系统可做好access_token的存储，此外对于用户数据(昵称、头像)也做好缓存或持久化，以减少接口的调用频度。

分类: j2ee 技术, java 技术

标签: java, oauth, 开放平台

web实现QQ第三方登录的更多相关文章

开放平台-web实现QQ第三方登录
应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1 注册成为QQ互联平台开发者,http://connect.qq.com/ 2 准备一个可访问的域名, ...
web实现QQ第三方登录开放平台-web实现QQ第三方登录
应用场景 web应用通过QQ登录授权实现第三方登录. 操作步骤 1 注册成为QQ互联平台开发者,http://connect.qq.com/ 2 准备一个可访问的域名, ...
使用QQ第三方登录时,手机应用和网站应用对同一个QQ号,获取到的openid不一样
使用QQ第三方登录时,手机应用和网站应用对同一个QQ号,获取到的openid不一样openid生成是根据应用的appid和QQ号的一些信息加密生成,对于一个appid和QQ号来说,openid是唯一的 ...
【第三方登录】之QQ第三方登录
最近公司做了个网站,需要用到第三方登录的东西.有QQ第三方登录,微信第三方登录.先把QQ第三方登录的代码列一下吧. public partial class QQBack : System.Web.U ...
QQ第三方登录
QQ第三方登录在Android应用程序的开发过程中,很多时候需要加入用户登录/注册模块.除了自己动手设计登录界面并实现相应功能外,现在还可以借助百度.腾讯等开发者平台提供的第三方账号登录模块.最近研 ...
PHP实现QQ第三方登录
PHP实现QQ第三方登录学习之前,请大家先看一下oAuth协议. 首先呢,我们进入QQ互联的官方网站 http://connect.qq.com登入我们自己的QQ号,没有QQ号的小伙伴可以忽略本篇博 ...
利用JS_SDK实现QQ第三方登录
前言现如今,第三方登录已成为大部分网站必备的一项基础技能,引入时髦的第三方登录不仅能帮你吸引更多的用户,也让你的网站可以充分利用其他大型网站的用户资源.本次教程将让你的网站最快捷便利地引入QQ登录. ...
Android 实现QQ第三方登录
Android 实现QQ第三方登录在项目中需要实现QQ第三方登录,经过一番努力算是写出来了,现在总结以下,以防以后遗忘,能帮到其他童鞋就更好了. 首先肯定是去下载SDK和DEMO http://wi ...
Android应用之——最新版本号SDK V2.4实现QQ第三方登录
为什么要写这篇博客呢?由于.我在做这个第三方登录的时候,找了非常多资料,发现要么就是过时了.要么就是说的非常不清楚.非常罗嗦.并且非常多都是一些小demo,不是什么实例.甚至连腾讯官方的文档都有这个问 ...

随机推荐

vb.net它SqlHelper制备及应用
上次文章中说到.对于一个项目来说.SqlHelper是一个非常重要的类. 在正在构造的机房收费系统中.有大量的操作数据库的操作. 现在.把反复的代码所有拿出来,就形成了SqlHelper类.这个Sql ...
android 视频通话开启呼叫等待后，来第三方的视频通话，接通后通话时间一直显示为0，过几秒之后视频通话自己主动挂断
开启通话设置视频通话的"来电等待"; 步骤1:測试机和配合机A处于视频通话过程中; 步骤2:配合机B向測试机呼出视频电话; 步骤3:測试机接听配合机B的视频来电; 现象:视频通话过 ...
REQIMPORT-购买内部应用程序（R12.2.3）
採购内部申请(R12.2.3) --US Program:Requisition Import Short Name:REQIMPORT Application:Purchasing Execu ...
nginx随着passenger构造ruby on rails页
1.备份nginx简介 cp /opt/nginx/html/nginx.conf /opt/nginx/html/nginx.conf.bak 2.编者nginx简介 server { listen ...
MSMQ学习笔记
这几天学习了一下MSMQ,虽然不能说非常深入的了解其机制与实际用法(具体项目的实现),但也要给自己的学习做个总结.学习心得如下: 一.MSMQ即微软消息队列.用于程序之间的异步消息通信,主要的机制就是 ...
SenchaTouch2.3.1 正在使用listpaging以及pullrefresh插入分页演示样品做
实际上本实施例是相对简单的.自定义PullRefreshFn插头继承Ext.plugin.PullRefresh. 主要是其附加refreshFn下拉监控事件. listpaging么改动.再将这两个 ...
云盘+Git GUI云盘文件版本控制
以下介绍操作细节 1.先下载Git GUI 下载地址:http://msysgit.github.io/ 再下载百度云网盘下载地址:http://pan.baidu.com 接下来就是安装这两个软件 ...
hadoop2.0的datanode数据存储文件夹策略的多个副本
在hadoop2.0在,datanode数据存储盘选择策略有两种方式复制: 首先是要遵循hadoop1.0磁盘文件夹投票,实现类:RoundRobinVolumeChoosingPolicy.java ...
React的React Native
React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...
NSIS：迅雷5.8.6.600自由定制版脚本及下载
原文 NSIS:迅雷5.8.6.600自由定制版脚本及下载虽然现在迅雷已升级到7.2版本,但作为一款下载工具,我们可能只是需要它的下载功能,所以,体积小资源占用也小的迅雷5便成了我们更好的选择.今天 ...

web实现QQ第三方登录