当前位置: 首页 > news >正文

Vue3问题:如何实现密码加密登录?前后端!

前端功能问题系列文章,点击上方合集↑

序言

大家好,我是大澈!

本文约3400+字,整篇阅读大约需要6分钟。

本文主要内容分三部分,第一部分是需求分析,第二部分是实现步骤,第三部分是问题详解。

如果您只需要解决问题,请阅读第一、二部分即可。

如果您有更多时间,进一步学习问题相关知识点,请阅读至第三部分。

1. 需求分析

在前端,用户点击登录和注册时,在登录和注册接口中不允许看到请求中真正的用户密码。

在后端,用户点击登录和注册时,在数据库中不允许存取真正的用户密码。

图片

图片

2. 实现步骤

2.1 实现前的说明

在学习如何使用之前,我们要明白的是,在项目中如果进行密码加密,有哪几种情况。然后就是,实现密码加密的方式有哪些,哪一种是相较来说,较好用及安全性较高的。

密码加密实现情况

  • 前端进行密码加密,后端也进行密码加密

  • 前端进行密码加密,后端不进行密码加密

  • 前端不进行密码加密,后端进行密码加密 

已上这三种情况,在实际的开发中,使用较多的,当然是第一种情况,这种情况可以提供更高的安全性和密码保护。

前端将用户密码进行加密后再传输给后端,可以减少密码在网络传输过程中的风险,确保密码的机密性。

后端再对接收到的密码进行加密,将加密后的密码存储到数据库中。这样即使数据库遭到非法访问,密码也不会以明文形式暴露,增加了密码的安全性。

这一点说明到这里打住,不再赘述。

然后就是实现密码加密的常用方式

  • 对称加密算法:AES、DES、3DES

  • 非对称加密算法:RSA

  • 哈希函数:MD5、SHA-1、SHA-256、SHA-512

  • 密码推导函数:BCrypt、PBKDF2、SCrypt

对称加密算法使用相同密钥进行加密和解密,非对称加密算法使用公钥和私钥,哈希函数将数据转换为固定长度的哈希值,密码推导函数通过迭代和加盐增加密码破解难度。

上述加密方式,从上往下,安全性依次增高

这一点在这里只做简要说明,有需要的朋友,请见第三部分对加密方式的详细总结。

搞清楚这些,然后下面,就是如何使用的问题了。

为提高大家的使用效率,这里大澈只提供较常用的情况(第一种),以及较安全的密码加密方式(BCrypt)的使用。

其它加密方式的使用,与此大同小异。

2.2 编写前端代码

模板代码:

<template><div><input type="text" v-model="username" placeholder="Username" /><input type="password" v-model="password" placeholder="Password" /><button @click="register">Register</button><button @click="login">Login</button></div>
</template

引入依赖:

npm i bcryptjs

图片

逻辑代码:

<script setup>// 使用 bcrypt.js 进行密码加密import bcrypt from 'bcryptjs'; const password = ref('')// 设置与后端相同的 cost 盐值const cost = 10; const register = async () => {// 前端加密密码const hashedPassword = await bcrypt.hash(password.value, cost); // 将用户名和加密后的密码发送到后端进行注册// ...},const login = async () => {// 前端加密密码const hashedPassword = await bcrypt.hash(password.value, cost); // 将用户名和加密后的密码发送到后端进行登录验证// ...}
</script>

2.3 编写后端接口(了解即可)

这里做一下说明:

  • 为方便举例,cost盐值这里使用了固定值,但在项目中一般都会使用随机字符串作为盐值。前端生成盐值,在登录和注册时会和加密的密码一同传递给后端,后端接收后,会使用对应盐值对密码做二次加密,以及将盐值存到数据库中。

  • 为方面举例,后端接口的编写全部都写在了Controller层,还有一些其他必要的鉴权验证也都省略了。

import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;@RestController
public class UserController {// 设置与前端相同的 cost 盐值private static final int COST = 10; @Autowiredprivate PasswordEncoder passwordEncoder;// 注册接口@PostMapping("/register")public ResponseEntity<?> registerUser(@RequestBody UserRequest userRequest) {String username = userRequest.getUsername();String password = userRequest.getPassword(); // 前端已经进行了密码加密// 后端对密码进行加密String encryptedPassword = passwordEncoder.encode(password);// 存储用户信息及加密后的密码、对应盐值到数据库// ...return ResponseEntity.ok("User registered successfully!");}// 登录接口@PostMapping("/login")public ResponseEntity<?> loginUser(@RequestBody UserRequest userRequest) {String username = userRequest.getUsername();String password = userRequest.getPassword(); // 前端已经进行了密码加密// 从数据库中根据用户名查询用户信息User user = userRepository.findByUsername(username);if (user == null) {return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid username or password");}// 后端验证密码boolean isMatched = passwordEncoder.matches(password, user.getPassword());// 认证成功,生成 JWT Token 等操作// ...if (isMatched) {return ResponseEntity.ok("Login successful!");} else {return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid username or password");}}
}

3. 问题详解

3.1 关于加密方式的详细总结

图片

AES

  • AES是一种对称加密算法,用于保护敏感数据的机密性。

  • 它使用相同的密钥进行加密和解密,密钥长度可以是128位、192位或256位。

  • AES是一种高度安全和高效的加密算法,广泛应用于数据保护和传输领域。

RSA

  • RSA是一种非对称加密算法,用于加密通信、数字签名等安全功能。

  • RSA使用一对密钥,包括公钥和私钥。

  • 公钥用于加密数据,私钥用于解密数据或生成数字签名。

  • RSA算法基于大数的因数分解问题,被认为是一种安全可靠的加密算法。

MD5

  • MD5是一种哈希函数,将输入数据转换为固定长度的128位哈希值。

  • MD5是不可逆的,即无法从哈希值还原出原始数据。

  • MD5常用于校验数据完整性,但由于存在碰撞攻击漏洞,不适合用于密码加密。

SHA

  • SHA是一系列哈希函数,包括SHA-1、SHA-256、SHA-512等。

  • SHA将输入数据转换为固定长度的哈希值,用于校验数据完整性和密码存储等领域。

  • SHA-1已经不再被推荐使用,而SHA-256和SHA-512仍然被广泛应用。

BCrypt

  • BCrypt是一种密码推导函数,用于存储密码并提供较高的安全性。

  • 它通过迭代和加盐的方式增加密码破解的难度。

  • BCrypt使用的盐值是随机生成的,并且每个密码都使用独特的盐值进行加密。

PBKDF2

  • PBKDF2是一种密码推导函数,通过迭代和加盐从密码中派生出密钥。

  • 它提供更高的密码破解难度,适用于密码存储和验证场景。

  • PBKDF2的迭代次数和盐值都可以调整,以增加计算成本和提高安全性。

SCrypt

  • SCrypt是一种密码推导函数,专门设计来抵御特定硬件攻击。

  • 它通过调整参数和内存需求增加计算成本,提高密码破解的难度。

  • SCrypt在密码存储和验证方面提供更高的安全性,但相对于其他函数可能需要更多的计算资源。

    秃头时刻!!!

3.2 密码学中的不可逆是啥

很枯燥的一段学术语言,大家随便看看即可,哈哈哈。

这里也是为什么使用MD5加密时,常常会进行加盐处理的原因了。

图片

在密码学中,不可逆(irreversible)表示无法从哈希值还原出原始数据。

当数据经过哈希函数处理后,生成的哈希值是固定长度的一串字符。不可逆意味着无法通过逆向计算或解密操作来获取原始数据。即使输入数据的细微改变也会导致生成完全不同的哈希值。

这种不可逆性是哈希函数的重要特性之一,用于保证数据的完整性和验证数据的一致性。通过对原始数据进行哈希处理,并将哈希值与预期的哈希值进行比对,可以快速检查数据是否被篡改或损坏。如果哈希值相同,则可以确定数据完整性没有受到破坏;如果哈希值不同,则说明数据已被修改,或者数据传输过程中出现了错误。

需要注意的是,虽然哈希函数是不可逆的,但是存在哈希碰撞的概率,即不同的输入数据可能会产生相同的哈希值。然而,好的哈希函数应该具有极低的碰撞概率,以确保数据完整性和安全性。

秃头时刻!!!

3.3 Base64是加密方式吗

Base64编码只是一种编码传输方式,不是加密算法。

它将二进制数据转换为可打印的ASCII字符,常用于在文本协议中传输或存储二进制数据,例如在电子邮件中传输附件、在网页中嵌入图像等。

我们常常会将Base64误解为它是一种加密方式,其实不然,Base64和我们常用的JWT一样,都是一种数据编码传输方式,只不过Base64常用于在文本环境中传输图片、文件。

以下是常用应用场景的详细说明:

  • 在文本环境传输二进制数据:由于某些文本协议或传输机制只支持文本数据,无法直接传输二进制数据。在这种情况下,可以使用Base64编码将二进制数据转换为文本格式,以便在文本环境中传输,例如在电子邮件中嵌入图片或在XML、JSON等格式中传递二进制数据。

  • 数据存储:某些存储系统或数据库可能只接受文本数据,无法直接存储二进制数据。为了在这些系统中存储二进制数据,可以使用Base64编码将其转换为文本格式,然后存储为文本字段。

  • URL传递:某些特定的URL传递场景中,特殊字符如"+"、"/"等会被转义或造成问题。为了避免这些问题,可以使用Base64编码将数据转换为URL安全的字符集,以便在URL中传递。

虽然Base64有以上作用,但它会导致数据膨胀,增加数据的大小。

在传输大量二进制数据或对传输效率有较高要求的情况下,如传输大视频、大图片、大文件等,不易使用。

如果需要在文本环境中传输大文件,可以考虑使用其他更合适的技术,例如使用压缩算法对文件进行压缩,或者使用分布式文件系统或云存储服务,如Minio、OSS,来处理大文件的传输和存储。

秃头时刻!!!

图片

结语

建立这个平台的初衷:

  • 打造一个仅包含前端问题的问答平台,让大家高效搜索处理同样问题。

  • 通过不断积累问题,一起练习逻辑思维,并顺便学习相关的知识点。

  • 遇到难题,遇到有共鸣的问题,一起讨论,一起沉淀,一起成长。

感谢关注微信公众号:“程序员大澈”,然后加入问答群,让我们一起解决实现所有BUG!

相关文章:

Vue3问题:如何实现密码加密登录?前后端!

前端功能问题系列文章&#xff0c;点击上方合集↑ 序言 大家好&#xff0c;我是大澈&#xff01; 本文约3400字&#xff0c;整篇阅读大约需要6分钟。 本文主要内容分三部分&#xff0c;第一部分是需求分析&#xff0c;第二部分是实现步骤&#xff0c;第三部分是问题详解。 …...

【爬虫】python打包可执行程序(ui界面制作完成后)

1.安装pyinstaller pip install pyinstaller可能出现连接超时安装不上的情况,可以切换源进行下载 pip install -i http://pypi.douban.com/simple/ pyinstaller2.打包程序 pyinstaller xxxxx.py --noconsole --hidden-import PySide6.QtXml...

取Dataset子集(pytorch)

取Dataset子集--pytorch 1. why2. how3. example 1. why 我们在调试深度学习代码时&#xff0c;常常会遇到数据集太大&#xff0c;导致调试浪费时间的情况&#xff0c;这种情况下&#xff0c;将数据集中的一个子集拿出来用于调试代码&#xff0c;调试成功在用完整的数据集运行…...

如何选择消息队列

作为一个程序员&#xff0c;我们必须要认识到&#xff0c;软件工程中是不存在”银弹“的。<!--more--> 在消息队列的选型问题上&#xff0c;也是同样的道理。并不存在哪个消息队列就是最好的&#xff0c;能够解决所有的问题。常用的消息队列有好几个&#xff0c;每一种都…...

读取mysql数据库表结构生成接口文档

1、引入依赖 <!-- 导出word --><dependency><groupId>org.freemarker</groupId><artifactId>freemarker</artifactId><version>2.3.30</version></dependency><!-- https://mvnrepository.com/artifact/e-iceblue/s…...

【MySQL索引与优化篇】InnoDB数据存储结构

文章目录 1. 数据库的存储结构:页1.1 磁盘与内存交互基本单位:页1.2 页结构概述1.3 页的上层结构 2. 页的内部结构3. InnoDB行格式(或记录格式)3.1 Compact行格式3.2 Dynamic和Compressed行格式3.3 Redundant行格式 4. 区、段与碎片区4.1 为什么要有区&#xff1f;4.2 为什么要…...

Go学习第十二章——Go反射与TCP编程

Go反射与TCP编程 1 反射1.1 基本介绍1.2 快速入门1.3 注意事项和细节说明1.4 最佳实践 2 Tcp Socket编程2.1 基本介绍2.2 入门案例2.3 服务器监听2.4 服务器接受客户端消息 1 反射 1.1 基本介绍 **反射&#xff1a;**在编译时静态类型语言中实现动态特性的一种机制。 Go语言…...

uniapp编译微信小程序富文本rich-text的图片样式不生效原因

this.detail.contents this.detail.contents.replace(/\<img/gi, <img style"display:block;max-width:90%;height:auto;border:2px solid #eee;box-shadow:5px 5px 5px rgba(100,100,100,0.8);margin-bottom:10px;text-align:center;" );开始采用这个replace…...

Django实战项目-学习任务系统-任务管理

接着上期代码框架&#xff0c;开发第3个功能&#xff0c;任务管理&#xff0c;再增加一个学习任务表&#xff0c;用来记录发布的学习任务的标题和内容&#xff0c;预计完成天数&#xff0c;奖励积分和任务状态等信息。 第一步&#xff1a;编写第三个功能-任务管理 1&#xff0…...

ubuntu18.04设置开机自动启动脚本(以自动启动odoo命令行为例讲解)

简介 ubuntu作为服务器使用时&#xff0c;常常需要在机器重启时能自动启动我们开发的服务。 Ubuntu 16.10开始不再使用initd管理系统&#xff0c;改用systemd&#xff0c;包括用systemctl命令来替换了service和chkconfig的功能。 systemd 默认读取 /etc/systemd/system 下的配…...

golang工程——grpc-gateway 转发http header中自定义字段到grpc上下文元数据

http header 转发到 grpc上下文 grpc网关可以将请求体内容转发到grpc对应消息中。那如何获取http header头中的信息&#xff0c;本文将介绍如何将http header转发到grpc上下文并采用拦截器&#xff0c;获取http header中的内容。 有些http header中的内置字段是会转发的比如Au…...

CPU眼里的C/C++: 1.3 汇编级单步调试函数执行过程

1. 目的 2. 基于 GDB 的汇编级单步调试 原始代码 #include <stdio.h>long test() {long a 1;a 2;return a; }int main() {int ret test();printf("test return %d\n", ret);return 0; }关键 gdb 命令 si 指令执行汇编级的单步调试info registers 读取寄…...

数据结构时间复杂度(补充)和空间复杂度

Hello&#xff0c;今天事10月27日&#xff0c;距离刚开始写博客已经过去挺久了&#xff0c;我也不知道是什么让我坚持这么久&#xff0c;但是学校的课真的很多&#xff0c;很少有时间多出来再学习&#xff0c;有些科目马上要考试了&#xff0c;我还不知道我呢不能过哈哈哈&…...

Mac-postman存储文件目录

今天postman弹窗要求登录账号才可访问之前的API文档数据。 但是这postman的账号又是前同事的账号&#xff0c;我没有他的账号和密码啊。 登录了我自己的postman账号后&#xff0c;所有的api文档都不见了....我服了。 首先去屏幕左上角---> 前往 --->个人 然后键盘按显…...

JAVA面试题简单整理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、重载和重写的区别一、&和&&的区别一、get和post请求的区别 delete、put一、cookie和session的区别一、Autowired和Resource区别一、”和equals…...

dd命令用法学习,是一个功能强大的工具

dd 命令是一个功能强大的工具&#xff0c;它有许多参数可以用来控制其行为。以下是 dd 命令中常用的一些参数&#xff1a; - ifinputfile&#xff1a;指定输入文件的路径。 - ofoutputfile&#xff1a;指定输出文件的路径。 - bssize&#xff1a;设置每个块的大小。可以使用不同…...

Games104现代游戏引擎笔记 网络游戏进阶架构

Character Movement Replication 角色位移同步 玩家2的视角看玩家1的移动是起伏一截一截&#xff0c;并且滞后的 interpolation&#xff1a;内插值&#xff0c;在两个旧的但已知的状态计算 extrapolation&#xff1a;外插值&#xff0c;本质是预测 内插值&#xff1a;但网络随着…...

Apollo 快速上手指南:打造自动驾驶解决方案

快速上手 概述云端体验登录云端仿真环境 打开DreamView播放离线数据包PNC Monitor 内置的数据监视器cyber_monitor 实时通道信息视图福利活动 主页传送门&#xff1a;&#x1f4c0; 传送 概述 Apollo 开放平台是一个开放的、完整的、安全的平台&#xff0c;将帮助汽车行业及自…...

C现代方法(第14章)笔记——预处理器

文章目录 第14章 预处理器14.1 预处理器的工作原理14.2 预处理指令14.3 宏定义14.3.1 简单的宏14.3.2 带参数的宏14.3.3 #运算符14.3.4 ##运算符14.3.5 宏的通用属性14.3.6 宏定义中的圆括号14.3.7 创建较长的宏14.3.8 预定义宏14.3.9 C99中新增的预定义宏14.3.10 空的宏参数(C…...

Kafka KRaft模式探索

1.概述 Kafka是一种高吞吐量的分布式发布订阅消息系统&#xff0c;它可以处理消费者在网站中的所有动作流数据。其核心组件包含Producer、Broker、Consumer&#xff0c;以及依赖的Zookeeper集群。其中Zookeeper集群是Kafka用来负责集群元数据的管理、控制器的选举等。 2.内容…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

【阅读笔记】MemOS: 大语言模型内存增强生成操作系统

核心速览 研究背景 ​​研究问题​​&#xff1a;这篇文章要解决的问题是当前大型语言模型&#xff08;LLMs&#xff09;在处理内存方面的局限性。LLMs虽然在语言感知和生成方面表现出色&#xff0c;但缺乏统一的、结构化的内存架构。现有的方法如检索增强生成&#xff08;RA…...

基于Uniapp的HarmonyOS 5.0体育应用开发攻略

一、技术架构设计 1.混合开发框架选型 &#xff08;1&#xff09;使用Uniapp 3.8版本支持ArkTS编译 &#xff08;2&#xff09;通过uni-harmony插件调用原生能力 &#xff08;3&#xff09;分层架构设计&#xff1a; graph TDA[UI层] -->|Vue语法| B(Uniapp框架)B --&g…...

以太网PHY布局布线指南

1. 简介 对于以太网布局布线遵循以下准则很重要&#xff0c;因为这将有助于减少信号发射&#xff0c;最大程度地减少噪声&#xff0c;确保器件作用&#xff0c;最大程度地减少泄漏并提高信号质量。 2. PHY设计准则 2.1 DRC错误检查 首先检查DRC规则是否设置正确&#xff0c;然…...