Java 實現 QQ 登陸

原文鏈接：https://www.cnblogs.com/liuxianan/p/java-qq-weibo-login.html

點擊上方藍色字體，選擇“標星公衆號”

優質文章，第一時間送達

1. 前言

個人網站最近增加了評論功能，爲了方便用戶不用註冊就可以評論，對接了 QQ 和微博這 2 大常用軟件的一鍵登錄，總的來說其實都挺簡單的，可能會有一點小坑，但不算多，完整記錄下來方便後來人快速對接。

2. 後臺設計

在真正開始對接之前，我們先來聊一聊後臺的方案設計。既然是對接第三方登錄，那就免不了如何將用戶信息保存。首先需要明確一點的是，用戶在第三方登錄成功之後，我們能拿到的僅僅是一個代表用戶唯一身份的ID（微博是真實uid，QQ是加密的openId）以及用來識別身份的accessToken，當然還有暱稱、頭像、性別等有限資料，對接第三方登錄的關鍵就是如何確定用戶是合法登錄，如果確定這次登錄的和上次登錄的是同一個人並且不是假冒的。

其實這個並不用我們特別操心，就以微博登錄爲例，用戶登錄成功之後會回調一個code 給我們，然後我們再拿code去微博那換取accessToken，如果這個code是用戶亂填的，那這一關肯定過不了，所以，前面的擔心有點多餘。

另外一個問題就是如何和現有用戶系統打通，有的網站在用戶已經登錄成功之後還要用戶輸入手機號和驗證碼，或者要用戶重新註冊賬號和密碼來綁定第三方賬戶，感覺這種實現用戶體驗非常差，碰到這種網站我一般都是直接關掉，都已經登錄了還讓用戶註冊，什麼鬼！由於我做的是評論功能，我並不希望評論用戶和現有用戶表打通，所以就不存在這件事了，如果想打通的話，我覺得無非就是登錄成功之後默認往老用戶表插入一條數據，然後和OpenUser表關聯起來，判斷用戶是否登錄時把OpenUser的鑑權也加進去就OK了。

本文的後臺以Java爲例。

2.1. 數據庫設計

再來說說OpenUser表用來存放第三方登錄用戶，主要字段如下：

這樣設計理論上就可以無限擴展了。

2.2. 鑑權流程

這裏我只是說說我的方案，把accessToken寫入cookie肯定是不安全的，因爲accessToken相當於是第三方網站的臨時密碼，被別人竊取了就可以隨意拿來幹壞事了。可以在用戶登錄成功之後我們自己生成一個token，這樣的token即使泄露了頂多就是被人拿來隨意評論，損失不大，但是如果accessToken被泄露了，以微博爲例，人家可以利用這個accessToken隨意發微博、刪微博、加關注等等，很危險。當然，如果不想token泄露的話也可以通過綁定IP等方式來限制。

鑑權的話就是首先判斷cookie中是否有我們自己的token，然後判斷是否合法，合法再判斷第三方授權是否已過期等等。

QQ登陸

3.1. 實名認證

QQ登錄我們對接的是QQ互聯，地址：https://connect.qq.com ,首先需要註冊成爲開發者並實名認證，需要手持身份證照片，具體就不講了。

3.2. 創建應用

進入應用管理頁面(https://connect.qq.com/manage.html#/)創建應用，根據實際需要是創建網站應用還是移動應用，我這裏是網站應用：

第一步：

第二步：

提交完之後會自動提交審覈，基本上就是審覈你的資料和備案的資料是否一致，所有資料必須和備案資料一模一樣，否則審覈不會通過：

當然，這些資料後面還是可以修改的。申請成功之後你會得到appId和appKey。

3.3. 引導用戶登錄

這裏可以下載一些視覺素材，在頁面合適位置放一個QQ登錄按鈕，點擊時引導用戶進入授權頁面：

代碼：

function openWindow(url, width, height)	
{	
    width = width || 600;	
    height = height || 400;	
    var left = (window.screen.width - width) / 2;	
    var top = (window.screen.height - height) / 2;	
    window.open(url, "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left="+left+", top="+top+", width="+width+", height="+height);	
}	

	
function qqLogin()	
{	
    var qqAppId = '424323422'; // 上面申請得到的appid	
    var qqAuthPath = 'http://www.test.com/auth'; // 前面設置的回調地址	
    var state = 'fjdslfjsdlkfd'; // 防止CSRF攻擊的隨機參數，必傳，登錄成功之後會回傳，最好後臺自己生成然後校驗合法性	
    openWindow(`https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=${qqAppId}&redirect_uri=${encodeURIComponent(qqAuthPath)}&state=${state}`);	
}

然後會打開一個授權頁面，這個頁面大家應該都熟悉：

然後到了這裏我就碰到一個問題了，官方文檔(https://wiki.connect.qq.com)寫的是登錄成功之後首先會回傳一個code，然後再拿code調接口換取accessToken，然後我試了很多次也換過2個賬號發現每次都是直接返回了accessToken，幫我省了一步了，不知道是什麼情況，鬱悶。微信搜索 Web項目聚集地獲取更多實戰教程。

3.4. 拿到accessToken

現在假設我們都是直接拿到accessToken（因爲我暫時還沒搞明白QQ爲啥會直接返回，跟文檔說的不一樣），但是授權回調時accessToken會被放在 # 後面，URL地址中的hash值好像不會被傳到後臺（貌似是這樣，如有不正確歡迎評論指正），所以只能寫一個下面這樣的臨時頁面：

@RequestMapping("/authqq")	
public void authQQ(HttpServletRequest request, HttpServletResponse response) throws Exception	
{	
    // QQ登錄有點特殊，參數放在#後面，後臺無法獲取#後面的參數，只能用JS做中間轉換	
    String html =   "<!DOCTYPE html>" +	
                    "<html lang=\"zh-cn\">" +	
                    "<head>" +	
                    "   <title>QQ登錄重定向頁</title>" +	
                    "   <meta charset=\"utf-8\"/>" +	
                    "</head>" +	
                    "<body>" +	
                    "   <script type=\"text/javascript\">" +	
                    "   location.href = location.href.replace('#', '&').replace('auth_qq', 'auth_qq_redirect');" +	
                    "   	
</script>	
" +	
                    "</body>" +	
                    "</html>";	
    response.getWriter().print(html);	
}

3.5. 獲取openId

根據accessToken調接口獲取用戶的openId，特別注意這個openId是相對於QQ號+appId唯一的，換句話說同一個QQ號登錄2個不同appId時獲取到的openId是不同的。順便說一句，QQ登錄的相關接口做的還真夠“隨便”的，全部都是最簡單的get請求，所以對接起來非常順利。 微信搜索 Web項目聚集地獲取更多實戰教程。

直接看代碼：

// 根據accessToken換取openId	
// 錯誤示例：callback( {"error":100016,"error_description":"access token check failed"} );	
// 正確示例：callback( {"client_id":"10XXXXX49","openid":"CF2XXXXXXXX9F4C"} );	
String result = HttpsUtil.get("https://graph.qq.com/oauth2.0/me?access_token=" + accessToken);	
Map<String, Object> resp = parseQQAuthResponse(result); // 這個方法就是把結果轉Map	
// 歡迎關注 Web項目聚集地 獲取更多實戰教程	
Integer errorCode = (Integer)resp.get("error");	
String errorMsg = (String)resp.get("error_description");	
String openId = (String)resp.get("openid");	
if(errorCode != null) return new ErrorResult(errorCode, "獲取QQ用戶openId失敗："+errorMsg);

3.6. 獲取用戶頭像暱稱等信息

// 獲取用戶暱稱、頭像等信息，{ret: 0, msg: '', nickname: '', ...} ret不爲0表示失敗	
result = HttpsUtil.get("https://graph.qq.com/user/get_user_info?access_token="+accessToken+"&oauth_consumer_key="+appId+"&openid="+openId);	
resp = JsonUtil.parseJsonToMap(result);	
// 歡迎關注 Web項目聚集地 獲取更多實戰教程	
Integer ret = (Integer)resp.get("ret");	
String msg = (String)resp.get("msg");	
if(ret != 0) return new ErrorResult("獲取用戶QQ信息失敗："+msg);	

	
// 用戶暱稱可能存在4個字節的utf-8字符，MySQL默認不支持，直接插入會報錯，所以過濾掉	
String nickname = StringUtil.filterUtf8Mb4((String)resp.get("nickname")).trim(); // 這個方法可以自行百度	
// figureurl_qq_2=QQ的100*100頭像，figureurl_2=QQ 100&100空間頭像，QQ頭像不一定有，空間頭像一定有	
String avatar = (String)resp.get("figureurl_qq_2");	
if(StringUtil.isBlank(avatar)) avatar = (String)resp.get("figureurl_2");	
String gender = (String)resp.get("gender");

3.7. 注意事項

到了這一步基本上涉及第三方的就結束了，是不是很簡單？後面無非就是如何插入數據庫、如何保存token、寫入session等。

有幾點注意事項：

需要注意數據庫中是否已經有改用戶，沒有的添加，有的修改，不要重複添加了；
QQ暱稱暱稱有各種奇奇怪怪的字符，包括emoji，MySQL默認沒有開啓utf8mb4，直接插入會報錯，所以需要過濾掉；
需要做好對各種錯誤的兼容；
接口會同時返回QQ頭像和空間頭像，QQ頭像不一定有，空間頭像一定有；
回調地址必須和申請的域名一致，否則會報錯。
QQ互聯有個特大的bug，有時候顯示已登錄但是點擊授權管理一直報錯，此時只需要退出重新登錄即可；
授權之後用戶可能會在過期之前提前取消授權；
微信搜索 Web項目聚集地獲取更多實戰教程。

相關文檔官網已經寫得比較細了，但是比較亂：http://wiki.connect.qq.com/

對接微博登陸

4.1. 實名認證

這個我就不具體講了，登錄 http://open.weibo.com/ 很容易找到相關入口，註冊成爲開發者，實名認證，一模一樣的。

4.2. 創建應用

點擊鏈接 http://open.weibo.com/apps/new?sort=web 創建web應用：

創建成果後完善相關信息，主要是下面這些：

我就不一一介紹了，都看得懂。

微博登錄不需要網站一定要備案，但對網站本身有一定要求，不能弄一個空殼網站讓人家去審覈，肯定審覈不通過的。

有關微博的對接可以參考我好幾年前寫的一篇文章：

http://www.cnblogs.com/liuxianan/archive/2012/11/11/2765123.html

4.3. 引導用戶登錄

微博視覺素材（https://open.weibo.com/wiki/微博標識下載）下載在這裏，頁面合適位置放一個登錄按鈕：

function weiboLogin()	
{	
    let weiboAppId = '432432';	
    let weiboAuthPath = 'http://www.test.com/authweibo';	
    openWindow(`https://api.weibo.com/oauth2/authorize?client_id=${weiboAppId}&response_type=code&redirect_uri=${encodeURIComponent(weiboAuthPath)}`);	
}

微博登錄有一個好處，第一次登錄需要授權，後面第二次登錄時只會一閃而過自動就登錄成功了，都不需要點一下，用戶體驗非常好，看下圖：

4.4. 獲取accessToken

登錄成功會返回一個code，根據code換取accessToken：

String params = "client_id=" + appId	
        + "&client_secret=" + appSecret	
        + "&grant_type=authorization_code"	
        + "&redirect_uri=" + URLUtil.encode(authPath)	
        + "&code=" + code;	
// 用code換取accessToken	
String result = HttpsUtil.post("https://api.weibo.com/oauth2/access_token", params);	
Map<String, Object> resp = JsonUtil.toObject(result, new TypeReference<Map<String, Object>>(){});	

	
Integer errorCode = (Integer)resp.get("error_code");	
String error = (String)resp.get("error");	
String errorMsg = (String)resp.get("error_description");	
if(errorCode != null && errorCode != 0) return new ErrorResult(errorCode, error + (errorMsg==null?"":errorMsg));	
String accessToken = (String)resp.get("access_token");	
String uid = (String)resp.get("uid"); // 這個uid就是微博用戶的唯一用戶ID，可以通過這個id直接訪問到用戶微博主頁	
int expires = (Integer)resp.get("expires_in"); // 有效期，單位秒

4.5. 獲取用戶頭像等信息

微博接口都有頻率限制，不過一般不會超過；
需做好錯誤兼容；
微博直接返回的uid，可以根據這個uid直達用戶微博主頁 https://weibo.com/u/xxxxx ，所以可以把用戶頭像鏈接到這裏；
其實也有現成的js-sdk，可以根據自己實際需要選擇是否使用；
微博的接口是https，並且是post，需要注意；

相關鏈接

微博開放平臺：open.weibo.com/

微博登錄授權機制：open.weibo.com/wiki/授權機制
QQ互聯：connect.qq.com/
QQ授權管理頁面：connect.qq.com/manage.html#/appauth/user

作者：我是小茗同學

鏈接：www.cnblogs.com/liuxianan.html

END

喜歡本文的朋友們，歡迎長按下圖關注訂閱號成猿之路，收看更多精彩內容！

推薦閱讀：

點在看再走唄!

Java 實現 QQ 登陸

2.1. 數據庫設計

2.2. 鑑權流程

3.1. 實名認證

3.2. 創建應用

3.3. 引導用戶登錄

3.4. 拿到accessToken

對接微博登陸

4.1. 實名認證

4.2. 創建應用

4.3. 引導用戶登錄

4.4. 獲取accessToken

4.5. 獲取用戶頭像等信息

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

完美替代postman的軟件

Vue mockjs mock.js

關於遊戲付費的一點想法

我通過CKA和CKS啦！

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

idea自動生成代碼神器EasyCode，讓你如虎添翼

珍藏已久的圖片素材網站

Java 最完整的購物車實現！

SpringBoot 整合SpringSecurity示例實現前後分離權限註解+JWT登錄認證

【漫畫】分享16張程序員高端漫畫

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結