web扫码登录

article/2025/9/18 8:50:20

文章目录

  • 需求
  • 流程
    • 交互流程
    • 服务交互流程
  • 关键思路
  • 代码
    • 生成二维码,返回给PC展示
    • 轮询查询二维码状态
    • APP扫码请求
    • 登录
  • 总结

需求

pc端实现app扫码登录

流程

交互流程

在这里插入图片描述

服务交互流程

在这里插入图片描述

关键思路

主要问题在于如何识别APP端用户,然后传递给PC端已经登录成功

通过记录标记扫描唯一二维码与用户进行关联,在PC端查询时已绑定通过返回的绑定数据进行登录。这里查询可以使用轮询/长连接,返回绑定的数据主要用于请求返回登录后需要的信息

代码

生成二维码,返回给PC展示

注意返回二维码唯一标识可以进行加码,防止不必要的安全问题

    /*** pc 获取二维码** @return* @throws IOException*/@Overridepublic ScanningCodeDto getLoginScanningCode() throws IOException {//两个字段key二维码标识,code 二维码ScanningCodeDto codeDto = new ScanningCodeDto();String primitiveKey = StrKit.uuid();//hutool包构建aes加密SymmetricCrypto aes = new SymmetricCrypto(SymmetricAlgorithm.AES, ScanningCodeLoginConstant.CODE_SECRET_KEY.getBytes(StandardCharsets.UTF_8));//加密为16进制表示String key = aes.encryptHex(primitiveKey);codeDto.setKey(key);ByteArrayOutputStream baos = new ByteArrayOutputStream();//二维码内容也为加密内容QrCodeUtil.generate(key, 300, 300, null, baos);// 进行Base64编码String code = Base64.encode(baos.toByteArray());baos.flush();codeDto.setCode(code);//redis存储信息,5分钟过期ScanningCodeInfoVo scanningCodeInfoVo = new ScanningCodeInfoVo();scanningCodeInfoVo.setKey(key);scanningCodeInfoVo.setCode(code);scanningCodeInfoVo.setStatus("1");//设置到redis,key和过期时间可以根据自己情况设置redisUtils.set( primitiveKey, scanningCodeInfoVo, 60 * 5);return codeDto;}

二维码包含信息能识别即可,可以是url也可以是标识。返回二维码时同时返回唯一标识来标记查询时是哪个二维码

轮询查询二维码状态

 /*** 查询二维码状态** @param key 二维码唯一标识* @return*/@Overridepublic ScanningCodeStatusDto getScanningCodeStatus(String key) {//解密为字符串SymmetricCrypto aes = new SymmetricCrypto(SymmetricAlgorithm.AES, ScanningCodeLoginConstant.CODE_SECRET_KEY.getBytes(StandardCharsets.UTF_8));String primitiveKey = aes.decryptStr(key, CharsetUtil.CHARSET_UTF_8);//查询redis二维码信息ScanningCodeInfoVo scanningCodeInfoVo = (ScanningCodeInfoVo) redisUtils.get(primitiveKey);if (Objects.isNull(scanningCodeInfoVo)) {//返回已过期throw  new Exception("二维码已过期");}//成功后登录String status = scanningCodeInfoVo.getStatus();ScanningCodeStatusDto codeStatusDto = new ScanningCodeStatusDto();//已扫描if (Objects.equals("2", status)) {//构建aes加密,加密用户id为16进制表示codeStatusDto.setKey(aes.encryptHex(scanningCodeInfoVo.getUserId() + ":" + scanningCodeInfoVo.getUserName()));codeStatusDto.setStatus("2");return codeStatusDto;}codeStatusDto.setStatus("1");return codeStatusDto;}

有些系统使用长连接,也可以。 注意这里可以加个锁,避免多台设备扫描到一个码。

APP扫码请求

 /*** 扫描二维码** @param dto* @return*/@Overridepublic String scan(ScanningCodeDto dto) {//获取对应二维码信息SymmetricCrypto aes = new SymmetricCrypto(SymmetricAlgorithm.AES, ScanningCodeLoginConstant.CODE_SECRET_KEY.getBytes(StandardCharsets.UTF_8));String primitiveKey = aes.decryptStr(dto.getKey(), CharsetUtil.CHARSET_UTF_8);//查询redis二维码信息ScanningCodeInfoVo scanningCodeInfoVo = (ScanningCodeInfoVo) redisUtils.get(primitiveKey);if (Objects.isNull(scanningCodeInfoVo)) {//返回已过期throw new Exception("二维码已过期");}//成功后登录String status = scanningCodeInfoVo.getStatus();if (Objects.equals("2", status)) {//二维码已经使用throw new Exception("二维码已经使用");}//标记二维码信息,标记状态已经使用scanningCodeInfoVo.setStatus("2");scanningCodeInfoVo.setUserId(teasUserSession.getUserId());scanningCodeInfoVo.setUserName(teasUserSession.getUserName());//修改redis中二维码信息redisUtils.set(primitiveKey, scanningCodeInfoVo, 60 * 5);//返回二维码情况return ”登陆成功“;}

登录

轮询查询到已经扫描并且获取到用户信息后,几个方案都可以

  1. 调用特定的登录接口进行登录,通过返回的key包含的加密信息进行登录(我这里的使用)
  2. 轮询接口查询到已经扫码,获取用户信息直接后台登录
  3. 返回加密后的账号密码调用原有的登录接口(和第一种差不多)

根据自己的情况进行处理即可

总结

扫码登录流程大差不差,主要解决的问题

  1. 谁扫了码,如何去识别用户扫码
  2. pc如何获取用户信息并达成登录

有问题欢迎一起探讨个人信息联系我.


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

相关文章

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

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

把商品添加到购物车的方法

因为抢华为荣耀的缘故&#xff0c;研究了下京东添加商品到购物车的方法&#xff0c;具体步骤如下 一&#xff1a;打开商品页面&#xff0c;找到商品的id 例如这个商品的id就是1056970 二&#xff1a;把链接里面的http://gate.jd.com/InitCart.aspx?pid###&pcount1&pt…

php 商品模块添加商品属性,添加新商品

进入添加商品页后&#xff0c;如图1&#xff0c;2 添加新商品 图1 图2 促销价格前台表现 图3 图4 图5 附加价格前台表现 图6 添加新商品 图7 配件和关联商品前台表现形式 图8 图9 通用信息商品分类&#xff1a;商品分类是必填项&#xff0c;用于帮助客户找到需要的商品。如果您…

添加商品

添加商品 步骤分析: 1.在index.jsp添加一个超链接 跳转到add.jsp 2.add.jsp放入一个表单 3.表单提交到 AddProductServlet 封装数据 调用service完成保存操作 跳转到FindAllServlet (请求转发和重定向) 有表单使用的时候若使用请求转发会出现重复提交 方案1:重定向 …

十七、商品添加

&#xff08;1&#xff09;通过编程式导航跳转到商品添加页面 1. 在List.vue页面。点击添加商品&#xff0c;实现页面跳转 2. 创建商品添加组件Add.vue 3. 为Add组件添加路由 &#xff08;2&#xff09; 渲染添加页面的基本UI结构 使用到Alter警告和Steps 步骤条组件 1. 引入…

(三十)商品管理-添加商品(上传图片)

&#xff08;三十&#xff09;商品管理-添加商品(上传图片) 添加商品(上传图片)1.修改页面上添加连接/store/adminProduct?methodaddUI2.在addUI请求转发到 添加页面3.在表单页面上修改action : /store/addProductServlet提交方式: method"post"添加enctype属性: e…

【VUE项目实战】56、商品添加功能(六)-提交添加的商品

接上篇《55、商品添加功能&#xff08;五&#xff09;-商品内容模块》 上一篇我们完成了商品内容编辑模块的开发&#xff0c;也即是完成了商品所有的信息编辑&#xff0c;本篇我们就来开发提交商品所有信息到后台的功能。 一、要实现的效果 我们要实现点击“添加商品”的按钮…