大家好,我是大澈!
本文約3400+字,整篇閱讀大約需要6分鐘。
本文主要內容分三部分,第一部分是需求分析,第二部分是實現步驟,第三部分是問題詳解。
如果您只需要解決問題,請閱讀第一、二部分即可。
如果您有更多時間,進一步學習問題相關知識點,請閱讀至第三部分。
在前端,用戶點擊登錄和注冊時,在登錄和注冊接口中不允許看到請求中真正的用戶密碼。
在后端,用戶點擊登錄和注冊時,在數據庫中不允許存取真正的用戶密碼。
在學習如何使用之前,我們要明白的是,在項目中如果進行密碼加密,有哪幾種情況。然后就是,實現密碼加密的方式有哪些,哪一種是相較來說,較好用及安全性較高的。
密碼加密實現情況:
已上這三種情況,在實際的開發中,使用較多的,當然是第一種情況,這種情況可以提供更高的安全性和密碼保護。
前端將用戶密碼進行加密后再傳輸給后端,可以減少密碼在網絡傳輸過程中的風險,確保密碼的機密性。
后端再對接收到的密碼進行加密,將加密后的密碼存儲到數據庫中。這樣即使數據庫遭到非法訪問,密碼也不會以明文形式暴露,增加了密碼的安全性。
這一點說明到這里打住,不再贅述。
然后就是實現密碼加密的常用方式:
對稱加密算法使用相同密鑰進行加密和解密,非對稱加密算法使用公鑰和私鑰,哈希函數將數據轉換為固定長度的哈希值,密碼推導函數通過迭代和加鹽增加密碼破解難度。
上述加密方式,從上往下,安全性依次增高。
這一點在這里只做簡要說明,有需要的朋友,請見第三部分對加密方式的詳細總結。
搞清楚這些,然后下面,就是如何使用的問題了。
為提高大家的使用效率,這里大澈只提供較常用的情況(第一種),以及較安全的密碼加密方式(BCrypt)的使用。
其它加密方式的使用,與此大同小異。
模板代碼:
<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>
這里做一下說明:
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;@RestControllerpublic 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");}}}
AES:
RSA:
MD5:
SHA:
BCrypt:
PBKDF2:
SCrypt:
很枯燥的一段學術語言,大家隨便看看即可,哈哈哈。
這里也是為什么使用MD5加密時,常常會進行加鹽處理的原因了。
在密碼學中,不可逆(irreversible)表示無法從哈希值還原出原始數據。
當數據經過哈希函數處理后,生成的哈希值是固定長度的一串字符。不可逆意味著無法通過逆向計算或解密操作來獲取原始數據。即使輸入數據的細微改變也會導致生成完全不同的哈希值。
這種不可逆性是哈希函數的重要特性之一,用于保證數據的完整性和驗證數據的一致性。通過對原始數據進行哈希處理,并將哈希值與預期的哈希值進行比對,可以快速檢查數據是否被篡改或損壞。如果哈希值相同,則可以確定數據完整性沒有受到破壞;如果哈希值不同,則說明數據已被修改,或者數據傳輸過程中出現了錯誤。
需要注意的是,雖然哈希函數是不可逆的,但是存在哈希碰撞的概率,即不同的輸入數據可能會產生相同的哈希值。然而,好的哈希函數應該具有極低的碰撞概率,以確保數據完整性和安全性。
Base64編碼只是一種編碼傳輸方式,不是加密算法。
它將二進制數據轉換為可打印的ASCII字符,常用于在文本協議中傳輸或存儲二進制數據,例如在電子郵件中傳輸附件、在網頁中嵌入圖像等。
我們常常會將Base64誤解為它是一種加密方式,其實不然,Base64和我們常用的JWT一樣,都是一種數據編碼傳輸方式,只不過Base64常用于在文本環境中傳輸圖片、文件。
以下是常用應用場景的詳細說明:
雖然Base64有以上作用,但它會導致數據膨脹,增加數據的大小。
在傳輸大量二進制數據或對傳輸效率有較高要求的情況下,如傳輸大視頻、大圖片、大文件等,不易使用。
如果需要在文本環境中傳輸大文件,可以考慮使用其他更合適的技術,例如使用壓縮算法對文件進行壓縮,或者使用分布式文件系統或云存儲服務,如Minio、OSS,來處理大文件的傳輸和存儲。
本文鏈接:http://www.www897cc.com/showinfo-26-56603-0.htmlVue3問題:如何實現密碼加密登錄?前后端!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 反向 Debug 了解一下?揭秘 Java DEBUG 的基本原理
下一篇: 通過API網關緩解OWASP十大安全威脅