APP 仿微信登陸

使用技術棧

---

前端：uniapp+vue.js
後端：SpringBoot+websocket

---

gitee地址：https://gitee.com/MyXiaoXiaoB...
qr-code-app：app
qr-code-vue：web頁面
qr-code-springboot：後臺
測試APP必需要實體機，這裏推薦一下內網穿透工具https://natapp.cn/

---

掃碼整個過程（比較簡單），能夠本身進行擴展

1. 用戶須要在APP中登陸用戶名和密碼
2. 打開須要登陸的網頁，提供二維碼
3. 利用APP進行掃碼登陸

---

websocket代碼部分
websocket的做用：當打開web頁面時，從後臺生成一個隨機碼，隨機碼不屬於任何人，後端websocket根據隨機碼創建Session

@Component
@ServerEndpoint(value = "/websocket/{code}")
public class QrCodeWebsocket {


    @OnOpen
    public void onOpen(@PathParam("code") String code, Session session){
        Object codeValue = GlobalConstant.timedCache.get(code);
        // 說明code沒有過時，是有效的鏈接
        if(!Objects.isNull(codeValue)){
            GlobalConstant.sessionMaps.put(code,session);
        }
    }


}

掃碼代碼部分
用戶經過APP掃碼後，會獲取隨機碼，將當前登陸的token和隨機碼請求到後臺進行驗證是否正確，正確的話就通知web頁面登陸成功。

@GetMapping("/code/{code}/login/{token}")
    public ResponseServer codeLogin(@PathVariable("code")String code,@PathVariable("token")String token){
        if(Objects.isNull(GlobalConstant.timedCache.get(code))){
            return ResponseServer.error("頁面二維碼可能過時啦，重啓刷新");
        }
        String userName = GlobalConstant.tokenMap.get(token);
        Session session = GlobalConstant.sessionMaps.get(code);
       if(!Objects.isNull(session)){
           try {
               session.getBasicRemote().sendText("登錄成功，用戶名："+userName);
               // 登陸成功，刪除緩存
               GlobalConstant.timedCache.remove(code);
           } catch (IOException e) {
               e.printStackTrace();
           }
       }
        return ResponseServer.ok("登陸成功");
    }

---

效果截圖