成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

Vue3問題:如何實現(xiàn)密碼加密登錄?前后端!

開發(fā) 前端
在學(xué)習(xí)如何使用之前,我們要明白的是,在項目中如果進行密碼加密,有哪幾種情況。然后就是,實現(xiàn)密碼加密的方式有哪些,哪一種是相較來說,較好用及安全性較高的。

序言

大家好,我是大澈!

本文約3400+字,整篇閱讀大約需要6分鐘。

本文主要內(nèi)容分三部分,第一部分是需求分析,第二部分是實現(xiàn)步驟,第三部分是問題詳解。

如果您只需要解決問題,請閱讀第一、二部分即可。

如果您有更多時間,進一步學(xué)習(xí)問題相關(guān)知識點,請閱讀至第三部分。

1、需求分析

在前端,用戶點擊登錄和注冊時,在登錄和注冊接口中不允許看到請求中真正的用戶密碼。

在后端,用戶點擊登錄和注冊時,在數(shù)據(jù)庫中不允許存取真正的用戶密碼。

2、實現(xiàn)步驟

(1)實現(xiàn)前的說明

在學(xué)習(xí)如何使用之前,我們要明白的是,在項目中如果進行密碼加密,有哪幾種情況。然后就是,實現(xiàn)密碼加密的方式有哪些,哪一種是相較來說,較好用及安全性較高的。

密碼加密實現(xiàn)情況:

  • 前端進行密碼加密,后端也進行密碼加密。
  • 前端進行密碼加密,后端不進行密碼加密。
  • 前端不進行密碼加密,后端進行密碼加密。

已上這三種情況,在實際的開發(fā)中,使用較多的,當(dāng)然是第一種情況,這種情況可以提供更高的安全性和密碼保護。

前端將用戶密碼進行加密后再傳輸給后端,可以減少密碼在網(wǎng)絡(luò)傳輸過程中的風(fēng)險,確保密碼的機密性。

后端再對接收到的密碼進行加密,將加密后的密碼存儲到數(shù)據(jù)庫中。這樣即使數(shù)據(jù)庫遭到非法訪問,密碼也不會以明文形式暴露,增加了密碼的安全性。

這一點說明到這里打住,不再贅述。

然后就是實現(xiàn)密碼加密的常用方式:

  • 對稱加密算法:AES、DES、3DES
  • 非對稱加密算法:RSA
  • 哈希函數(shù):MD5、SHA-1、SHA-256、SHA-512
  • 密碼推導(dǎo)函數(shù):BCrypt、PBKDF2、SCrypt

對稱加密算法使用相同密鑰進行加密和解密,非對稱加密算法使用公鑰和私鑰,哈希函數(shù)將數(shù)據(jù)轉(zhuǎn)換為固定長度的哈希值,密碼推導(dǎo)函數(shù)通過迭代和加鹽增加密碼破解難度。

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

這一點在這里只做簡要說明,有需要的朋友,請見第三部分對加密方式的詳細(xì)總結(jié)。

搞清楚這些,然后下面,就是如何使用的問題了。

為提高大家的使用效率,這里大澈只提供較常用的情況(第一種),以及較安全的密碼加密方式(BCrypt)的使用。

其它加密方式的使用,與此大同小異。

(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('')
// 設(shè)置與后端相同的 cost 鹽值
const cost = 10; 

const register = async () => {
// 前端加密密碼
const hashedPassword = await bcrypt.hash(password.value, cost); 

// 將用戶名和加密后的密碼發(fā)送到后端進行注冊
// ...
},

const login = async () => {
// 前端加密密碼
const hashedPassword = await bcrypt.hash(password.value, cost); 

// 將用戶名和加密后的密碼發(fā)送到后端進行登錄驗證
// ...
}
</script>

(3)編寫后端接口(了解即可)

這里做一下說明:

  • 為方便舉例,cost鹽值這里使用了固定值,但在項目中一般都會使用隨機字符串作為鹽值。前端生成鹽值,在登錄和注冊時會和加密的密碼一同傳遞給后端,后端接收后,會使用對應(yīng)鹽值對密碼做二次加密,以及將鹽值存到數(shù)據(jù)庫中。
  • 為方面舉例,后端接口的編寫全部都寫在了Controller層,還有一些其他必要的鑒權(quán)驗證也都省略了。
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

@RestController
public class UserController {

// 設(shè)置與前端相同的 cost 鹽值
private static final int COST = 10; 

@Autowired
private PasswordEncoder passwordEncoder;

// 注冊接口
@PostMapping("/register")
public ResponseEntity<?> registerUser(@RequestBody UserRequest userRequest) {
String username = userRequest.getUsername();
String password = userRequest.getPassword(); // 前端已經(jīng)進行了密碼加密

// 后端對密碼進行加密
String encryptedPassword = passwordEncoder.encode(password);
// 存儲用戶信息及加密后的密碼、對應(yīng)鹽值到數(shù)據(jù)庫
// ...

return ResponseEntity.ok("User registered successfully!");
}

// 登錄接口
@PostMapping("/login")
public ResponseEntity<?> loginUser(@RequestBody UserRequest userRequest) {
String username = userRequest.getUsername();
String password = userRequest.getPassword(); // 前端已經(jīng)進行了密碼加密

// 從數(shù)據(jù)庫中根據(jù)用戶名查詢用戶信息
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());

// 認(rèn)證成功,生成 JWT Token 等操作
// ...

if (isMatched) {
return ResponseEntity.ok("Login successful!");
} else {
return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid username or password");
}
}
}

3、問題詳解

(1)關(guān)于加密方式的詳細(xì)總結(jié)

AES:

  • AES是一種對稱加密算法,用于保護敏感數(shù)據(jù)的機密性。
  • 它使用相同的密鑰進行加密和解密,密鑰長度可以是128位、192位或256位。
  • AES是一種高度安全和高效的加密算法,廣泛應(yīng)用于數(shù)據(jù)保護和傳輸領(lǐng)域。

RSA:

  • RSA是一種非對稱加密算法,用于加密通信、數(shù)字簽名等安全功能。
  • RSA使用一對密鑰,包括公鑰和私鑰。
  • 公鑰用于加密數(shù)據(jù),私鑰用于解密數(shù)據(jù)或生成數(shù)字簽名。
  • RSA算法基于大數(shù)的因數(shù)分解問題,被認(rèn)為是一種安全可靠的加密算法。

MD5:

  • MD5是一種哈希函數(shù),將輸入數(shù)據(jù)轉(zhuǎn)換為固定長度的128位哈希值。
  • MD5是不可逆的,即無法從哈希值還原出原始數(shù)據(jù)。
  • MD5常用于校驗數(shù)據(jù)完整性,但由于存在碰撞攻擊漏洞,不適合用于密碼加密。

SHA:

  • SHA是一系列哈希函數(shù),包括SHA-1、SHA-256、SHA-512等。
  • SHA將輸入數(shù)據(jù)轉(zhuǎn)換為固定長度的哈希值,用于校驗數(shù)據(jù)完整性和密碼存儲等領(lǐng)域。
  • SHA-1已經(jīng)不再被推薦使用,而SHA-256和SHA-512仍然被廣泛應(yīng)用。

BCrypt:

  • BCrypt是一種密碼推導(dǎo)函數(shù),用于存儲密碼并提供較高的安全性。
  • 它通過迭代和加鹽的方式增加密碼破解的難度。
  • BCrypt使用的鹽值是隨機生成的,并且每個密碼都使用獨特的鹽值進行加密。

PBKDF2:

  • PBKDF2是一種密碼推導(dǎo)函數(shù),通過迭代和加鹽從密碼中派生出密鑰。
  • 它提供更高的密碼破解難度,適用于密碼存儲和驗證場景。
  • PBKDF2的迭代次數(shù)和鹽值都可以調(diào)整,以增加計算成本和提高安全性。

SCrypt:

  • SCrypt是一種密碼推導(dǎo)函數(shù),專門設(shè)計來抵御特定硬件攻擊。
  • 它通過調(diào)整參數(shù)和內(nèi)存需求增加計算成本,提高密碼破解的難度。
  • SCrypt在密碼存儲和驗證方面提供更高的安全性,但相對于其他函數(shù)可能需要更多的計算資源。

(2)密碼學(xué)中的不可逆是啥

很枯燥的一段學(xué)術(shù)語言,大家隨便看看即可,哈哈哈。

這里也是為什么使用MD5加密時,常常會進行加鹽處理的原因了。

在密碼學(xué)中,不可逆(irreversible)表示無法從哈希值還原出原始數(shù)據(jù)。

當(dāng)數(shù)據(jù)經(jīng)過哈希函數(shù)處理后,生成的哈希值是固定長度的一串字符。不可逆意味著無法通過逆向計算或解密操作來獲取原始數(shù)據(jù)。即使輸入數(shù)據(jù)的細(xì)微改變也會導(dǎo)致生成完全不同的哈希值。

這種不可逆性是哈希函數(shù)的重要特性之一,用于保證數(shù)據(jù)的完整性和驗證數(shù)據(jù)的一致性。通過對原始數(shù)據(jù)進行哈希處理,并將哈希值與預(yù)期的哈希值進行比對,可以快速檢查數(shù)據(jù)是否被篡改或損壞。如果哈希值相同,則可以確定數(shù)據(jù)完整性沒有受到破壞;如果哈希值不同,則說明數(shù)據(jù)已被修改,或者數(shù)據(jù)傳輸過程中出現(xiàn)了錯誤。

需要注意的是,雖然哈希函數(shù)是不可逆的,但是存在哈希碰撞的概率,即不同的輸入數(shù)據(jù)可能會產(chǎn)生相同的哈希值。然而,好的哈希函數(shù)應(yīng)該具有極低的碰撞概率,以確保數(shù)據(jù)完整性和安全性。

(3)Base64是加密方式嗎

Base64編碼只是一種編碼傳輸方式,不是加密算法。

它將二進制數(shù)據(jù)轉(zhuǎn)換為可打印的ASCII字符,常用于在文本協(xié)議中傳輸或存儲二進制數(shù)據(jù),例如在電子郵件中傳輸附件、在網(wǎng)頁中嵌入圖像等。

我們常常會將Base64誤解為它是一種加密方式,其實不然,Base64和我們常用的JWT一樣,都是一種數(shù)據(jù)編碼傳輸方式,只不過Base64常用于在文本環(huán)境中傳輸圖片、文件。

以下是常用應(yīng)用場景的詳細(xì)說明:

  • 在文本環(huán)境傳輸二進制數(shù)據(jù):由于某些文本協(xié)議或傳輸機制只支持文本數(shù)據(jù),無法直接傳輸二進制數(shù)據(jù)。在這種情況下,可以使用Base64編碼將二進制數(shù)據(jù)轉(zhuǎn)換為文本格式,以便在文本環(huán)境中傳輸,例如在電子郵件中嵌入圖片或在XML、JSON等格式中傳遞二進制數(shù)據(jù)。
  • 數(shù)據(jù)存儲:某些存儲系統(tǒng)或數(shù)據(jù)庫可能只接受文本數(shù)據(jù),無法直接存儲二進制數(shù)據(jù)。為了在這些系統(tǒng)中存儲二進制數(shù)據(jù),可以使用Base64編碼將其轉(zhuǎn)換為文本格式,然后存儲為文本字段。
  • URL傳遞:某些特定的URL傳遞場景中,特殊字符如"+"、"/"等會被轉(zhuǎn)義或造成問題。為了避免這些問題,可以使用Base64編碼將數(shù)據(jù)轉(zhuǎn)換為URL安全的字符集,以便在URL中傳遞。

雖然Base64有以上作用,但它會導(dǎo)致數(shù)據(jù)膨脹,增加數(shù)據(jù)的大小。

在傳輸大量二進制數(shù)據(jù)或?qū)鬏斝视休^高要求的情況下,如傳輸大視頻、大圖片、大文件等,不易使用。

如果需要在文本環(huán)境中傳輸大文件,可以考慮使用其他更合適的技術(shù),例如使用壓縮算法對文件進行壓縮,或者使用分布式文件系統(tǒng)或云存儲服務(wù),如Minio、OSS,來處理大文件的傳輸和存儲。

責(zé)任編輯:姜華 來源: 今日頭條
相關(guān)推薦

2024-02-27 08:27:18

元素拖拽Vue3拼圖驗證

2023-11-20 08:29:33

Vue微信掃碼授權(quán)登錄

2024-02-01 09:10:04

頁面引導(dǎo)工具Vue3

2024-01-23 09:15:33

Vue3組件拖拽組件內(nèi)容編輯

2021-12-02 05:50:35

Vue3 插件Vue應(yīng)用

2023-12-18 09:58:46

微信掃碼支付Vue3

2024-01-08 08:50:19

Vue3級聯(lián)菜單數(shù)據(jù)懶加載

2022-04-07 08:06:32

viteVue3項目

2023-11-28 09:03:59

Vue.jsJavaScript

2022-09-06 10:26:38

前后端分離Vue跨域

2022-03-10 11:04:04

Vue3Canvas前端

2024-03-19 08:35:30

Vue3添加水印維護版權(quán)標(biāo)識

2021-12-01 08:11:44

Vue3 插件Vue應(yīng)用

2021-11-30 08:19:43

Vue3 插件Vue應(yīng)用

2024-11-06 10:16:22

2022-07-20 11:13:05

前端JSONVue3

2024-08-13 09:26:07

2020-09-19 21:15:26

Composition

2022-06-26 00:00:02

Vue3響應(yīng)式系統(tǒng)

2023-06-19 07:31:52

壓縮包java.Http
點贊
收藏

51CTO技術(shù)棧公眾號

主站蜘蛛池模板: 国产一区二区三区久久久久久久久 | 国产欧美一区二区三区免费 | 亚洲国产精品成人久久久 | 午夜精品一区 | 男人亚洲天堂 | 欧美激情一区二区三级高清视频 | 亚洲欧美精品 | 欧美一级二级在线观看 | 手机av免费在线 | 91社影院在线观看 | 无码一区二区三区视频 | 久久免费精品视频 | 成人免费毛片片v | 日韩精品一区二区三区在线观看 | 国产一级免费视频 | 亚洲一区二区欧美 | 国产精品久久久久久久久久久久久久 | 97精品视频在线 | 亚洲一区 | 欧美日日日日bbbbb视频 | 精品国产91久久久久久 | 91爱啪啪 | 欧美性乱 | 日韩不卡一区二区三区 | 久久久91精品国产一区二区三区 | 无人区国产成人久久三区 | 国外成人在线视频 | 欧美久久视频 | 欧美日韩国产精品一区 | 国产高清精品在线 | 亚洲一区二区三区视频 | 欧美激情精品久久久久久变态 | 最新日韩在线 | 精品国产一区二区三区久久久久久 | 久久国产区 | 国产精品s色 | 国产电影精品久久 | 在线观看www高清视频 | 欧美一级片在线 | 国产精品高潮呻吟久久aⅴ码 | 日韩午夜在线观看 |