全网最全的扫码登录实现方案

 1.什么是扫码登录?

  web端登录,为了实现方便性以及安全性,展示二维码,APP端扫码,完成登录流程,要求:自己的web服务,自己的APP(使用第三方登录微信QQ);大致流程如下:

  

      

 

2.技术难点

  手机扫码完成后调用后端登录接口,完成登录,这里服务器需要通知前端说我已经登录完成,你可以开始跳转了;说白了就是服务器向客户端推送消息的流程;

 

3.二维码生成

  java端使用google的zxing包,生成二维码;将二维码一Base64的方式传到前端;Google的依赖是:

     <dependency>
            <groupId>com.google.zxing</groupId>
            <artifactId>core</artifactId>
            <version>3.3.0</version>
        </dependency>

  二维码生成以及转Base工具类下载链接: https://pan.baidu.com/s/14r4OTBQlB236YYYu3Uav3w

 

3.实现方案

  1.最实用运用最广的实现方案(90%使用率)

    前端轮询实现,目前运用的企业:CSDN,支付宝,京东等

  2.短连接+轮询 -- polling(即时)

    微信网页版扫码登录;

    何为短连接:客户端向后端发送请求,后端没有消息推送客户端,则阻塞当前线程,等N秒后,仍没有消息,response前端;

    前端:

      先看微信的前端场景:  

      

      如无消息,在阻塞20秒左右响应408,并开启新的请求:  

      

      则前端只需要保证收到错误的状态码,重新发起请求即可;

    后端:

      Tomcat连接数有限,如果一个连接需要占用连接20秒,那么用户一多连接数很快消耗殆尽,这里需要使用DeferredResult来异步实现;具体实现方法看:https://www.cnblogs.com/code-sayhi/articles/10191526.html

       Redis(list+blpop):redis存储用户是否扫码登录成功;基于redis和blpop来实现没有消息阻塞后端线程固定时间;(这里只说具体思路)

  3.websocket

    基于netty-socketIO实现web端和服务端通信;具分布式部署方案以及相关信息见: https://www.cnblogs.com/code-sayhi/articles/11327487.html

 

  4.第三方goeasy消息即时通信

    即时,不占用服务器资源,开发简单,总知哪都好就是“要钱”;确定:并发量小,服务真的贵,自己使用websocket轻松可以实现2万的并发

    下面说下简单的实现:

    4.1:进入官网:https://www.goeasy.io  ;创建免费应用

      

    后端:下载相应依赖,代码如下:

@Controller
@RequestMapping("/goeasy")
public class GoEasyController {

    @ResponseBody
    @RequestMapping(value = "/sendMessage", method = RequestMethod.POST)
    public void readMessage(@RequestBody String channel) {
        GoEasy goEasy = new GoEasy( "https://rest-hangzhou.goeasy.io", "BC-d7920b8c7567461d8042935546fc3360");
        goEasy.publish(channel,"Hello, GoEasy!", new PublishListener(){
            @Override
            public void onSuccess() {
                System.out.print("消息发布成功。");
            }
            @Override
            public void onFailed(GoEasyError error) {
                System.out.print("消息发布失败, 错误编码:" + error.getCode() + " 错误信息: " + error.getContent());
            }
        });
    }
}

    前端:导入对应的js文件:

      

    goEasyUtil.js 由于我是使用的Angular,这里通过这个js对其简单的封装;

    在ts中在用到的地方,然后直接调用

 

  5.基于SSE实现

posted @ 2019-08-09 15:44  zlAdmin  阅读(2749)  评论(0编辑  收藏  举报