浅谈js二维码扫码登录是什么原理

目录
  • 二维码登录的本质
  • 认识二维码
  • 系统认证机制
  • 扫描二维码登录的一般步骤
    • 大概流程
    • 二维码准备
    • 扫描状态切换
    • 状态确认
  • 总结

前几天看了极客时间一个二维码的视频,写的不错,这里总结下

在日常生活中,二维码出现在很多场景,比如超市支付、系统登录、应用下载等等。了解二维码的原理,可以为技术人员在技术选型时提供新的思路。对于非技术人员呢,除了解惑,还可以引导他更好地辨别生活中遇到的各种二维码,防止上当受骗。

二维码,大家再熟悉不过了

购物扫个码,吃饭扫个码,坐公交也扫个码

在扫码的过程中,大家可能会有疑问:这二维码安全吗?会不会泄漏我的个人信息?更深度的用户还会考虑:我的系统是不是也可以搞一个二维码来推广呢?

这时候就需要了解一下二维码背后的技术和逻辑了!

二维码最常用的场景之一就是通过手机端应用扫描PC或者WEB端的二维码,来登录同一个系统。比如手机微信扫码登录PC端微信,手机淘宝扫码登录PC端淘宝。那么就让我们来看一下,二维码登录是怎么操作的!

二维码登录的本质

二维码登录本质上也是一种登录认证方式。既然是登录认证,要做的也就两件事情!

1、告诉系统我是谁

2、向系统证明我是谁

比如账号密码登录,账号就是告诉系统我是谁, 密码就是向系统证明我是谁; 比如手机验证码登录,手机号就是告诉系统我是谁,验证码就是向系统证明我是谁;

那么扫码登录是怎么做到这两件事情的呢?我们一起来考虑一下

手机端应用扫PC端二维码,手机端确认后,账号就在PC端登录成功了!这里,PC端登录的账号肯定与手机端是同一个账号。不可能手机端登录的是账号A,而扫码登录以后,PC端登录的是账号B。

所以,第一件事情,告诉系统我是谁,是比较清楚的!

通过扫描二维码,把手机端的账号信息传递到PC端,至于是怎么传的,我们后面再说

第二件事情,向系统证明我是谁。扫码登录过程中,用户并没有去输入密码,也没有输入验证码,或者其他什么码。那是怎么证明的呢?

有些同学会想到,是不是扫码过程中,把密码传到了PC端呢?但这是不可能的。因为那样太不安全的,客户端也根本不会去存储密码。我们仔细想一下,其实手机端APP它是已经登录过的,就是说手机端是已经通过登录认证。所说只要扫码确认是这个手机且是这个账号操作的,其实就能间接证明我谁。

认识二维码

那么如何做确认呢?我们后面会详细说明,在这之前我们需要先认识一下二维码!在认识二维码之前我们先看一下一维码!

所谓一维码,也就是条形码,超市里的条形码--这个相信大家都非常熟悉,条形码实际上就是一串数字,它上面存储了商品的序列号。

二维码其实与条形码类似,只不过它存储的不一定是数字,还可以是任何的字符串,你可以认为,它就是字符串的另外一种表现形式,

在搜索引擎中搜索二维码,你可以找到很多在线生成二维码的工具网站,这些网站可以提供字符串与二维码之间相互转换的功能,比如 草料二维码网站

在左边的输入框就可以输入你的内容,它可以是文本、网址,文件........。然后就可以生成代表它们的二维码

你也可以把二维码上传,进行”解码“,然后就可以解析出二维码代表的含义

系统认证机制

认识了二维码,我们了解一下移动互联网下的系统认证机制。

前面我们说过,为了安全,手机端它是不会存储你的登录密码的。但是在日常使用过程中,我们应该会注意到,只有在你的应用下载下来后,第一次登录的时候,才需要进行一个账号密码的登录, 那之后呢 即使这个应用进程被杀掉,或者手机重启,都是不需要再次输入账号密码的,它可以自动登录。

其实这背后就是一套基于token的认证机制,我们来看一下这套机制是怎么运行的,

账号密码登录时,客户端会将设备信息一起传递给服务端, 如果账号密码校验通过,服务端会把账号与设备进行一个绑定,存在一个数据结构中,这个数据结构中包含了账号ID,设备ID,设备类型等等

const token = {
  acountid:'账号ID',
  deviceid:'登录的设备ID',
  deviceType:'设备类型,如 iso,android,pc......',
}

然后服务端会生成一个token,用它来映射数据结构,这个token其实就是一串有着特殊意义的字符串,它的意义就在于,通过它可以找到对应的账号与设备信息,

  • 客户端得到这个token后,需要进行一个本地保存,每次访问系统API都携带上token与设备信息。
  • 服务端就可以通过token找到与它绑定的账号与设备信息,然后把绑定的设备信息与客户端每次传来的设备信息进行比较, 如果相同,那么校验通过,返回AP接口响应数据, 如果不同,那就是校验不通过拒绝访问

从前面这个流程,我们可以看到,客户端不会也没必要保存你的密码,相反,它是保存了token。可能有些同学会想,这个token这么重要,万一被别人知道了怎么办。实际上,知道了也没有影响, 因为设备信息是唯一的,只要你的设备信息别人不知道, 别人拿其他设备来访问,验证也是不通过的。

可以说,客户端登录的目的,就是获得属于自己的token。

那么在扫码登录过程中,PC端是怎么获得属于自己的token呢?不可能手机端直接把自己的token给PC端用!token只能属于某个客户端私有,其他人或者是其他客户端是用不了的。在分析这个问题之前,我们有必要先梳理一下,扫描二维码登录的一般步骤是什么样的。这可以帮助我们梳理清楚整个过程,

扫描二维码登录的一般步骤

大概流程

1、扫码前,手机端应用是已登录状态,PC端显示一个二维码,等待扫描

2、手机端打开应用,扫描PC端的二维码,扫描后,会提示"已扫描,请在手机端点击确认"

3、用户在手机端点击确认,确认后PC端登录就成功了

可以看到,二维码在中间有三个状态, 待扫描,已扫描待确认,已确认。那么可以想象

1、二维码的背后它一定存在一个唯一性的ID,当二维码生成时,这个ID也一起生成,并且绑定了PC端的设备信息

2、手机去扫描这个二维码

3、二维码切换为 已扫描待确认状态, 此时就会将账号信息与这个ID绑定

4、当手机端确认登录时,它就会生成PC端用于登录的token,并返回给PC端

好了,到这里,基本思路就已经清晰了,接下来我们把整个过程再具体化一下

二维码准备

按二维码不同状态来看, 首先是等待扫描状态,用户打开PC端,切换到二维码登录界面时。

1、PC端向服务端发起请求,告诉服务端,我要生成用户登录的二维码,并且把PC端设备信息也传递给服务端

2、服务端收到请求后,它生成二维码ID,并将二维码ID与PC端设备信息进行绑定

3、然后把二维码ID返回给PC端

4、PC端收到二维码ID后,生成二维码(二维码中肯定包含了ID)

5、为了及时知道二维码的状态,客户端在展现二维码后,PC端不断的轮询服务端,比如每隔一秒就轮询一次,请求服务端告诉当前二维码的状态及相关信息

二维码已经准好了,接下来就是扫描状态

扫描状态切换

1、用户用手机去扫描PC端的二维码,通过二维码内容取到其中的二维码ID

2、再调用服务端API将移动端的身份信息与二维码ID一起发送给服务端

3、服务端接收到后,它可以将身份信息与二维码ID进行绑定,生成临时token。然后返回给手机端

4、因为PC端一直在轮询二维码状态,所以这时候二维码状态发生了改变,它就可以在界面上把二维码状态更新为已扫描

那么为什么需要返回给手机端一个临时token呢?临时token与token一样,它也是一种身份凭证,不同的地方在于它只能用一次,用过就失效。

在第三步骤中返回临时token,为的就是手机端在下一步操作时,可以用它作为凭证。以此确保扫码,登录两步操作是同一部手机端发出的,

状态确认

最后就是状态的确认了。

1、手机端在接收到临时token后会弹出确认登录界面,用户点击确认时,手机端携带临时token用来调用服务端的接口,告诉服务端,我已经确认

2、服务端收到确认后,根据二维码ID绑定的设备信息与账号信息,生成用户PC端登录的token

3、这时候PC端的轮询接口,它就可以得知二维码的状态已经变成了"已确认"。并且从服务端可以获取到用户登录的token

4、到这里,登录就成功了,后端PC端就可以用token去访问服务端的资源了

扫码动作的基础流程都讲完了,有些细节还没有深入介绍,

比如二维码的内容是什么?

  • 可以是二维码ID
  • 可以是包含二维码ID的一个url地址 在扫码确认这一步,用户取消了怎么处理?这些细节都留给大家思考

总结

我们从登陆的本质触发,探索二维码扫码登录是如何做到的

1、告诉系统我是谁

2、向系统证明我谁

在这个过程中,我们先简单讲了两个前提知识,

  • 一个是二维码原理,
  • 一个是基于token的认证机制。

然后我们以二维码状态为轴,分析了这背后的逻辑: 通过token认证机制与二维码状态变化来实现扫码登录.

需要指出的是,前面的讲的登录流程,它适用于同一个系统的PC端,WEB端,移动端。

平时我们还有另外一种场景也比较常见,那就是通过第三方应用来扫码登录,比如极客时间/掘金 都可以选择微信/QQ等扫码登录,那么这种通过第三方应用扫码登录又是什么原理呢?

到此这篇关于浅谈js二维码扫码登录是什么原理的文章就介绍到这了,更多相关js二维码扫码登录内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信QQ的二维码登录原理js代码解析

    在很多地方就是都出现了使用二维码登录,二维码付款,二维码账户等应用(这里的二维码种马,诈骗就不说了),二维码验证,多终端辅助授权应用开始多起来,这里先说下啥是二维码,其实二维码就是存了二进制数据的黑白图片,当出现要求二维码登录的时候,服务器会生成一条临时的唯一的二维码信息,发送到客户端以二维码(图片)的形式写入到网页,然后你就会看到统一的四个方形的二维码,如果做的好这个二维码信息应该是有时效的,这里暂且不考虑这些,就简单的微信登录作为例子看看吧: 首先说下整个授权流程: 在客户端网页中会不断向服

  • js微信扫描二维码登录网站技术原理

    微信扫描二维码登录网站是微信开放平台下网站应用的一种接口实现的功能.微信开放平台的网址是https://open.weixin.qq.com 准备工作 网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统. 在进行微信OAuth2.在进行微信OAuth2.0授权登录接入之前,在微信开放平台注册开发者帐号,并拥有一个已审核通过的网站应用,并获得相应的AppID和AppSecret,申请微信登录且通过审核后,可开始接入流程. 授权流程说明 微信OAuth2.0授权登录

  • 浅谈js二维码扫码登录是什么原理

    目录 二维码登录的本质 认识二维码 系统认证机制 扫描二维码登录的一般步骤 大概流程 二维码准备 扫描状态切换 状态确认 总结 前几天看了极客时间一个二维码的视频,写的不错,这里总结下 在日常生活中,二维码出现在很多场景,比如超市支付.系统登录.应用下载等等.了解二维码的原理,可以为技术人员在技术选型时提供新的思路.对于非技术人员呢,除了解惑,还可以引导他更好地辨别生活中遇到的各种二维码,防止上当受骗. 二维码,大家再熟悉不过了 购物扫个码,吃饭扫个码,坐公交也扫个码 在扫码的过程中,大家可能会

  • 浅谈js多维数组和hash数组定义和使用

    多维数组定义 定义数组数组对象用来在单独的变量名中存储一系列的值.使用关键词 new 来创建数组对象. 一维数组定义 var myArray=new Array('a','b','c'); 或 var myArray = []; 二维数组及多维数组定义 javascript二维数组或多维数组都是通过一维数组来模拟起来. 方法1. var arr= new Array(['a','b','c'],['d','e','f']); 方法2: var arr=new Array( new Array()

  • 浅谈js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的域. 下表给出了相对http://store.company.com/dir/page.html同源检测的结果: 要解决跨域的问题,我们可以使用以下几种方法: 一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同

  • 详解基于Koa2开发微信二维码扫码支付相关流程

    前段时间在开发一个功能,要求是通过微信二维码进行扫码支付.这个情景我们屡见不鲜了,各种电子商城.线下的自动贩卖机等等都会有这个功能.平时只是使用者,如今变为开发者,也是有不小的坑.所以特此写一篇博客记录一下. 注: 要开发微信二维码支付,你必须要有相应的商户号的权限,否则你是无法开发的.若无相应权限,本文不推荐阅读. 两种模式 打开微信支付的文档,我们可以看到两种支付模式:模式一和模式二.这二者的流程图微信的文档里都给出了(不过说实话画得真的有点丑). 文档里指出了二者的区别: 模式一开发前,商

  • python实现二维码扫码自动登录淘宝

    一个小项目自动登录淘宝联盟抓取数据,由于之前在Github上看过类似用Python写的代码因此选择用Python来写,第一次用Python正式写程序还是被其"简单"所震撼,当然用的时候还是对其(2.7版)编码.迁移环境等问题所困扰,还好后来都解决了. 言归正传,抓取淘宝联盟的数据首先要解决的就是登录的问题,之前一般会碰到验证码的困扰,现在支持二维码扫码登录反而简单了,以下是登录的Python代码,主要是获取二维码打印,然后不断的检查扫码状态,如果过期了重新请求二维码(主要看逻辑,由于有

  • Android 超简易Zxing框架 生成二维码+扫码功能

    zxing是一个二维码的框架. 配置 1. implementation 'com.journeyapps:zxing-android-embedded:4.1.0' 如果报错在这个文件的android下加上如下配置,让其支持Java1.8,不然只有1.7.1.6 (可在'app'右键---->open module settings------>Module看到) compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 tar

  • 通过vue方式实现二维码扫码功能

    提示 这个插件只能在https协议下才能访问,http协议不好使,最好用vue2,vue3容易报错!!!!! 描述 通过vue的方式,实现扫码功能 参考文档:vue-qrcode-reader去官网–>官方文档 效果展示 实现步骤: 步骤一(安装插件) npm install --save vue-qrcode-reader 步骤二(创建组件) 因为可能多个页面都会用到,所以弄成了组件 (1)在src下面的components创建qrcode.vue (2)代码实现 // qrcode.vue

  • 浅谈SpringMVC请求映射handler源码解读

    请求映射源码 首先看一张请求完整流转图(这里感谢博客园上这位大神的图,博客地址我忘记了): 前台发送给后台的访问请求是如何找到对应的控制器映射并执行后续的后台操作呢,其核心为DispatcherServlet.java与HandlerMapper.在spring boot初始化的时候,将会加载所有的请求与对应的处理器映射为HandlerMapper组件.我们可以在springMVC的自动配置类中找到对应的Bean. @Bean @Primary @Override public RequestM

  • 浅谈js常用内置方法和对象

    JS内置函数不从属于任何对象,在JS语句的任何地方都可以直接使用这些函数.JS中常用的内置函数如下: 1.eval(str)接收一个字符串形式的表达式,并试图求出表达式的值.作为参数的表达式可以采用任何合法的操作符和常数.如果参数中包含JS命令,这些命令也可以被执行,就像这些命令是JS程序的一部分一样. 2.parseInt(str,n)试图从一个字符串中提取一个整数.可附加一个n整数实现返回n进制整数.如果在字符串中存在除了数字.符号.小数点和指数符号以外的字符,就停止转换,返回已有的结果.如

  • 浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预

    -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

随机推荐