需求介绍

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

有很多小伙伴可能会感到很神奇,网页上只是显示了个二维码,它怎么就知道是哪个手机扫到了二维码,并且进行登录的呢?而且,登录完成以后,还能直接把用户信息显示给用户,真的是很神奇啊。

网页端+服务器

  接下来就是对于这个服务的详细实现。首先,大概说一下原理:用户打开网站的登录页面的时候,向浏览器的服务器发送获取登录二维码的请求。服务器收到请求后,随机生成一个uuid,将这个id作为key值存入redis服务器,同时设置一个过期时间,再过期后,用户登录二维码需要进行刷新重新获取。同时,将这个key值和本公司的验证字符串合在一起,通过二维码生成接口,生成一个二维码的图片(二维码生成,网上有很多现成的接口和源码,这里不再介绍。)然后,将二维码图片和uuid一起返回给用户浏览器。

  浏览器拿到二维码和uuid后,会每隔一秒向浏览器发送一次,登录是否成功的请求。请求中携带有uuid作为当前页面的标识符。这里有的同学就会奇怪了,服务器只存了个uuid在redis中作为key值,怎么会有用户的id信息呢?

  这里确实会有用户的id信息,这个id信息是由手机服务器存入redis中的。具体操作如下:

手机端+服务器

  话说,浏览器拿到二维码后,将二维码展示到网页上,并给用户一个提示:请掏出您的手机,打开扫一扫进行登录。用户拿出手机扫描二维码,就可以得到一个验证信息和一个uuid(扫描二维码获取字符串的功能在网上同样有很多demo,这里就不详细介绍了)。由于手机端已经进行过了登录,在访问手机端的服务器的时候,参数中都回携带一个用户的token,手机端服务器可以从中解析到用户的userId(这里从token中取值而不是手机端直接传userid是为了安全,直接传userid可能会被截获和修改,token是加密的,被修改的风险会小很多)。手机端将解析到的数据和用户token一起作为参数,向服务器发送验证登录请求(这里的服务器是手机服务器,手机端的服务器跟网页端服务器不是同一台服务器)。服务器收到请求后,首先对比参数中的验证信息,确定是否为用户登录请求接口。如果是,返回一个确认信息给手机端。

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

登录成功

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

  登录原理图如下:

文章来源:http://www.cnblogs.com/liyasong/

●史上最强Tomcat8性能优化

●阿里巴巴为什么能抗住90秒100亿?--服务端高并发分布式架构演进之路

●B2B电商平台--ChinaPay银联电子支付功能

●学会Zookeeper分布式锁,让面试官对你刮目相看

●SpringCloud电商秒杀微服务-Redisson分布式锁方案

查看更多好文,进入公众号--撩我--往期精彩

一只 有深度 有灵魂 的公众号0.0

你知道APP扫码登陆的实现原理吗?相关推荐

  1. 手机扫码登陆网页的原理实现

    微信,淘宝等许多应用通过手机扫码登陆,是如何实现的? 这里以微信页面为例: 浏览器请求微信服务端,微信的server端返回给浏览器一个唯一的UID,前端将其封装到一个二维码中,并且发一个长链接请求携带 ...

  2. 简单解析一下扫码登陆原理,简单到你想不到!

    前言 随着wx的普及对开发同学来说一些业务场景会使用到"扫码登录"功能,特别是PC网页端,在此之前没有这方面的开发经历,所以接到这个需求的时候还是有点慌的,最终通过查阅网上的资料以 ...

  3. nodejs京东接口分析系列-实现京东自动化功能 之 扫码登陆,需要puppeteer

    最近想要实现一个京东扫码登陆和自动下单,自动抢购的功能(ps:实现京东自动化功能), !!!本项目纯属学习性质,禁止商业用途 给大家分享一下我是如何一步步通过分析京东的网站请求,查看京东网站的源代码去 ...

  4. 微信、支付宝、微博等WEB端扫码登陆实现原理

    微信.支付宝.微博等web端通过APP扫码登陆的实现 我们在使用微信电脑.网页版时,会有通过APP应用扫码登陆的入口,那么它是怎么实现的呢? 常见的扫码登陆界面如下图: 我们在PC端打开这些应用或者W ...

  5. vue qrcodejs2生成二维码实现手机APP扫码进行web网页登录

    在vue中使用 qrcodejs2 1.安装 npm install  qrcodejs2 --save 2.引入 import QRCode from "qrcodejs2" 3 ...

  6. 利用临时二维码实现在电脑浏览器上的微信扫码登陆功能 - EasyWeChat版

    2019独角兽企业重金招聘Python工程师标准>>> 这个方法最开始用在还没有"微信开放平台"的时候,现在也有不少网站在用,简单说就是生成一个临时二维码放到服务 ...

  7. python实战扫码下载_Python实例 一 12306抢票(一)扫码登陆

    一.登陆 采用扫码二维码的方式登陆,就是得下个app..  验证码太烦了,不想搞 1.获取二维码: 先分析二维码一般是一张图片,我们把他下载到本地 来方便扫码 图片还是base64的数据形式 但是我们 ...

  8. 第三方网站实现钉钉(DingTalk)扫码登陆(Vue+SpringBoot)

    第三方网站实现钉钉(DingTalk)扫码登陆(Vue+SpringBoot) 一,本地库添加钉钉UserId字段 字段类型VarChar,管理者的userid为String,其余为Long 二,钉钉 ...

  9. Android 微信扫码登陆

    最近项目需求中有一个微信扫码登陆功能,即用手机微信扫码功能扫描终端二维码实现登陆的功能 随即打开微信开发者文档查看,不亏为官方,简洁明了,看得我是一脸懵逼,踩了N多坑,太不友好了,言归正传,希望对一些 ...

最新文章

  1. 策略模式(Strategy)简介
  2. 物料自运过帐的模拟和修正
  3. Spring常见问题
  4. [Linux]F5负载均衡器
  5. java中手动装入新类到类装饰器_关于java:抽象装饰器类中的功能而不是装饰器...
  6. /bin/sh^M:损坏的解释器: 没有那个文件或目录
  7. 数据科学包8-pandas高级内容之聚合统计
  8. 把自定义encoder加入ffmpeg源码
  9. python做词云统计_python词频统计,生成词云
  10. navicat工具能安装在linux,linux下安装navicat
  11. RK3399 GT1X触摸屏驱动调试笔记
  12. 启动hfds文件系统,普通用户查看不到jps中的服务进程,但是root用户可以【该问题已经解决】
  13. win10禁用全角_win10系统屏蔽全角/半角快捷键的操作办法
  14. 《2019腾讯区块链白皮书》全文发布,13次提及Facebook加密项目Libra(附下载)
  15. wdk与DDK有什么区别
  16. 怪物猎人GU-武器派生整理之双刀篇
  17. Ubuntu上qtcreator的arm-poky-linux-gnueabi-配置
  18. EXCEL---VBA
  19. 匠心造就可靠,协同铸就未来
  20. 安卓开发实战(1)之程序员入门代码,Hello,world!

热门文章

  1. rootfs 制作ubuntu_如何构建一个arm64 AArch64的Ubuntu rootfs
  2. 昆仑通态(MCGS)样板程序,包含历史实时报表查询导出、画面动画风扇转动
  3. MySQL查询字典表
  4. java8 date获取第一个星期几,最后一个星期日LocalDate
  5. HTML5——新增可拖动
  6. Matlab中uigetfile( ) iscell() 函数的使用
  7. 虚拟光驱dameon tools 残留 文件catch!删除方法
  8. [HTML入门]使用内联样式写CSS
  9. java按键事件空格_java键盘事件 空格键
  10. 重阳节[转自百度]---又到重阳节了