開放平台-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 -> 同步用戶信息並登錄
SDK使用
JSSDK 可快捷實現前端登錄授權的功能，可自定制登錄按鈕
缺點：存在瀏覽器兼容風險，此外登錄按鈕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則表示異常結果，可通過以下地址查詢錯誤原因：
接口調用過於頻繁或超過限制
應用系統可做好access_token的存儲，此外對於用戶數據(昵稱、頭像)也做好緩存或持久化，以減少接口的調用頻度。