小编推荐:Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务,众多大佬公司都在使用。
通过微信小程序扫码,在PC端登陆跳转相应页面 最近在做一个零食店,移动端采用微信小程序进行实现。当然,既然是零食店,那么肯定会有后台管理的,当时的想法是如何才能通过微信小程序里进行扫码去登陆PC端的管理平台呢?话不多说,接下来就说说我是怎么做到! 首先,大致上讲一下我的实现思路,整体通过WebSocket来实现自动跳转。在PC登陆页,展示二维码,建立WebSocket连接,当微信小程序扫码后,在后台进行身份验证,并且将验证结果实时发送给在PC登陆页建立的websocket连接,然后进行相应信息的提示以及页面的跳转。 ![](https://i-blog.csdnimg.cn/blog_migrate/d03b1618e3b316148a210b2ef1ee78d2.png) 扫码登陆流程 1、生成PC端页面二维码 这个二维码中放的什么信息呢,当时是能够唯一标识客户端的UUID啦,不然你扫码之后,应该给哪个客户端发送状态信息呢 2、进入PC端管理页时,获取唯一标识,建立websocket连接,并且以该唯一标识作为key存放在map集合当中。 pc端代码
var websocket = null; -
var url="ws://localhost:8080/snacks/socketLogin/[[${socketKey}]]"; -
if('WebSocket' in window) -
websocket = new WebSocket(url); -
else -
layer.msg("该浏览器暂不支持!请更换浏览器",{icon:2,time:1000}) -
websocket.onopen = function () { -
-
-
} -
websocket.onclose = function () { -
layer.msg("连接失效,请刷新页面",{icon:2,time:1000}) -
} -
websocket.onmessage = function (e) { -
var res = e.data; -
var mid = eval("var json = "+res) -
if(json.code=="1000"){ -
//登陆成功 -
layer.msg("登陆成功!",{icon:1,time:1000},function () { -
window.location.href = "http://localhost:8080/snacks/login/goShopIndex/"+json.openId+"/snacks"; -
}) -
}else{ -
//登陆失败 -
layer.msg("该用户暂时没有权限或者商户",{icon:2,time:2000}) -
} -
}
服务器端代码
private static ConcurrentHashMap<String, Session> sessionMap = new ConcurrentHashMap<>(); -
@OnOpen -
public void onOpen(Session session, @PathParam("socketKey") String socketKey){ -
System.out.println("websocket:"+socketKey+"--->建立成功"); -
sessionMap.put(socketKey,session); -
} -
@OnClose -
public void onClose(Session session,@PathParam("socketKey") String socketKey){ -
System.out.println("websocket:"+socketKey+"--->断开连接"); -
sessionMap.remove(socketKey); -
}
然后呢就是微信小程序端了,微信小程序通过扫码获取到该PC登陆页建立的websocket连接的唯一标识Key后,将自己的信息与这个key作为data请求后台接口。在后台接口中对用户信息进行校验,之后将校验结果发送给该key对应的session连接就可以啦 服务器端
@RequestMapping("/getLoginCode") -
@ResponseBody -
public Integer getLoginCode(HttpSession session, String socketKey, String openId){ -
//在这里进行登陆信息验证 -
。。。。。。 -
//获取到websocket连接session的map -
ConcurrentHashMap<String, Session> sessionMap = LoginSocket.getSessionMap(); -
//将状态信息发送到客户端 -
Session currentSession = sessionMap.get(socketKey); -
currentSession.getAsyncRemote().sendText(responseJson); -
return result.getCode(); -
}
微信小程序端
scanCodeLogin:function(){ -
wx.scanCode({ -
scanType:'qrCode', -
success:function(e){ -
var socketKey = e.result; -
app.checkSession(); -
var openId = wx.getStorageSync("openId"); -
-
-
wx.request({ -
url: app.baseUrl + '/getLoginCode', -
method:'POST', -
header:app.postHeader, -
data:{socketKey:socketKey,openId:openId}, -
success:function(e){ -
console.log(e) -
var result = e.data; -
if(result == 1000){ -
wx.showToast({ -
title: '登陆成功', -
}) -
}else{ -
wx.showModal({ -
title: '登陆失败', -
content: '该用户暂时没有权限或者商户', -
showCancel:false -
}) -
} -
} -
}) -
}, -
fail:function(){ -
} -
})
这里的websocket也可以替换为消息队列中间件,但是这样是不是大材小用了呢? |