扫码登录,背后是如何实现的?

article/2025/9/18 8:45:37

引言

        近年来,随着智能手机和移动支付的普及以及互联网应用的不断更新迭代,扫码登录已经成为了我们日常生活中非常普遍的登录方式。扫码登录能够迅速的成为我们各大网站常用的登录方式一定存在它的原因。

        首先一个非常重要的原因,扫码登录还可以提高用户的使用体验。在过去,我们需要记住各种复杂的用户名和密码,然后花费很多时间输入这些信息才能完成登录。有了扫码登录以后,我们只需要用手机扫描二维码即可完成登录,非常方便快捷。这大大提高了用户的使用体验,并且可以帮助企业增加用户黏性。

        其次,扫码登录的出现是可以提高用户安全性。相比于传统的用户名密码登录方式,扫码登录更加安全且不容易被黑客攻击。因为每个二维码都是独一无二的,只有在扫描正确的二维码之后才能完成登录,这使得扫码登录成为了一种优秀的身份验证方式,可以有效地降低账户被盗风险。

        此外,扫码登录也有助于推进数字化时代的发展。在数字化时代,我们需要更快速、更高效、更安全的登录方式来保障我们的账户安全,扫码登录正是应对这个需求而出现的。

        但是你知道扫码登录背后的原理么,本文参考了一些优秀的文章,带你一起来了解一下扫码登录是如何实现的。

二维码简介

二维码的生成

        二维码是一种用于存储数据的二维图形码,由黑白色块组成,具有快速扫描和识别的特点。与传统的条形码相比,二维码可以存储更多的信息,并且可以容错,即在一定程度上损坏时仍能正确读取。

        制作二维码可以使用二维码生成器软件或在线生成器网站,目前国内最常用的二维码生成网站为草料二维码。首先,在二维码生成器中输入要编码的内容,如网址、文本或联系方式等。随后,有的二维码生成器会让选择二维码的尺寸和纠错级别,通常越大的尺寸能够存储更多的信息,但也会增加扫描时间和空间消耗。纠错级别指的是二维码在损坏的情况下还能够被正确解码的能力,不同的纠错级别对应着不同的数据保护能力。最后,点击生成按钮即可得到一个彩色的二维码图像,可以保存到计算机或打印出来贴在物品上。

二维码的解析

        二维码的解析过程包括图像处理和数据解码两个部分。 首先是图像处理。当我们用手机或扫码器扫描二维码时,设备使用相机捕获图像,并通过算法进行预处理。首先,对图像进行二值化处理,将彩色图像转换为黑白二值图像。接着,进行边缘检测,找到二维码中的定位点和编码区域。然后,进行透视变换,将二维码区域校正为一个矩形图像。最后,进行图像分割,将矩形图像分成若干小块,并提取出每个小块中的黑白格子信息。

        接下来是数据解码。在图像处理完成后,就可以对二维码中的数据进行解码了。解码过程需要依据二维码的编码规则,对每个小块中的黑白格子进行解析。通常,二维码采用的编码方式是汉明码或 RS 码。这些编码方式可以实现数据的纠错和自动识别。在解码的过程中,还需要考虑二维码的版本、纠错等级、编码方式等因素,以保证解码的准确性和稳定性。当解码完成后,设备将得到一个包含原始数据的字符串。

系统认证的本质

用户无论是通过扫码的方式登录还是使用账号密码进行登录,都是为了做两件事:

  1. 告诉系统我是谁
  2. 向系统证明我就是我

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

        我们在日常登录网站时,其实是不需要每次访问都输入账号密码的,大多数情况都是第一次在浏览器访问这个网站的时候需要登录,后面很长一段时间再使用这个设备以及这个浏览器进行这个网站访问的时候其实不需要进行扫码或者输入账号密码。难道是扫码过程中,或者第一次输入密码后,我们的手机或者电脑把密码缓存到本地,后续再进行访问的时候直接将本地的密码发送过去了么?其实仔细想想这样不太可能,因为这样太不安全的,黑客很容易窃取的你的设备本地缓存的各种密码。

        其实目前大多数的系统登录认证是基于token认证进行实现的,它通过使用特定的算法将用户凭证转换为安全令牌,并将其传递给客户端应用程序。该令牌通常包含有关用户和会话状态的信息,以便在应用程序的后续请求中进行身份验证和授权。这种身份验证机制的本质是使用户能够在不直接向服务器发送凭证的情况下访问受保护的资源。相反,一旦用户被验证通过,该系统生成一个加密的Token,并将其返回给客户端应用程序。客户端应用程序随后将此Token附加到每个后续请求中,并在必要时将其提供给服务器进行验证。

        看了上面的介绍,你是否还是对token是什么比较懵,下面我会再简单介绍一下。

Token是什么

        Token,又被称为令牌,是一种在计算机系统中广泛使用的安全令牌,用于身份验证和授权。通常情况下,Token是由服务器生成的一个随机字符串,Token会和用户的账号信息以及设备信息进行关联。在进行认证服务时,Token通过客户端应用程序传递到服务器上,以表明其已被验证过且有权访问某些资源。Token通过解决身份验证和授权问题,为现代计算机系统提供了更强大的安全性和可靠性。

        为什么需要Token呢?在过去,很多计算机系统采用基于Cookie或Session的身份验证机制进行用户认证和授权。然而,这种机制存在很多缺点,如Cookie可能被窃取或篡改,而Session则需要在服务器上维护一定的状态信息,从而导致负载增加和服务器性能下降等问题。与之相比,Token是一种更高效、更安全、更灵活的身份验证和授权机制,它不依赖于服务器上的状态信息,并且可以跨越多个域和应用程序使用。

基于 token 的认证机制流程步骤大致如下:

  1. 首次登录时,客户端应用程序向服务器发送用户名、密码、设备信息等凭证,以请求身份验证。
  2. 服务器验证用户凭证是否正确,并生成一个Token。此Token通常包含有关用户和会话状态的信息,例如用户ID、设备id等。这个token本质上其实就是一串有着特殊意义的字符串,它的意义就在于,通过它可以找到对应的账号与设备信息。
  3. 服务器将该Token进行加密,并将其返回给客户端应用程序作为响应。客户端应用程序随后将此Token存储在本地,以备后续请求使用。
  4. 在后续的每个请求中,客户端应用程序会将该Token附加到HTTP请求参数中,并将其发送到服务器。
  5. 服务器接收到请求后,解密并验证该Token的有效性。如果Token有效,则相应的操作被授权通过,并且服务器响应与请求相关的数据。
  6. 如果Token无效或已过期,则服务器将拒绝请求,并返回相关的错误信息。

        从前面这个流程,我们可以看到,客户端不会也没必要保存你的密码,相反,它是保存了token。可能有些同学会想,这个token这么重要,万一被别人知道了怎么办。实际上,知道了也没有影响, 因为设备id是唯一的,只要你的设备信息别人不知道, 别人拿其他设备来访问,验证也是不通过的。可以说,客户端登录的目的,就是获得属于自己的token。 关于设备id的内容可以参考这篇文章:傻傻分不清楚?带你了解设备id

扫码登录原理

        介绍完token我们前置的知识也就够了,接下来我们切回正题,继续来聊扫码登录。

        回忆一下,我们在进行扫码登录过程中,一般二维码经历了三个状态:待扫描、已扫描待确认、已确认:

  1. 扫码前,手机端应用是已登录状态,PC端显示一个二维码,等待扫描
  2. 手机端打开应用,扫描PC端的二维码,扫描后,会提示"已扫描,请在手机端点击确认"
  3. 用户在手机端点击确认,确认后PC端登录就成功了

 

待用户扫码

        这个阶段的主要任务是生成二维码,这个步骤是在服务端和PC端之间进行,,不涉及移动端。PC端主要起到给服务端发送登录请求以及展示二维码的功能,服务端负责生成二维码ID。

        首先,用户在PC端选择扫码登录方式后,PC端需要向服务端发生用户登录的请求,告诉服务端用户想要通过扫码二维码的方式进行登录,你需要赶快生成一个二维码供用户扫码,在这个请求当中会携带PC端的设备信息。

        服务端收到请求后,会生成唯一的二维码 ID,你可以理解为 UUID,并且将 二维码ID跟PC设备信息关联起来,这跟移动端第一次登录有点相似。

        PC端接受到二维码 ID 之后,将二维码 ID 以二维码的形式展示,等待移动端扫码。此时在 PC 端会启动一个定时器,轮询查询二维码的状态。如果移动端未扫描的话,那么一段时间后二维码将会失效。

 

已扫描待确认

我们使用移动端扫描PC端的二维码以后,PC端的二维码状态就会变成『扫码成功,请按照手机端提示进行确认』。这个阶段主要是移动端跟服务端交互的过程。

  1. 首先,用户使用手机去扫描PC端的二维码,通过二维码获取到其中的二维码ID。
  2. 然后,移动端会调用服务端API将移动端的身份信息(告诉服务端我是谁)与二维码ID一起发送给服务端
  3. 接着,服务端接收到请求,将用户的身份信息与二维码ID进行绑定,生成一个临时的token,然后把这个临时token发送给移动端。临时token与token一样,不同的地方在于它只能用一次,用过就失效。
  4. 因为PC端一直在轮询二维码状态,一旦服务端二维码的状态发生了改变,它就可以在界面上把二维码状态更新为已扫描,告知用户扫码成功,提示用户进行确认操作。

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

确认登录

最后一步,我们需要在手机上点击确认就可以成功登录了。

  1. 用户在手机上点击确认后,手机端会调用服务端的接口,告诉服务端我已经确认,这个过程会携带上一步收到的临时token。
  2. 服务端收到确认后,校验临时token,通过后将允许登录,然后根据二维码ID绑定的设备信息与账号信息,生成用户PC端登录的新token。
  3. PC端轮询到了二维码状态为登录状态,并且会获取到了生成的 token,完成登录。
  4. 后续,服务器端会跟手机端一样,维护着 token 跟二维码、PC 设备信息、账号等信息。后续PC端再进行访问都会基于新的token完成。

面试题

面试题:请你介绍一下我们使用手机扫码电脑上的二维码进行登录的原理。

答:

扫码登录过程中二维码有三个状态:待扫描、已扫描待确认、已确认。

待扫描阶段由PC端向服务端发起生成二维码的请求,并在请求中携带PC端的设备信息。服务端收到请求后会生成一个二维码ID发送给客户端进行响应,同时会将二维码ID与PC端设备信息绑定到一起。PC端收到二维码ID后会转换成二维码进行展示,供用户扫码,然后不断轮询服务端二维码的状态。

已扫描待确认阶段。移动端扫描PC端二维码获取二维码ID,将手机端登录的信息凭证(token)和 二维码 ID 作为参数发送给服务端。服务端接受请求后,会将 token 与二维码 ID 关联,然后生成一个临时token。PC端轮询到服务端二维码状态改变后,会变更二维码状态为已扫描待确认。

确认阶段。用户在移动端点击确认以后,会将确认登录请求以及临时token发送给服务端,然后端校验临时token以后会允许登录,然后生成PC端的新token。PC端轮训已确认登录,并且获取新的token,完成登录。后续PC端再登录直接通过token进行登录即可。 

参考文章:

二维码扫码登录是什么原理 - 掘金

​​​​​​聊一聊二维码扫描登录原理 - 掘金


http://chatgpt.dhexx.cn/article/la5JWgaE.shtml

相关文章

网站实现微信扫码登录

网站实现微信扫码登录 1 准备工作1.1 申请网站应用 2 快速开始2.1 微信扫码登录流程说明2.2 生成微信二维码的两种方式2.2.1 微信提供的二维码生成URL2.2.2 将微信登录二维码内嵌到自己页面 2.3 系统微信扫码登录示例2.3.1 流程说明2.3.2 核心代码2.3.2.1 前端代码2.3.2.2 后端…

【一】微信公众号之扫码登录

微信公众号之扫码登录 ​ 原来公司的官网就支持账号密码、手机验证码、QQ扫码授权、微信扫码授权等多种登录方式。今天要分享的就是关于微信扫码授权登录的原理。 一、准备工作 使用的是微信登录功能实现的,需要先在微信开放平台注册开发者帐号,并拥有一…

公众号扫码登录

1.流程概述 1.1 申请公众号 1.2 创建带参数的公众号二维码,参数值为scen_id的值 1.3 微信基础配置接口编写,get方式的接口为微信测试接口,必须能正常访问,post方式的接口为扫码回调接口,从请求中获取微信返回的xml包…

二维码扫描登录,你必须知道的 3 件事!

作者 | 互联网平头哥 本文经授权转载自互联网平头哥(ID:it_pingtouge) 扫二维码登录现在比较常见,比如微信、支付宝等 PC 端登录,并且好像每款 APP 都支持扫码登录,不搞个扫码登录都不好意思。作为技术人员…

微信扫码登录实现

需求 使用微信扫码登录的授权方式登录系统 实现 此扫码登陆过程中使用了,微信开放平台(需支付300开通开发者认证)的网站应用实现的。 官方文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wec…

web扫码登录

文章目录 需求流程交互流程服务交互流程 关键思路代码生成二维码,返回给PC展示轮询查询二维码状态APP扫码请求登录 总结 需求 pc端实现app扫码登录 流程 交互流程 服务交互流程 关键思路 主要问题在于如何识别APP端用户,然后传递给PC端已经登录成功 …

开放平台–扫描微信二维码登录

准备 如不了解第三方登录流程,建议先大概了解一下,在来看看代码。 说明: 由于开放平台无测试号测试,所以只能上开放平台进行配置信息。公众平台的测试号并不能给开放平台使用。 微信开放平台地址:https://open.weixi…

二维码登陆

上一段时间研究微信公共账号,发现微信提供了一个扫码登陆验证的功能。近期头痛于经常忘记用户名密码,因此考虑是否可以结合这个功能,完成免密码登陆。百度后发现,有很多仁兄已经做过类似的功能了。 如这篇文章: 实现网站二维码扫描登录 仔细研究后,发现很…

二维码登录(三)扫码登录

承接上篇博客,在进行二维码生成之后,app进行扫码,扫码成功之后,手机点击登录,进行绑定登录关系,后台做自动关联与自动登录。 本文git地址:https://github.com/xvshu/qrlogin 1,扫码…

微信扫码登陆(1)---扫码登录流程讲解、获取授权登陆二维码

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

二维码扫码登录

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

扫码登录详解

目录 扫码流程分析 流程详解 步骤一:PC端准备二维码 步骤三:状态确认 token认证机制 扫码流程分析 1.扫码前,手机端已经是登陆状态,PC端显示一个二维码,等待扫描。 2.手机端打开应用,扫描PC端的二维码…

新增商品

1、在http代理设置,添加过滤参数: .*pusher\.*\/websocket.* .*/venilog/log/one .*\.(bmp|css|js|gif|ico|jpe?g|png|swf|woff) .*pusher\/info.* 2、启动http代理设置,录制脚本,将登陆和发布商品的脚本修改成’登陆‘&#x…

自定义商品分类,选择分类之后,添加商品附属性;仿淘宝后台添加商品附属性的价格和数量

效果图&#xff08;图片较大&#xff0c;加载较慢&#xff09; 页面部分&#xff1a; <div class"layui-form-item" id"add_attribute"><label class"layui-form-label">商品分类</label><div class"layui-input-i…

javaScript原生版购物车:全选、单选、全删、商品数量增减、计算总价、添加商品(代码)

题目&#xff1a; CSS代码如下&#xff1a; <style> *{ margin: 0px; padding: 0px; } .header,.content,.floot{ width: 800px; margin:0px auto; } .header ul li,.content ul li{ float: left; list-style: none; width: 100px; line-height: 100px; text-align: cen…

商品管理的新增

实现的功能如下&#xff1a; 点击新增弹出新增模态框通过下拉框绑定商品类别和商品单位保存新增 主要代码&#xff1a; 以上就是我的分享&#xff0c;如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔&#xff01;

案例:实现在购物车中添加商品和删除购物车中指定商品的功能

一、向购物车中添加商品 1.1.创建AddCartServlet public class AddCartServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doPost(request, response);}SuppressWarnings(&q…

14.商品添加功能

商品用例的bean层 添加商品的用例实现首先要有封装商品的bean&#xff0c;还要有封装商品种类的bean。 封装商品种类的bean package cn.bingou.domain;/*** 商品种类的bean* author 吹静静**/ public class ProdCategory {private int id;private String cname;public ProdCate…

二十三、商城 - 商品录入-新增商品(11)

目录 &#x1f33b;&#x1f33b; 一、商品录入【选择商品分类】1.1 需求分析1.2 准备工作1.3 代码实现1.3.1 一级分类下拉选择框1.3.2 二级分类下拉选择框1.3.3 三级分类下拉选择框1.3.4 读取模板ID 二、商品录入【品牌选择】2.1 需求分析2.2 代码实现 三、商品录入【扩展属性…

java添加功能_商品添加功能的实现

返回的结果&#xff1a; package com.taotao.common.utils; import java.util.List; import com.fasterxml.jackson.databind.JsonNode; import com.fasterxml.jackson.databind.ObjectMapper; /** * 淘淘商城自定义响应结构 */ public class TaotaoResult { // 定义jackson对象…