原创/朱季谦
微信扫码登录是很常见的技术，曾经在一次面试当中，面试官就曾问过微信扫码登录的实现思路，这次，以微信读书网页版扫码登录为例子，聊聊我对它技术实现思路一些思考。
以谷歌浏览器来做分析，打开F12，准备随时观察http连接状况。
可以看到，在二维码弹出来的时候，前端调用了后端两个接口，一个是getuid()，一个是getinfo()，这里面涉及到哪些逻辑实现呢？
image
稍微思考一下，其实很好理解，每个随机生成的二维码，其实都是一个uuid码，也就是说，在点击登录的时候，会执行一个getuid()方法，该方法调用后端API：web/login/getuid会返回一个随机生成的uuid码，当这个uuid码返回到前端上时，就以二维码的形式展示。
点击getuid()，可看到该方法返回一个随机生成的uuid:38e673a9-5bd3-4f0c-ba2f-62ab376372a9
image
与此同时，还调用了另一个getinfo()方法，这应该是getuid调用成功后的回调方法，也就是当getuid()执行成功后，得到一个uid时，就立马调用getinfo()方法，同时将生成的uid当做参数传给getinfo()，让其去访问后端API。
image
当没有用手机微信进行扫码操作时，会看到getinfo()一直没有返回值，可见，它一直在做轮询操作，在某段时间内，若没有轮询成功，就会断开连接，接口调用失败。
image
到这里，可以简单归纳下生成二维码流程，即，在点击登录时，会调用getuid()方法调用后端API接口“web/login/getuid”，将随机返回一个唯一uid，这时会将参数传给回调方法getinfo({"uid":"38e673a9-5bd3-4f0c-ba2f-62ab376372a9"})，该方法会将uid参数传给后端API接口“web/login/getinfo”，这时，将一直做轮询将uid去redis查询，若能查询成功，即登录成功，反之，连接超时失败。
下面用两段伪代码来说明下大概代码逻辑：
一.前端React.js获取uuid并回调给getinfo()伪代码：
export const getuid=(params={},queue='getuid')=>dispatch=>{ http.post({ url:'https://weread.qq.com/web/login/getuid', params:params, queue:queue, callback:(res)=>{ //getuid方法执行成功，返回{uid: "38e673a9-5bd3-4f0c-ba2f-62ab376372a9"}，回调getinfo() dispatch(getinfo({uid:res.uid})) } }); } export const getinfo=(params={},queue='getinfo')=>dispatch=>{ http.get({ url:'https://weread.qq.com/web/login/getinfo', params:params, queue:queue, callback:(res)=>{ //若登录成功，应该重定向到已登录状态的主页 } }); }
复制
二.后端API接口/web/login/getinfo伪代码：
public User getinfo(String uid){ ...... //循环查询uid在redis里是否存在值 while(true){ String user=redisTemplate.opsForValue().get(uid); if(user!=null){ return user; } } ...... }
复制
用一个时序图来简单表示这个过程：
image
那么，什么时候才能通过uid去redis查询才能得到返回值呢？
这时候，就要说到扫码阶段了。
当getinfo(String uid)接口在轮询查询redis是否有key为uid的值时，拿出手机，在二维码有效时间内，用微信扫一扫进行扫码操作，这时，手机上就会出现该页面展示：
image-20210309231421142
若点击登录，网页版微信读书就会刷新，进入到已登录状态的首页。
这个过程很好理解，即在扫码后，手机端会从二维码中获取到uid，这时，若点登录，就会将uid与微信用户信息一块包装成json格式post提交给后端，然后在后端接口中，将以uid:user的key-value形式set插入到redis数据库。这时，另一边正在以uid当做key值轮询去redis是否有值的getinfo(String uid)方法，正好就能查到刚插入到redis的值，这时通过类似redisTemplate.opsForValue().get(uid)的方式就能把刚插入的user信息查询出来，最后返回给PC端的微信读书前端，即登录成功。
最后，完整的流程可以时序图这样表示：
image
PC端微信读书登录成功的时候，页面重新做了刷新，应该是在后台做了接口重定向，具体如何重定向，感兴趣的朋友可以自行思考研究，微信扫码登录大体上就是这个思路，但细节方面应该会有更多相关校验在里面。
这里主要是分析下它的整体实现思路。
值得提一点是，PC端微信读书前端其实做了反调试，但没关系，它这个反调试的做法很容易破解，可参考我的做法，即打开谷歌浏览器，按F12，调出控制台，把这个图标点亮，就可以关闭微信读书前端自带的反调试设置了。
