徒手撸一个扫码登录示例工程

不知道是不是微信的原因，现在出现扫码登录的场景越来越多了，作为一个有追求、有理想新四好码农，当然得紧跟时代的潮流，得徒手撸一个以儆效尤

本篇示例工程，主要用到以下技术栈

• qrcode-plugin：开源二维码生成工具包，项目链接: https://github.com/liuyueyi/quick-media
• SpringBoot：项目基本环境
• thymeleaf：页面渲染引擎
• SSE/异步请求：服务端推送事件
• js: 原生 js 的基本操作

按照之前的计划，应该优先写文件下载相关的博文，然而看到了一篇说扫码登录原理的博文，发现正好可以和前面的异步请求/SSE 结合起来，搞一个应用实战，所以就有了本篇博文

为了照顾可能对扫码登录不太了解的同学，这里简单的介绍一下它到底是个啥

一般来说，扫码登录，涉及两端，三个步骤

• pc 端，登录某个网站，这个网站的登录方式和传统的用户名/密码(手机号/验证码)不一样，显示的是一个二维码
• app 端，用这个网站的 app，首先确保你是登录的状态，然后扫描二维码，弹出一个登录授权的页面，点击授权
• pc 端登录成功，自动跳转到首页

整个系统的设计中，最核心的一点就是手机端扫码之后，pc 登录成功，这个是什么原理呢？

• 我们假定 app 与后端通过 token 进行身份标识
• app 扫码授权，并传递 token 给后端，后端根据 token 可以确定是谁在 pc 端发起登录请求
• 后端将登录成功状态写回给 pc 请求者并跳转首页（这里相当于一般的用户登录成功之后的流程，可以选择 session、cookie 或者 jwt）

借助上面的原理，进行逐步的要点分析

• pc 登录，生成二维码
  • 二维码要求唯一，并绑定请求端身份（否则假定两个人的二维码一致，一个人扫码登录了，另外一个岂不是也登录了？）
  • 客户端与服务端保持连接，以便收到后续的登录成功并调首页的事件（可以选择方案比较多，如轮询，长连接推送）
• app 扫码，授权登录
  • 扫码之后，跳转授权页面（所以二维码对应的应该是一个 url）
  • 授权（身份确定，将身份信息与 pc 请求端绑定，并跳转首页）

最终我们选定的业务流程关系如下图：

接下来进入项目开发阶段，针对上面的流程图进行逐一的实现

首先常见一个 SpringBoot 工程项目，选择版本2.2.1.RELEASE

pom 依赖如下

    org.springframework.boot
    spring-boot-starter-parent
    2.2.1.RELEASE
     



    UTF-8
    UTF-8
    1.8



    
 org.springframework.boot
 spring-boot-starter-web
    

    
 com.github.hui.media
 qrcode-plugin
 2.2
    

    
 org.springframework.boot
 spring-boot-starter-thymeleaf
    



    
 
     
  org.springframework.boot
  spring-boot-maven-plugin
     
 
    


    
 spring-releases
 Spring Releases
 https://repo.spring.io/libs-release-local
 
     false
 
    
    
 yihui-maven-repo
 https://raw.githubusercontent.com/liuyueyi/maven-repository/master/repository
    

server:
  port: 8080

spring:
  thymeleaf:
    mode: HTML
    encoding: UTF-8
    servlet:
      content-type: text/html
    cache: false

import java.net.*;
import java.util.Enumeration;

public class IpUtils {
    public static final String DEFAULT_IP = "127.0.0.1";

    
    public static String getLocalIpByNetcard() {
 try {
     for (Enumeration e = NetworkInterface.getNetworkInterfaces(); e.hasMoreElements(); ) {
  NetworkInterface item = e.nextElement();
  for (InterfaceAddress address : item.getInterfaceAddresses()) {
      if (item.isLoopback() || !item.isUp()) {
   continue;
      }
      if (address.getAddress() instanceof Inet4Address) {
   Inet4Address inet4Address = (Inet4Address) address.getAddress();
   return inet4Address.getHostAddress();
      }
  }
     }
     return InetAddress.getLocalHost().getHostAddress();
 } catch (SocketException | UnknownHostException e) {
     return DEFAULT_IP;
 }
    }

    private static volatile String ip;

    public static String getLocalIP() {
 if (ip == null) {
     synchronized (IpUtils.class) {
  if (ip == null) {
      ip = getLocalIpByNetcard();
  }
     }
 }
 return ip;
    }
}

@CrossOrigin
@Controller
public class QrLoginRest {
    @Value(("${server.port}"))
    private int port;

    @GetMapping(path = "login")
    public String qr(Map data) throws IOException, WriterException {
 String id = UUID.randomUUID().toString();
 // IpUtils 为获取本机ip的工具类，本机测试时，如果用127.0.0.1, localhost那么app扫码访问会有问题哦
 String ip = IpUtils.getLocalIP();

 String pref = "http://" + ip + ":" + port + "/";
 data.put("redirect", pref + "home");
 data.put("subscribe", pref + "subscribe?id=" + id);


 String qrUrl = pref + "scan?id=" + id;
 // 下面这一行生成一张宽高200，红色，圆点的二维码，并base64编码
 // 一行完成，就这么简单省事，强烈安利
 String qrCode = QrCodeGenWrapper.of(qrUrl).setW(200).setDrawPreColor(Color.RED)
  .setDrawStyle(QrCodeOptions.DrawStyle.CIRCLE).asString();
 data.put("qrcode", DomUtil.toDomSrc(qrCode, MediaType.ImageJpg));
 return "login";
    }
}

    
    
    
    
    
    




    
请扫码登录
    
    


    

private Map cache = new ConcurrentHashMap<>();

@GetMapping(path = "subscribe", produces = {org.springframework.http.MediaType.TEXT_EVENT_STREAM_VALUE})
public SseEmitter subscribe(String id) {
    // 设置五分钟的超时时间
    SseEmitter sseEmitter = new SseEmitter(5 * 60 * 1000L);
    cache.put(id, sseEmitter);
    sseEmitter.onTimeout(() -> cache.remove(id));
    sseEmitter.onError((e) -> cache.remove(id));
    return sseEmitter;
}

@GetMapping(path = "scan")
public String scan(Model model, HttpServletRequest request) throws IOException {
    String id = request.getParameter("id");
    SseEmitter sseEmitter = cache.get(request.getParameter("id"));
    if (sseEmitter != null) {
 // 告诉pc端，已经扫码了
 sseEmitter.send("scan");
    }

    // 授权同意的url
    String url = "http://" + IpUtils.getLocalIP() + ":" + port + "/accept?id=" + id;
    model.addAttribute("url", url);
    return "scan";
}

    
    
    
    
    
    




    
确定登录嘛？

    

 登录
    

    

@ResponseBody
@GetMapping(path = "accept")
public String accept(String id, String token) throws IOException {
    SseEmitter sseEmitter = cache.get(id);
    if (sseEmitter != null) {
 // 发送登录成功事件，并携带上用户的token，我们这里用cookie来保存token
 sseEmitter.send("login#qrlogin=" + token);
 sseEmitter.complete();
 cache.remove(id);
    }

    return "登录成功: " + token;
}

@GetMapping(path = {"home", ""})
@ResponseBody
public String home(HttpServletRequest request) {
    cookie[] cookies = request.getcookies();
    if (cookies == null || cookies.length == 0) {
 return "未登录!";
    }

    Optional cookie = Stream.of(cookies).filter(s -> s.getName().equalsIgnoreCase("qrlogin")).findFirst();
    return cookie.map(cookie1 -> "欢迎进入首页: " + cookie1.getValue()).orElse("未登录!");
}