通过微信小程序扫码，在PC端登陆跳转相应页面

最新推荐文章于 2023-09-05 16:49:21 发布

北慕白

最新推荐文章于 2023-09-05 16:49:21 发布

阅读量1.3k

点赞数

小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

通过微信小程序扫码，在PC端登陆跳转相应页面

最近在做一个零食店，移动端采用微信小程序进行实现。当然，既然是零食店，那么肯定会有后台管理的，当时的想法是如何才能通过微信小程序里进行扫码去登陆PC端的管理平台呢？话不多说，接下来就说说我是怎么做到！
首先，大致上讲一下我的实现思路，整体通过WebSocket来实现自动跳转。在PC登陆页，展示二维码，建立WebSocket连接，当微信小程序扫码后，在后台进行身份验证，并且将验证结果实时发送给在PC登陆页建立的websocket连接，然后进行相应信息的提示以及页面的跳转。

扫码登陆流程

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也可以替换为消息队列中间件，但是这样是不是大材小用了呢？

你可能感兴趣的

北慕白

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
通过微信小程序扫码，在PC端登陆跳转相应页面

小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。通过微信小程序扫码，在PC端登陆跳转相应页面最近在做一个零食店，移动端采用微信小程序进行实现。当然，既然是零食店，那么肯定会有后台管理的，当时的想法是如何才能通过微信小程序里进行扫...
复制链接

扫一扫