美文网首页微信小程序开发为了梦想
通过微信小程序扫码,在PC端登陆跳转相应页面

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

作者: 我有一只喵喵 | 来源:发表于2018-11-28 16:41 被阅读632次

    通过微信小程序扫码,在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);
    
        }
    
    
    1. <font size='4'>然后呢就是微信小程序端了,微信小程序通过扫码获取到该PC登陆页建立的websocket连接的唯一标识Key后,将自己的信息与这个key作为data请求后台接口。在后台接口中对用户信息进行校验,之后将校验结果发送给该key对应的session连接就可以啦 </font>

    服务器端

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

    给个关注,继续努力

    相关文章

      网友评论

        本文标题:通过微信小程序扫码,在PC端登陆跳转相应页面

        本文链接:https://www.haomeiwen.com/subject/cmlzqqtx.html