侧边栏壁纸
博主头像
soulballad博主等级

技术文章记录及总结

  • 累计撰写 169 篇文章
  • 累计创建 26 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

5.扫码登录实现方案汇总

soulballad
2020-11-25 / 0 评论 / 0 点赞 / 57 阅读 / 1,933 字
温馨提示:
本文最后更新于 2022-03-01,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

4.实现方案

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文件:

由于我是使用的Angular,这里通过这个js对其简单的封装;在ts中在用到的地方 ,然后直接调用 goEasyUtils.getMessage('xxxx');

5.基于SSE实现

我们曾如此渴望生命的波澜,到后来才发现,人生最曼妙的风景是内心的淡定与从容

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

0

评论区