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/

扫码整个过程（比较简单），能够本人进行扩大

用户须要在 APP 中登录用户名和明码
关上须要登录的网页，提供二维码
利用 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("登录胜利");
    }

成果截图

应用技术栈