最近接到一个需求,要求用手机扫码实现用户登录,这是近几年比较流行的登录方式。这样确实是实现用户体验至上,操作简单,方便实用。拿到需求之后,我与后端大哥商量后,敲定了具体的实施方案。其实重要的还是要弄懂他实现的原理。

需求:用户至上的体验效果,手机扫码同步登录状态

很多企业在开发自己app的同时会推出网页版,为了登录操作更方便、更安全。企业会选用手机扫一扫,实现用户登录。神奇的是。为什么网页只显示一个二维码就可以实现用户登录?这个二维码是固定的吗?怎么给用户分配的id?怎么能把手机上的登录信息同步到网页上?
例如:淘宝、京东这些,如何做到扫一扫授权就能登录成功,并实现用户信息同步的。


下面我们介绍一下手机扫码登录的实现原理,用到的服务器要有2台,手机端服务器和网页端服务器不是同一台服务器。

网页端与服务器

用户打开一个网站的登录页面==>此时浏览器会向服务器发送一个请求,这个请求用来获取登录的二维码==>服务器收到请求后,随机生成一个uuid,并将这个uuid作为key值存储在redis中,同时设置一个过期时间,过期后,用户的界面就会显示“需要重新获取二维码”。同时也将这个key值与本公司的验证字符串绑定在一起,然后将这些生成一个随机的二维码(网上有很多二维码生成器的接口和源码,可以直接调用)==>将二维码和用户的uuid一起返回给浏览器。

前端开发获取到这个这个二维码和uuid==>每隔一秒向浏览器发送一次登录是否成功的请求,请求中携带有uuid作为当前页面的标识符。

这里有一个问题:服务器只存了一个随机的uuid在redis中,那么用户的id的信息怎么会显示出来。其实这个用户的id信息是由手机服务器存在redis中的。这也就为什么要俩台服务器的原因。

手机端与服务器

刚刚我们说了,浏览拿到二维码并且展示在页面上。这个时候前端可以给定一个提示信息。请用手机扫一扫登录。用户拿到手机扫描二维码,就可以得到一个验证信息和一个uuid(扫描二维码获取字符串的这个案例网上也能找到很多),由于手机端已经进行过登录操作,后端也记录了用户信息,所以在访问手机端服务器的时候,参数中已经携带用户的token,手机端服务器就可以解析用户的uesrid(注意:这里从token中取值而不是手机端直接传userid是为了安全,直接传userid可能会被截获和修改,token是加密的,被修改的风险会小很多)。手机端将解析到的数据和用户token一起作为参数,向服务器发送验证登录请求(这里的服务器是手机服务器,手机端的服务器跟网页端服务器不是同一台服务器)。服务器收到请求后,首先对比参数中的验证信息,确定是否为用户登录请求接口。如果是,返回一个确认信息给手机端。

手机端收到返回后,将登录确认框显示给用户(防止用户误操作,同时使登录更加人性化)。用户在手机上确认是进行的登录操作后,手机再次发送请求。服务器拿到uuId和userId后,将用户的userid作为value值存入redis中以uuid作为key的键值对中。

登录成功

然后,浏览器再次发送请求的时候,浏览器端的服务器就可以得到一个用户Id,并调用登录的方法,生成一个浏览器端的token,然后浏览器再次发送请求的时候,将用户信息返回给浏览器,登录成功。这里存储用户id而不是直接存储用户信息是因为,手机端的用户信息,不一定是和浏览器端的用户信息完全一致。


如果你是前端小可爱,那么只需发送请求,接收消息就可以。重要的逻辑部分和解析工作还是由后端大佬们挑大梁,希望可以帮助到大家。

手机扫码登录实现原理相关推荐

  1. IM要做手机扫码登录?先看看微信的扫码登录功能技术原理

    本文原文由作者Amazing10原创发布于公众号业余码农,收录时有改动,感谢原作者的技术分享. 1.引言 某天中午,吃完午饭,摊在自己的躺椅上,想趁吃饱喝足的午后时间静静享受独自的静谧. 干点什么好呢 ...

  2. 深入理解微信二维码扫码登录的原理

    文章目录 1.二维码应用场景及安全问题 2.二维码登录的本质 3.二维码验证机制的原理解析 4.深入理解二维码在登录的交互过程 5.总结感悟 1.二维码应用场景及安全问题 二维码使用广泛,生活处处都有 ...

  3. 微信扫码登录实现原理

    二维码这把利刃,产品应该用到极致 微信扫码登录实现原理 转载于:https://www.cnblogs.com/gym333/p/7699885.html

  4. 手机扫码登录电脑QQ出现无法登录问题

    用QQ手机版扫描二维码安全登录电脑QQ,然后出现"当前版本过低,请升级到最新版本,报错代码[00020],为此腾讯QQ每隔一段时间会进行一次升级,但是腾讯的升级用户体验不太友好,很多人一头雾 ...

  5. IM的扫码登录功能如何实现?一文搞懂主流的扫码登录技术原理

    本文引用了3位作者"精品唯居"."  Yangfan2016"." MrYun"的部分文章内容,一并感谢. 1.引言 扫码登录这个功能,最早 ...

  6. 淘宝和微信的扫码登录实现原理

    目录 基本技术原理 扫码登录功能到底是什么样的? 扫码登录功能的完整技术逻辑 1)网页端与服务器的配合逻辑: 2)手机端与服务器的配合逻辑: 3)登录成功时的逻辑: 4)详细的技术原理总结如下图所示: ...

  7. 二维码扫码登录的原理

    二维码登录的本质 二维码登录本质上也是一种登录认证方式.既然是登录认证,要做的也就两件事情! 告诉系统我是谁 向系统证明我是谁 比如账号密码登录,账号就是告诉系统我是谁, 密码就是向系统证明我是谁; ...

  8. 网页二维码,App 扫码登录实现原理

    需求介绍 首先,介绍下什么是扫码登录.现在,大部分同学手机上都装有qq和淘宝,天猫等这一类的软件.而开发这些app的企业,都有他们相对应的网站.为了让用户在使用他们的网站时,登录更加方便和安全.这些企 ...

  9. 架构:网页二维码,App 扫码登录实现原理

    需求介绍 首先,介绍下什么是扫码登录.现在,大部分同学手机上都装有qq和淘宝,天猫等这一类的软件.而开发这些app的企业,都有他们相对应的网站.为了让用户在使用他们的网站时,登录更加方便和安全.这些企 ...

最新文章

  1. ArcGIS Server 内存占用相关
  2. MapInfo常见数据格式
  3. Spring 框架所有版本大集合下载
  4. SQL 技巧-ORACLE
  5. C#获取本机可用端口
  6. 【计算神经科学冒险者们】2.3 神经编码:特征选择(Neural Encoding:Feature Selection)...
  7. 基于PageRank的作弊检测算法
  8. Java技术:Optional 相关用法介绍笔记
  9. Ubuntu下动态库与静态库混合连接
  10. 你的GAN再不听话,就把它暴力肢解了吧,有用 | Demo · 代码
  11. Git中的“起源”是什么?
  12. C#网络编程之---TCP协议的同步通信(相互发送接收数据)
  13. CPU+GPU异构集群搭建的总结说明
  14. Chrome小恐龙游戏前端修改代码【含原理和代码】
  15. android twitter第三方登录,android中接入twitter进行第三方登录
  16. linux创建777权限的文件,Linux文件夹权限777,无法创建文件
  17. 不变初心数 (15 分) C语言
  18. java integer转成负数_Java 十进制和十六制之间的转化(负数的处理)
  19. ③读后感之《异类不一样的成功启示录》格拉德威尔
  20. 试验数据管理系统TDM与SDM

热门文章

  1. 腾讯社招 —— 腾讯游戏后端工程师(一面)
  2. 《Java小子怒闯数据结构九重天》第三重天——栈
  3. 以Python角度学习Javascript(一)
  4. 前端js实现本地模糊搜索
  5. 公务员面试题——人际关系
  6. 使用nginx分流虎牙爱奇艺同时直播
  7. 万代南梦宫假面骑士时尚品牌HENSHIN by KAMEN RIDER首登中国;安宏资本宣布与资生堂达成协议 | 知消...
  8. 第十九章、主机名控制者: DNS 服务器
  9. Vue 使用 Vue-socket.io 实现即时聊天应用(实战篇 二)
  10. UVA 1471 Defense Lines 单调队列优化