自由、创新、研究、探索
Linux/Windows Mono/DotNet [ Open Source .NET Development/ 使用开源工具进行DotNet软件开发]锐意进取，志存高远.成就梦想，只争朝夕.从你开始，创新世界.【That I exist is a perpetual supprise which is life. Focus on eCommerce】
& & web应用通过QQ登录授权实现第三方登录。
& & 1 &注册成为QQ互联平台开发者，
& & 2 &准备一个可访问的域名，如
& & 3 &创建网页应用，配置必要信息，其中包括域名以及回调地址；
& & & & 其中域名需要验证，需确保对域名主机有足够的控制权限
& & 4 &获取应用appID、appKey进行开发
& & 开发平台的登录授权采取oauth2.0机制，这也是目前几乎所有互联网开放平台所采取的方式。
& & 需更多了解oauth2.0可参考阮老师的文章：&
& &&client-side
& & & & 流程：
& & & & 前端页面通过Implict方式 登录授权 -& 回调获得accessToken -& 获取openid -& 同步用户信息并登录
& & & &&为了保证数据安全，在获取用户信息并登录这一步必须由服务端实现。
& & & & 这种方式的开发相对便捷，也是后面的实战案例将要采取的方式。
& &&server-side
& & & & 流程：
& & & & 由server端页面跳转到登录授权页面(Authorization code方式) -& 回调获得code -& 置换accessToken -& 获取openid -& 同步用户信息并登录
& & & & 可参考：
& &&JSSDK &可快捷实现前端登录授权的功能，可自定制登录按钮
& & & & 使用文档：
& & & &&缺点：存在浏览器兼容风险，此外登录按钮UI的定制也存在受限
& &&JavaSDK &屏蔽了oauth授权的复杂度，方便后端实现授权及api操作
& & & &&缺点：增加依赖jar包，项目容易变得臃肿，尤其是当前项目已经存在oauth功能实现时可不必采用。
& &&功能描述
& & clientside + server-side 通过QQ网页授权登录，并获取用户信息
& & 1 &本地开发环境准备
& & & & 修改hosts文件将映射到127.0.0.1；
& & & & 本地服务器以80端口启动，&windows下可能会出现80端口被系统进程占用的情况，解决方法可参考&
& & & & 本地服务器启动后，以的域名进行访问，在QQ登录授权时可通过域名验证这一步
& & 2 &登录跳转页面
&title&QQ登录跳转&/title&
&script src="/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){
var name = seg.substring(0, idx);
var value = seg.substring(idx+1);
map[name] =
//隐式获取url响应内容(JSONP)
function openImplict(url){
var script = document.createElement('script');
script.src =
document.body.appendChild(script);
//获得openid的回调
function callback(obj)
var openid = obj.
$("#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=" +
&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 = "";
//登录授权后的回调地址，设置为当前url
var redirectURI = "@@{openapi.QQs.login()}";
//初始构造请求
if (window.location.hash.length == 0)
var path = '/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 +
window.location.href=
//在成功授权后回调时location.hash将带有access_token信息，开始获取openid
//获取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 = "/oauth2.0/me?";
var queryParams = ['access_token='+map.access_token, 'callback=callback'];
var query = queryParams.join('&');
var url = path +
openImplict(url);
& & & &&功能描述
& & & & 页面在第一次打开时跳转到QQ登录授权页面；
& & & & 授权成功之后回到当前页面通过url参数(hash串)获得accessToken；
& & & & 此后可通过jsonp方式获取用户的openid，url如：
/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
* 登录流程：
* 1 前端跳转qq授权页面
* 2 js获得access_token
* 3 通过jsonp方式获得openid
* 4 server端根据上传的access_token及openid获取用户信息，如昵称、头像
* 参考文档：
* http://wiki./%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_client-side#Step2.EF.BC.9A.E8.8E.B7.E5.8F.96AccessToken
* @author xxx
* @createDate 日
public class QQApi {
public static String appId = "xxx";
public static String appSecret = "xxx";
public static String baseUrl = "";
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";
* 获取用户信息
* http://wiki./get_user_info
* 调用地址：
* /user/get_user_info
access_token=*************&
oauth_consumer_key=12345&
* 返回结果如下：
"msg": "",
"is_lost": 0,
"nickname": "小吞",
"gender": "女",
"province": "广东",
"city": "广州",
"year": "1993",
"figureurl": "/qzapp/2C9FEADAF7B242C784BF/30",
"figureurl_1": "/qzapp/2C9FEADAF7B242C784BF/50",
"figureurl_2": "/qzapp/2C9FEADAF7B242C784BF/100",
"figureurl_qq_1": "/qqapp/2C9FEADAF7B242C784BF/40",
"figureurl_qq_2": "/qqapp/2C9FEADAF7B242C784BF/100",
"is_yellow_vip": "0",
"vip": "0",
"yellow_vip_level": "0",
"level": "0",
"is_yellow_year_vip": "0"
* @param accessToken
public static QQUserInfo getUserInfo(String accessToken, String openid) {
if (StringUtils.isEmpty(accessToken) || StringUtils.isEmpty(openid)) {
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);
Logger.debug("[sso-qq]get userinfo success, with result of '%s'", resultString);
网页跳转提示&"redirect_uri_mismatch"
& & & & 通常是应用配置中的域名与当前开发服务器访问地址不一致导致，参照案例中的本地开发环境准备小节
api调用返回错误
& & & & 查看返回的ret字段，对于非0值的ret则表示异常结果，可通过以下地址查询错误原因：
接口调用过于频繁或超过限制
& & & & 应用系统可做好access_token的存储，此外对于用户数据(昵称、头像)也做好缓存或持久化，以减少接口的调用频度。
阅读(...) 评论()
随笔 - 15138
评论 - 1101