说一下网页扫码登录的原理

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。

在这里插入图片描述

扫码登录原理

扫码登录,可以分为移动端与服务端的交互和pc端与服务端的交互两个过程。

1.1 pc端和服务端

  1. 当用户打开登录页面时,页面会发起一个向服务器发送获取登录二维码的请求。
  2. 服务器接收到请求后,随机生成一个uuid(唯一标识),将这个uuid存入服务器中,同时设置一个过期时间,如果过期,需要重新获取二维码。
  3. 把uuid和校验信息生成二维码,将二维码和uuid,返回给pc页面。
  4. pc页面拿到二维码和uuid后,发起轮询。轮询有两种情况:一种是登录成功,一种是二维码过期,过期需要提用户刷新二维码。

1.2 移动端与服务端

  1. 移动端扫码之后,会得到验证信息和uuid。因为移动端是已经登录过的,所以,本地有当前的用户信息(token、userId等),移动端将需要带上用户信息和校验信息,向服务端发送登录请求。
  2. 服务器收到请求后,对比参数中的验证信息,确定是否为用户登录请求接口,如果是,返回一个确认信息给移动端。
  3. 移动端收到返回后,将登录确认框显示给用户,用户确认是进行的登录操作后,移动端再次发送请求。
  4. 服务器拿到uuid和移动端的用户信息后,修改用户的状态,将登录成功的状态和用户信息返回给pc端。
  5. pc端轮询得到登录成功的状态,获取登录信息,登录成功!

1.3 图解

在这里插入图片描述

pc端检测二维码的状态不止轮询一种方式,还有我们熟悉的socket也是可以的。

  • socket的方式:pc端保持着与服务器的长连接,当手机端扫描二维码后,带着解析得到的二维码ID第一次发送给服务器,当服务器收到这个请求后,代表用户已经扫描了二维码,这时服务器就可以通过socket告知PC端二维码已被扫描,等待确认;之后手机端无论是取消登录还是确认登录,都会相应的请求服务器,服务器收到请求会根据相应的逻辑处理,进而通知PC端更新相应的状态。
  • 轮询方式:轮询方式即在PC端创建一个定时器,每隔一段时间请求服务器查询状态的更新情况,然后更新网页的显示信息。当时这个定时器得控制好启动时机和生命周期,因为PC端的二维码有可能一直没有被扫描,或者扫描之后没有下一步操作了,这时,如果没有控制好这个定时器,PC端就会一直的请求服务器查询,造成资源浪费和一定的性能损耗。

有微信小程序课设、毕设需求联系个人QQ:505417246

关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢

关注公众号后,回复前端面试题,领取大量前端面试题汇总pdf资料
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/m0_46171043/article/details/115195079