微信掃碼登錄的技術實現思考
微信掃碼登錄是很常見的技術，曾經在一次面試當中，面試官就曾問過微信掃碼登錄的實現思路，這次，以微信讀書網頁版掃碼登錄為例子，聊聊我對它技術實現思路一些思考。
以Google瀏覽器來做分析，打開F12，準備隨時觀察http連接狀況。
這時，以Google瀏覽器打開網頁版微信讀書，點擊登錄，會彈出一個二維碼：
這時，可以看到，在二維碼彈出來的時候，前端調用了後端兩個介面，一個是getuid，一個是getinfo，這裡面涉及到哪些邏輯實現呢？
稍微思考一下，其實很好理解，每個隨機生成的二維碼，其實都是一個uuid碼，也就是說，在點擊登錄的時候，會執行一個getuid()方法，該方法調用後端API：web/login/getuid會返回一個隨機生成的uuid碼，這個uuid碼返回到前端上時，以二維碼的形式展示。
點擊getuid()，可看到該方法返回一個隨機生成的uuid:38e673a9-5bd3-4f0c-ba2f-62ab376372a9
與此同時，還調用了另一個getinfo()方法，這應該是getuid調用成功後的回調方法，也就是當getuid()執行成功後，得到一個uid時，就立馬調用getinfo()方法，同時將生成的uid當做參數傳給getinfo()，讓其去訪問後端API。
當沒有用手機微信進行掃碼操作時，會看到getinfo()一直沒有返回值，可見，它一直在做輪詢操作，在某段時間內，若沒有輪詢成功，就會斷開連接，介面調用失敗。
到這裡，可以簡單歸納下生成二維碼流程，即，在點擊登錄時，會調用getuid()方法調用後端API介面「web/login/getuid」，將隨機返回一個唯一uid，這時會將參數傳給回調方法getinfo({“uid”:”38e673a9-5bd3-4f0c-ba2f-62ab376372a9″})，該方法會將uid參數傳給後端API介面「web/login/getinfo」，這時，將一直做輪詢將uid去redis查詢，若能查詢成功，即登錄成功，反之，連接超時失敗。
下面用兩段偽程式碼來說明下大概程式碼邏輯：
一.前端React.js獲取uuid並回調給getinfo()偽程式碼：
1 export const getuid=(params={},queue='getuid')=>dispatch=>{
2 http.post({
3 url:'https://weread.qq.com/web/login/getuid',
4 params:params,
5 queue:queue,
6 callback:(res)=>{
7 //getuid方法執行成功，返回{uid: "38e673a9-5bd3-4f0c-ba2f-62ab376372a9"}，回調getinfo()
8 dispatch(getinfo({uid:res.uid}))
9 }
10 });
11 }
12
13 export const getinfo=(params={},queue='getinfo')=>dispatch=>{
14 http.get({
15 url:'https://weread.qq.com/web/login/getinfo',
16 params:params,
17 queue:queue,
18 callback:(res)=>{
19 //若登錄成功，應該重定向到已登錄狀態的主頁
20 }
21 });
22 }
二.後端API介面/web/login/getinfo偽程式碼：
1 public User getinfo(String uid){
2 ......
3 //循環查詢uid在redis里是否存在值
4 while(true){
5 String user=redisTemplate.opsForValue().get(uid);
6 if(user!=null){
7 return user;
8 }
9 }
10 ......
11 }
用一個時序圖來簡單表示這個過程：
那麼，什麼時候才能通過uid去redis查詢才能得到返回值呢？
這時候，就要說到掃碼階段了。
當getinfo(String uid)介面在輪詢查詢redis是否有key為uid的值時，拿出手機，在二維碼有效時間內，用微信掃一掃進行掃碼操作，這時，手機上就會出現該頁面展示：
若點擊登錄，網頁版微信讀書就會刷新，進入到已登錄狀態的首頁。
這個過程很好理解，即在掃碼後，手機端會從二維碼中獲取到uid，這時，若點登錄，就會將uid與微信用戶資訊一塊包裝成json格式post提交給後端，然後在後端介面中，將以uid:user的key-value形式set插入到redis資料庫。這時，另一邊正在以uid當做key值輪詢去redis是否有值的getinfo(String uid)方法，正好就能查到剛插入到redis的值，這時通過類似redisTemplate.opsForValue().get(uid)的方式就能把剛插入的user資訊查詢出來，最後返回給PC端的微信讀書前端，即登錄成功。
最後，完整的流程可以時序圖這樣表示：
PC端微信讀書登錄成功的時候，頁面重新做了刷新，應該是在後台做了介面重定向，具體如何重定向，感興趣的朋友可以自行思考研究，微信掃碼登錄大體上就是這個思路，但細節方面應該會有更多相關校驗在裡面。
這裡主要是分析下它的整體實現思路。
值得提一點是，PC端微信讀書前端其實做了反調試，但沒關係，它這個反調試的做法很容易破解，可參考我的做法，即打開Google瀏覽器，按F12，調出控制台，把這個圖標點亮，就可以關閉微信讀書前端自帶的反調試設置了。
