技术派微信扫码登录实现（👍强烈推荐）

技术派的登录实际上经历过几版设计调整，现在的方案是通过关注“二哥狗腿子”微信公众号，并向公众号输入验证码，从而实现自动登录；最开始我们计划的是，直接通过扫二维码来实现一键登录；但由于个人公众号的权限问题，没办法落实，但是不妨碍我们来学习一下微信扫码登录的实现逻辑。

接下来我将介绍一下扫码登录的原理，并徒手撸一个扫码登录的示例工程，给大家展示下如何来实现这个诉求

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

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

原理解析

1. 场景描述

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

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

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

2. 原理与流程简述

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

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

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

pc登录，生成二维码

二维码要求唯一，并绑定请求端身份（否则假定两个人的二维码一致，一个人扫码登录了，另外一个岂不是也登录了？）
客户端与服务端保持连接，以便收到后续的登录成功并调首页的事件（可以选择方案比较多，如轮询，长连接推送）

app扫码，授权登录

扫码之后，跳转授权页面（所以二维码对应的应该是一个url）
授权（身份确定，将身份信息与pc请求端绑定，并跳转首页）

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

Demo示例实现

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

1. 项目环境

首先常见一个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
        3.0
    

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



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