微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

扫码登陆流程

1、生成PC端页面二维码 这个二维码中放的什么信息呢,当时是能够唯一标识客户端的UUID啦,不然你扫码之后,应该给哪个客户端发送状态信息呢 

2、进入PC端管理页时,获取唯一标识,建立websocket连接,并且以该唯一标识作为key存放在map集合当中。

pc端代码

  1. var websocket = null;
  2. url="ws://localhost:8080/snacks/socketLogin/[[${socketKey}]]";
  3. if('WebSocket'in window)
  4. websocket new WebSocket(url);
  5. else
  6. layer.msg"该浏览器暂不支持!请更换浏览器",{icon:2time1000})
  7. websocketonopen function (){
  8. }
  9. onclose {
  10. "连接失效,请刷新页面"}
  11. onmessage e){
  12. res edata;
  13. mid eval"var json = "+res)
  14. jsoncode=="1000"){
  15. //登陆成功
  16. layer"登陆成功!"1}, windowlocationhref "http://localhost:8080/snacks/login/goShopIndex/"openId+"/snacks" })
  17. }else{
  18. //登陆失败
  19. "该用户暂时没有权限或者商户"2000})
  20. }

服务器端代码

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();
  • 微信小程序

    scanCodeLogin:function(){
    
  • wxscanCode({
  • scanType:'qrCode' success){
  • socketKey result;
  • appcheckSession openId wxgetStorageSync"openId");
  • wxrequest({
  • url: appbaseUrl '/getLoginCode' method'POST' headerapppostHeader data:{ success consolelog result result ==){
  • wxshowToast({
  • title'登陆成功' showModal'登陆失败' content'该用户暂时没有权限或者商户' showCancelfalse
  • }
  • })
  • fail})
  • 这里的websocket也可以替换为消息队列中间件,但是这样是不是大材小用了呢? 

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。