通过微信小程序扫码,在PC端登陆跳转相应页面
最近在做一个零食店,移动端采用微信小程序进行实现。当然,既然是零食店,那么肯定会有后台管理的,当时的想法是如何才能通过微信小程序里进行扫码去登陆PC端的管理平台呢?话不多说,接下来就说说我是怎么做到!
首先,大致上讲一下我的实现思路,整体通过WebSocket来实现自动跳转。在PC登陆页,展示二维码,建立WebSocket连接,当微信小程序扫码后,在后台进行身份验证,并且将验证结果实时发送给在PC登陆页建立的websocket连接,然后进行相应信息的提示以及页面的跳转。
扫码登陆流程
1、生成PC端页面二维码 这个二维码中放的什么信息呢,当时是能够唯一标识客户端的UUID啦,不然你扫码之后,应该给哪个客户端发送状态信息呢
2、进入PC端管理页时,获取唯一标识,建立websocket连接,并且以该唯一标识作为key存放在map集合当中。
pc端代码
var websocket = null;
url="ws://localhost:8080/snacks/socketLogin/[[${socketKey}]]";
if('WebSocket'in window)
websocket new WebSocket(url);
else
layer.msg"该浏览器暂不支持!请更换浏览器",{icon:2time1000})
websocketonopen function (){
}
onclose {
"连接失效,请刷新页面"}
onmessage e){
res edata;
mid eval"var json = "+res)
jsoncode=="1000"){
//登陆成功
layer"登陆成功!"1}, windowlocationhref "http://localhost:8080/snacks/login/goShopIndex/"openId+"/snacks" })
}else{
//登陆失败
"该用户暂时没有权限或者商户"2000})
}
服务器端代码
privatestaticConcurrentHashMap<StringSession> sessionMap <>();
@Onopen
publicvoid onopen(Session session @PathParam"socketKey"String socketKey){
System.outprintln"websocket:"socketKey"--->建立成功" sessionMapputsession);
}
@OnClose
onClose"--->断开连接"remove}
然后呢就是微信小程序端了,微信小程序通过扫码获取到该PC登陆页建立的websocket连接的唯一标识Key后,将自己的信息与这个key作为data请求后台接口。在后台接口中对用户信息进行校验,之后将校验结果发送给该key对应的session连接就可以啦
服务器端
@RequestMapping"/getLoginCode")
@ResponseBody
Integer getLoginCodeHttpSession openId //在这里进行登陆信息验证
。。。。。。
//获取到websocket连接session的map
LoginSocketgetSessionMap();
//将状态信息发送到客户端
currentSession sessionMapget currentSessiongetAsyncRemote().sendTextresponseJsonreturn resultgetCode();