扫码登录场景

扫码登录场景想必我们都不陌生——很多PC端的网站都提供了扫码登录的功能,无需在网页上输入任何账号和密码,只需要通过手机上的APP,如微信、淘宝、QQ等等,使用扫描功能,扫描网页上的二维码,确认登录,就可以完成网页端登录。
扫码登录QQ邮箱

扫码登录分析

我们来分析一下,扫码登录,其实涉及到三种角色,需要解决两个问题

三种角色

很明显,扫码登录当中涉及到的三种角色:PC端手机端服务端
三端
相关的设计都要围绕这三端来展开,具体的设计其实就是每一端应该完成什么功能?应该怎么实现?端和端应该如何交互?

两个问题

扫码登录本质上是一种特殊的登录认证方式,我们面对的是两个问题

  • 手机端如何完成认证
  • PC端如何完成登录

如果用普通的账号密码方式登录认证,PC端通过账号密码完成认证,然后服务端给PC端同步返回token key之类的标识,PC端再次请求服务端,需要携带token key,用于标识和证明自己登录的状态。

服务端响应的时候,需要对token key进行校验,通过则正常响应;校验不通过,认证失败;或者token过期,PC端需要再次登录认证,获取新的token key。

现在换成了扫码登录:

  • 认证不是通过账号密码了,而是由手机端扫码来完成
  • PC端没法同步获取认证成功之后的凭据,必须用某种方式来让PC端获取认证的凭据。

扫码登录实现

手机端如何完成认证

二维码怎么生成

二维码和超市里的条形码类似,超市的条形码实际是一串数字,上面存储了商品的序列号。

二维码的内容就比较自由,里面不止可以存数字,还可以存任何的字符串。我们可以认为,它就是字符的另外一种表现形式。

下面我通过一个网站把文字转成了二维码:

所以,我们手机扫码这个过程,其实是对二维码的解码,获取二维码中包含的数据。

那么二维码怎么生成呢?

首先,二维码是展示在我们的PC端,所以生成这个操作应该由PC端去请求服务端,获取相应的数据,再由PC端生成这个二维码。

二维码包含什么呢?

二维码在我们这个场景里面是一个重要的媒介,服务端必须给这个数据生成惟一的标识作为二维码ID,同时还应该设置过期的时间。PC端根据二维码ID等数据生成二维码。

同时,服务端也应该保存二维码的一些状态:未扫描已成功已失效

APP认证机制

我们还得认识一下基于APP的移动互联网认证机制。

首先,手机端一般是不会存储登录密码的,我们我们发现,只有装载APP,第一次登录的时候,才需要进行基于账号密码的登录,之后即使这个清理掉这个应用进程,甚至手机重启,都是不需要再次输入账号密码的,它可以自动登录。

这背后有一套基于token的认证机制,和PC有些类似,但又有一些不同。

  • APP登录认证的时候除了账号密码,还有设备信息
  • 账号密码校验通过,服务端会把账号与设备进行一个绑定,进行持久化的保存,包含了账号ID,设备ID,设备类型等等
  • APP每次请求除了携带token key,还需要携带设备信息。

因为移动端的设备具备唯一性,可以为每个客户端生成专属token,这个token也不用过期,所以这就是我们可以一次登录,长久使用的原理。

手机扫码干了什么

那这下就清楚了,我们手机扫码干了两件事:

  • 扫描二维码:识别PC端展示的二维码,获取二维码ID

  • 确认登录:手机端通过带认证信息(token key、设备信息)、二维码信息(二维码ID)请求服务端,完成认证过程,确认PC端的登录。

确认登录

ps: 关于手机扫码和确认,不是重点,所以这里进行了简化,一种说法是扫码时同时向服务端申请一次性临时token,确认登录的时候携带这个临时token来访问服务端。

PC端如何完成登录

接下来到我们的重头戏了,手机端完成了它的工作,我们服务端的登录怎么进入登录状态呢?

我们前面讲了,PC端通过token来标识登录状态。那么手机端扫码确认之后,我们的服务端就应该给PC生成相应的token。

那么,这个PC端又如何获取它所需的token key,来完成登录呢?

PC端可以通过获取二维码的状态来进行相应的响应:

  • 二维码未扫描:无操作
  • 二维码已失效:提示刷新二维码
  • 二维码已成功:从服务端获取PC token

获取二维码状态,主要有三种方式:

  • 轮询
  • 长轮询
  • websocket

轮询

轮询方式是指客户端会每隔一段时间就主动给服务端发送一次二维码状态的查询请求。

长轮询

长轮询是指客户端主动给服务端发送二维码状态的查询请求,服务端会按情况对请求进行阻塞,直至二维码信息更新或超时。当客户端接收到返回结果后,若二维码仍未被扫描,则会继续发送查询请求,直至状态变化(已失效或已成功)。

Websocket

Websocket是指前端在生成二维码后,会与后端建立连接,一旦后端发现二维码状态变化,可直接通过建立的连接主动推送信息给前端。

总结

通过前面的分析,我们已经知道了二维码扫码登录的一些关键点,现在我们把这些点串起来,来看一看二维码扫码登录的整体的实现流程。

以常用的轮询方式获取二维码状态为例:

  1. 访问PC端二维码生成页面,PC端请求服务端获取二维码ID
  2. 服务端生成相应的二维码ID,设置二维码的过期时间,状态等。
  3. PC获取二维码ID,生成相应的二维码。
  4. 手机端扫描二维码,获取二维码ID
  5. 手机端将手机端token二维码ID发送给服务端,确认登录。
  6. 服务端校验手机端token,根据手机端token二维码ID生成PC端token
  7. PC端通过轮询方式请求服务端,通过二维码ID获取二维码状态,如果已成功,返回PC token,登录成功。

如何自己设计一个扫码登录相关推荐

  1. spring boot 自动跳转登录页面_徒手撸一个扫码登录示例工程

    徒手撸一个扫码登录示例工程 不知道是不是微信的原因,现在出现扫码登录的场景越来越多了,作为一个有追求.有理想新四好码农,当然得紧跟时代的潮流,得徒手撸一个以儆效尤 本篇示例工程,主要用到以下技术栈 q ...

  2. IM扫码登录技术专题(三):通俗易懂,IM扫码登录功能详细原理一篇就够

    本文引用了作者"大古同学"的"二维码扫码登录是什么原理"一文的主要内容,为了更好的理解和阅读,即时通讯网收录时有修订和改动,感谢原作者的分享. 1.引言 自从微 ...

  3. IM即时通讯软件开发之扫码登录功能

    在2维码扫码登录的过程中,大家可能会有疑问:这二维码安全吗?会不会泄漏我的个人信息?我的im系统敢不敢也搞一个扫码登录呢? 针对这些顾虑,我们需要了解一下二维码扫码登录背后的技术和逻辑本质. 扫码登录 ...

  4. 一图搞懂扫码登录的技术原理

    现在扫码登录是一种很常见的登录方式.当用户需要登录某个网站时,网站会提供一种扫码登录的方式,用户打开相应的手机App,扫描网站上显示的二维码,然后在App中确认登录,网站监测到用户确认登录后,跳转到登 ...

  5. 钉钉扫码登录cs架构,winform设计钉钉扫码客户端

    先上效果图 下面开始流程: 准备工作 你需要一个注册钉钉的账号,以获取APPID: 你还需要你要登录的第三方网站的网址,以及一张网站logo图片的地址: 具体步骤: 1.注册成功后,登录,进行如下四步 ...

  6. 微信扫码登录只能填一个授权回调域问题

    背景 公司增加了个微信扫码登录,费劲千辛万苦终于把应用申请下来了,但遇到了一个头疼的事情:微信授权回调域只能写一个,且不支持通配.这下可好了,总不能把每个需要微信登录的二级域名都申请一个应用吧?而且一 ...

  7. Spring Boot 实现扫码登录,这种方式太香了!!

    作者 | 93年颈椎病人 来源 | https://blog.csdn.net/q826qq1878/article/details/91041679 最近有个项目涉及到websocket实现扫码登录 ...

  8. 扫码登录是如何实现的?

    点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | 精品唯居 来源 | https://www.c ...

  9. spring boot高性能实现二维码扫码登录(上)——单服务器版

    前言 目前网页的主流登录方式是通过手机扫码二维码登录.我看了网上很多关于扫码登录博客后,发现基本思路大致是:打开网页,生成uuid,然后长连接请求后端并等待登录认证相应结果,而后端每个几百毫秒会循环查 ...

最新文章

  1. 最全面的百度地图JavaScript离线版开发
  2. python3 subprocess.Popen 报错 No such file or directory
  3. 【C 语言】内存四区原理 ( 栈内存与堆内存对比示例 | 函数返回的堆内存指针 | 函数返回的栈内存指针 )
  4. SAP ECC EHP7 RFC 发布成WebService
  5. python二级考试可以用pycharm吗_学Python,Pycharm不能不知道怎么用
  6. linux文件系统概念目录结构
  7. leetcode 61. Rotate List
  8. php2个栈写一个队列,【数据结构】栈面试题--两个栈实现一个队列
  9. python playsound播放时关闭_Python3 超好用的音频播放模块 playsound
  10. 详解 http-server的安装和使用
  11. python合并单元格的快捷键是什么_【答疑】wps word表格如何合并单元格,快捷键是什么? - 羽兔网问答...
  12. symbian塞班系统支持格式
  13. win下装django
  14. 计算机主板性能参数,影响电脑性能的硬件参数之主板
  15. Winform中datagridview显示数据时,不显示特殊符号,如下划线不显示问题
  16. 三坐标检测之测量基准面的选择
  17. PyTorch 11—简单图像定位
  18. IAR报错could not find the following source file
  19. 时间序列预测新范式——基于迁移学习的AdaRNN方法
  20. Android_版本对应

热门文章

  1. 暑假学习计划:Day_1.JSPServletTomcat 环境搭建到基础的认识。
  2. 在微型计算机中硬件和软件的关系是_,计算机的硬件系统和软件系统的关系是什么?...
  3. 贪心的奇巧淫技-Join the Strings
  4. java抽象类变量_Java抽象类
  5. 考文垂鹰摩托车的历史
  6. 五款最棒的Go语言开发工具?
  7. XMU 1617 刘备闯三国之汉中之战 【BFS+染色】
  8. 【Python妙用】用200行Python代码制作一个迷宫小游戏
  9. 金蝶首席用户体验官对“用户体验”的思考
  10. Buuctf -web wp汇总(一)