通過微信小程序掃碼胜臊，在PC端登陸跳轉(zhuǎn)相應(yīng)頁面
最近在做一個零食店，移動端采用微信小程序進行實現(xiàn)掏觉。當(dāng)然区端，既然是零食店值漫，那么肯定會有后臺管理的澳腹，當(dāng)時的想法是如何才能通過微信小程序里進行掃碼去登陸PC端的管理平臺呢？話不多說杨何，接下來就說說我是怎么做到酱塔！
首先，大致上講一下我的實現(xiàn)思路危虱，整體通過WebSocket來實現(xiàn)自動跳轉(zhuǎn)羊娃。在PC登陸頁，展示二維碼埃跷，建立WebSocket連接蕊玷，當(dāng)微信小程序掃碼后，在后臺進行身份驗證弥雹，并且將驗證結(jié)果實時發(fā)送給在PC登陸頁建立的websocket連接垃帅，然后進行相應(yīng)信息的提示以及頁面的跳轉(zhuǎn)。
掃碼登陸流程
生成PC端頁面二維碼 這個二維碼中放的什么信息呢剪勿，當(dāng)時是能夠唯一標(biāo)識客戶端的UUID啦贸诚，不然你掃碼之后，應(yīng)該給哪個客戶端發(fā)送狀態(tài)信息呢
進入PC端管理頁時，獲取唯一標(biāo)識酱固，建立websocket連接械念，并且以該唯一標(biāo)識作為key存放在map集合當(dāng)中。
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("該用戶暫時沒有權(quán)限或者商戶",{icon:2,time:2000})
}
}
服務(wù)器端代碼
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);
}
- <font size='4'>然后呢就是微信小程序端了班眯，微信小程序通過掃碼獲取到該PC登陸頁建立的websocket連接的唯一標(biāo)識Key后欺殿，將自己的信息與這個key作為data請求后臺接口。在后臺接口中對用戶信息進行校驗鳖敷，之后將校驗結(jié)果發(fā)送給該key對應(yīng)的session連接就可以啦 </font>
服務(wù)器端
@RequestMapping("/getLoginCode")
@ResponseBody
public Integer getLoginCode(HttpSession session, String socketKey, String openId){
//在這里進行登陸信息驗證
脖苏。。定踱。棍潘。。崖媚。
//獲取到websocket連接session的map
ConcurrentHashMap<String, Session> sessionMap = LoginSocket.getSessionMap();
//將狀態(tài)信息發(fā)送到客戶端
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: '該用戶暫時沒有權(quán)限或者商戶',
showCancel:false
})
}
}
})
},
fail:function(){
}
})
這里的websocket也可以替換為消息隊列中間件亦歉，但是這樣是不是大材小用了呢？
給個關(guān)注畅哑，繼續(xù)努力
