代码编织梦想

扫码登录

1 概述

在日常 Web 端产品的使用中,一般都会支持扫码登录,这种方式操作简单,相对传统的手机号登录等方式速度更快、安全性更高,还可以增加自家产品的粘合度。

2 登录原理

扫码登录本质是解决将 APP 端的用户登录信息(通常是 Token)通过扫码的形式安全稳定地同步给 Web 端。
在这里插入图片描述

1)用户打开 Web 端网页,进入扫码登录的界面;
2)从 Web 端服务器获取二维码的图并获取其状态;
3)Web 端服务器在生成二维码时,会生成一个 uuid 和二维码进行关联,并将 uuid 存入 db 记录中;
4)用户打开 APP 端,对着二维码进行扫码授权操作;
5)APP 客户端从二维码中读取到 uuid,带着 APP 内的身份信息访问 APP 端服务器;
6)APP 端服务器获取到用户的身份信息后,将用户 id 更新到 db 中对应 uuid 的记录中,此时 Web 服务器就能拿到对应的用户 id,之后生成登录身份信息返回给浏览器,即用户在 Web 端完成了登录;

3 实现方案

基于以上分析,我们可以将扫码登录分为两个步骤:获取扫码状态和获取用户登录信息。

3.1 获取扫码状态

用户在 Web 端页面看到二维码信息后,会使用客户端进行扫码授权,而 Web 端需要尽快获取到二维码的状态(已扫码、已过期、已取消、已授权)并同步到网页中展示给用户, 现在有3种方案:

3.1.1 长链接

Web 端访问服务器获取二维码状态时,服务器是阻塞了请求,等到二维码的状态变更后才会返回结果,这种请求都会有超时配置(通常是几分钟),但又不能无限等待。

方案优点:

  • 减少不必要的资源访问浪费;
  • 可以准确区分恶意访问(扫描漏洞,后面的部分会对这部分进行阐述)并进行限流;
  • 当二维码状态变更时,相对于下面的定时轮询方案有更快的响应速度;

方案缺点:

  • 占用服务端大量连接数;
  • 由于超时时间通常比较长,需要web端和nginx对这些请求进行特殊的超时配置;

3.1.2 轮询

Web 端每隔一个固定时间(为了更好的用户体验通常选择为 1 秒)访问服务器获取二维码的状态并进行展示。

方案优点:

  • 符合常规思维,开发模式比较简单易维护;
  • 相比阻塞等待方案能够快速释放服务端的连接;
  • 对于服务端的变更升级也更加友好,因为变更升级会导致服务重启,采用阻塞方案则可能会造成部分连接断开;

方案缺点:

  • 如果扫码登录请求访问量大,会导致服务端的访问量一直处于高位;
  • 产生了大量的无用访问,造成资源浪费;
  • 无法准确区分恶意访问并对其进行合理限流;

3.1.3 长轮询

长轮询即结合了长链接和定时轮询的优点,Web 端访问服务器获取二维码状态时,服务器依然会阻塞了请求,但是超时时间会相对比较短(比如15秒),超时后 Web 端会继续发起请求,如此往复。

方案优点:

  • 结合了阻塞等待和定时轮询的优点,削弱了两个方案的的缺点;

方案缺点:

  • 让 Web 端开发逻辑更加复杂,相当于同时实现了两种方案;

3.1.4 方案选择

三种方案各有优缺点,应该结合业务进行选择。

先以微信公众平台为例,进入其扫码登录页,就会发现密密麻麻的调用获取扫码状态请求过程,很明显是采用了轮询方案。
在这里插入图片描述
再看看其他厂家选择:

平台方案
微信开放平台长轮询
微信公众平台轮询
京东轮询
淘宝&&天猫轮询
百度长轮询
B 站轮询
快手长链接

从上面可以看出目前主流方案是定时轮询,这是由于扫码登录本身也是低频操作,并不会造成很大量的请求,但优点又比较突出。

3.2 获取登录信息

当用户扫码登录后,Web 服务器如何将用户信息(如 Token)同步给 Web 端。

3.2.1 返回 Token

指直接返回用户登录信息 Token。

方案优点:

  • 流程简单,完成扫描授权后流程后直接结束;

方案缺点:

  • 无法支持多站点跨站登录,即 Web 端服务器只能给一个业务提供扫码登录功能;
  • 由于直接返回了 Token,安全风险等级较高;

3.2.2 授权 Ticket

Web 端服务器在扫码完成后,返回的是一个授权 Ticket(也可以直接返回带 Ticket 的授权 url, 便于 Web 端直接跳转),之后需要 Web 端带着这个 Ticket 调用目标服务器的接口进行身份的验证同步,如图所示:

在这里插入图片描述

方案优点:

  • 没有直接传递 Token,安全性更好;
  • 可以支持多站点跨站登录身份信息的同步,适用于服务于多站点的扫码登录服务;

方案缺点:

  • 实现逻辑较为复杂,需要维护完整的授权 Ticket 生成、校验以及失效逻辑;

3.2.3 方案选择

平台方案
微信开放平台授权Ticket
微信公众平台Token
京东授权Ticket
淘宝&&天猫授权Ticket
百度授权Ticket
B 站授权Ticket
快手授权Ticket

经过调研发现,在国内互联网各大厂商中返回授权 Ticket 的方案被较多采用,这也由于各家旗下拥有众多 PC Web 站,直接返回 Token 的方案无法多站点的登录信息同步,而上面表格中亦有一个另类——微信公众平台,大概与其产品独立性有关。

4 安全防护

前面提到,扫码登录的本质是通过扫码手段安全稳定地同步用户信息。那么我们可以通过哪些手段提高同步过程中的安全性?

4.1 定时过期

每个二维码都有一个唯一的 uuid 与之对应,为了防止恶意人员通过接口遍历查询以获取之前已经被扫的二维码信息,数据不能永久存储于db中,需要完成扫码后从 db 删除或者定期过期清除。

4.2 UUID不可遍历

简单的方案是将自增 ID 和一个固定 salt 进行 md5 之后生成一个字符串作为uuid;也可以通过 UUID.randomUUID() 生成一个随机字符串。当然,还可以采用对称加密的方式存储一些加密信息。

4.3 签名验证

这个方式关键点在于将 uuid 和请求中的 Cookie 或参数信息经过哈希算法得到一个 signature 值,此时即使有人破解了 uuid 的生成规则,只能生成uuid,但是无法获知对应 uuid 生成时对应的 Web 端状态(Cookie),因此破解了 uuid 后也无法获取对应 signature 值,也就无法获取二维码状态。

4.4 合理限流

一般是在获取二维码阶段对来源 IP 进行访问的限制。

当然扫描二维码阶段也可以做限流,但是如果采用是定时轮询方案,由于访问次数太多,无法做到精确识别和控制,可操作性不强;而如果采用的是阻塞等待方案,也能进行限流,但是如果已经采用了上面参数签名验证,则可以把恶意用户都收口在获取二维码阶段,在这个阶段限流的意义不大。

5 总结

其实每个方案都有其适用的场景和阶段,没有严格意义上的孰优孰劣,这个从各互联网公司的选择中也能看出,而要基于自身的需要选择最合适的方案,切忌盲目选择最复杂的方案。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/adminpd/article/details/121345027

二维码扫码登录_arog的博客-爱代码爱编程_扫码登录软件

   项目结构 模块介绍 流程1 pc端:1:打开二维码登录网页index.html2:index.html调用GetQrCodeServlet3:GetQrCodeServlet干2件事   a:生成随机的uuid,是一个唯一标识,该标识贯穿整个流程   b:生成二维码图片,二维码信息:http://60.28.201.37:8380/QrCode

扫码登录原理及实践_席儒的博客-爱代码爱编程

  前言 近期实现了一个扫码登录的需求,在此之前没有这方面的开发经历,所以接到这个需求的时候还是有点慌的,最终通过查阅网上的资料以及老大的指导下实现了这个功能,目前已经投入使用,实现之后还是蛮兴奋的。特此记录一下实现的过程。 主要原理 怎么实现的呢?首先得了解其中的原理,由于我只提供后台接口,因此只记录后台接口的来龙去脉。先贴张图吧 图是我自

微信扫码登录网页实现原理_iteye_5904的博客-爱代码爱编程

扫码登录操作过程 浏览器输入:https://wx.qq.com/?lang=zh_CN 手机登录微信,利用“扫一扫”功能扫描网页上的二维码手机扫描成功后,提示“登录网页版微信”;网页上显示“成功扫描 请在手机点击确认以登录”手机端点击“登录网页版微信”,网页跳转到用户的微信操作界面 整个扫码登录的操作过程还是挺简单的,而且交互地实时性比较好,

手机扫码登陆原理-爱代码爱编程

问题描述 qq,淘宝等应用在pc端app或网页版都有扫码登陆功能(下述统称为网页端)。用户无需输入用户名和密码,通过在手机端app登陆后,扫网页中的二维码即可直接登陆。 原理分析:网页端+服务器 用户在浏览器点击“二维码登陆”向服务器发送扫码登陆请求,服务器收到请求后,随机生成一个uuid(通用唯一标识符:universally unique

微信扫码登陆(1)---扫码登录流程讲解、获取授权登陆二维码_后端元宇宙的博客-爱代码爱编程_扫码登录

扫码登录流程讲解、获取授权登陆二维码 具体流程可以看微信官网的扫码登录文档 地址:准备工作 | 微信开放文档 其实官方文档已经讲的非常清楚而且讲的也很明白。 一、扫码登录流程讲解 1、首先准备工作 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。 在进行微信OAuth2.在进行微信OAuth2.0授权登录

扫码登陆实现的理解_木子青云的博客-爱代码爱编程_二维码被扫后向服务器发送请求并传输唯一key值

1、首先浏览器客户端向服务器发送请求获取二维码,然后服务器接收请求后生成一个唯一识别码,将这个唯一识别码作为key存到redis服务器,同时生成一个有效时间,若是过期后,则需要刷新重新生成二维码,同时服务器将公司的验证字

扫码登录功能如何实现?一文搞懂主流的扫码登录技术原理-爱代码爱编程

点击上方蓝色字体,选择“设为星标” 优质文章,及时送达 本文来源: my.oschina.net/u/4231722/blog/3154805 1、引言 扫码登录这个功能,最早应该是微信的PC端开始搞,虽然有点反人类的功能(不扫码也没别的方式登录),但不得不说还是很酷的。 下面这张图,不管是IM开发者还是普通用户,应该很熟悉:

手机扫码登录的思路图-爱代码爱编程

  说明: [M]:表示移动端[B]:表示浏览者(浏览器客户端)[S]:服务端,消息推送者及扫描认证接口发布者 步骤说明: Step1 [B]浏览登录页面Step2 [S]产生一个标识符UUID,并推送给[B],生成登录二维码Step3 [M]扫描二维码,前提条件是[M]已登录Step4 [M]解析二维码信息获取UUIDStep

二维码扫码登录原理-爱代码爱编程

    简介 二维码扫码登录这个操作,在我们的日常生活和工作中频频出现。 这种操作主要发生于:在手机设备已经登录的情况下,需要在电脑PC端应用或者网页应用也登录,这时,如果该应用支持扫码登录,我们就可以用手机端的应用来扫描PC端生成的一个二维码,进而进行登录。如下图所示:   比如我们每个人几乎都会接触过的: 微信扫码登录、QQ扫码登录、

扫码登录是如何实现的-爱代码爱编程

        目前支付宝、钉钉、新浪微博等软件都支持扫码二维码登录,不需要输入用户名密码,打开手机微信扫一扫,便自动登录。从原理上讲,二维码只能是一段文本的编码,如何用它实现快捷登录的呢?         下面以微信扫码登录为例,来讲一下原理。 电脑上打开微信,会有扫码登录 使用二维码解码器解析出来是如下的网址: 1:用户 A 访问微信网

说说微信扫码登录背后的实现原理?-爱代码爱编程

1)网页端与服务器的配合逻辑: 接下来就是对于这个服务的详细实现。 首先用户打开网站的登录页面的时候,向浏览器的服务器发送获取登录二维码的请求。服务器收到请求后,随机生成一个uuid,将这个id作为key值存入redis服务器,同时设置一个过期时间,再过期后,用户登录二维码需要进行刷新重新获取。 同时,将这个key值和本公司的验证字符串合在一起,通

微信扫码登陆原理解析-爱代码爱编程

目录 前言 微信扫码登陆原理解析 扫码登陆简单总结 前言 随着wx的普及对开发同学来说一些业务场景会使用到“扫码登录”功能,特别是PC网页端,在此之前没有这方面的开发经历,所以接到这个需求的时候还是有点慌的,最终通过查阅网上的资料以及老大的指导下实现了这个功能,目前已经投入使用,实现之后还是蛮兴奋的。特此记录一下实现的过程。 微信扫码登陆原理解

说一下网页扫码登录的原理-爱代码爱编程

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。 扫码登录原理 扫码登录,可以分为移动端与服务端的交互和pc端与服务端的交互两个过程。 1.1 pc端和服务端 当用户打开登录页面时,页面会发起一个向服务器发送获取登录二维码的请求。服务器接收到请求后,随机生成一个uuid(唯一标识),将这个uu

如何实现扫码登录功能?-爱代码爱编程

真实面试小场景: 经过八股和算法的交锋,老三松了口气,都hold住了。只见面试官微微一笑,“其实,我真正想问的是……你觉得扫码登录应该怎么实现。” 老三:“啊……这个,哦……那个,这个就这么,然后……额……嗯……” 面试官:“了解了,回去等通知吧。” 完…… 好了,铺垫结束,进入我们今天的主题,扫码登录功能该如何实现? 扫码登录场景 扫码登录场