APP 仿微信登录

使用技术栈

---

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

---

gitee地址：https://gitee.com/MyXiaoXiaoBin/qr-code
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("登录成功");
    }

---

效果截图