日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

Vue3問題:如何實現密碼加密登錄?前后端!

來源: 責編: 時間:2024-01-03 11:37:18 245觀看
導讀序言大家好,我是大澈!本文約3400+字,整篇閱讀大約需要6分鐘。本文主要內容分三部分,第一部分是需求分析,第二部分是實現步驟,第三部分是問題詳解。如果您只需要解決問題,請閱讀第一、二部分即可。如果您有更多時間,進一步學習

uBH28資訊網——每日最新資訊28at.com

序言

大家好,我是大澈!uBH28資訊網——每日最新資訊28at.com

本文約3400+字,整篇閱讀大約需要6分鐘。uBH28資訊網——每日最新資訊28at.com

本文主要內容分三部分,第一部分是需求分析,第二部分是實現步驟,第三部分是問題詳解。uBH28資訊網——每日最新資訊28at.com

如果您只需要解決問題,請閱讀第一、二部分即可。uBH28資訊網——每日最新資訊28at.com

如果您有更多時間,進一步學習問題相關知識點,請閱讀至第三部分。uBH28資訊網——每日最新資訊28at.com

1、需求分析

在前端,用戶點擊登錄和注冊時,在登錄和注冊接口中不允許看到請求中真正的用戶密碼。uBH28資訊網——每日最新資訊28at.com

在后端,用戶點擊登錄和注冊時,在數據庫中不允許存取真正的用戶密碼。uBH28資訊網——每日最新資訊28at.com

uBH28資訊網——每日最新資訊28at.com

uBH28資訊網——每日最新資訊28at.com

2、實現步驟

(1)實現前的說明

在學習如何使用之前,我們要明白的是,在項目中如果進行密碼加密,有哪幾種情況。然后就是,實現密碼加密的方式有哪些,哪一種是相較來說,較好用及安全性較高的。uBH28資訊網——每日最新資訊28at.com

密碼加密實現情況:uBH28資訊網——每日最新資訊28at.com

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

已上這三種情況,在實際的開發中,使用較多的,當然是第一種情況,這種情況可以提供更高的安全性和密碼保護。uBH28資訊網——每日最新資訊28at.com

前端將用戶密碼進行加密后再傳輸給后端,可以減少密碼在網絡傳輸過程中的風險,確保密碼的機密性。uBH28資訊網——每日最新資訊28at.com

后端再對接收到的密碼進行加密,將加密后的密碼存儲到數據庫中。這樣即使數據庫遭到非法訪問,密碼也不會以明文形式暴露,增加了密碼的安全性。uBH28資訊網——每日最新資訊28at.com

這一點說明到這里打住,不再贅述。uBH28資訊網——每日最新資訊28at.com

然后就是實現密碼加密的常用方式:uBH28資訊網——每日最新資訊28at.com

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

對稱加密算法使用相同密鑰進行加密和解密,非對稱加密算法使用公鑰和私鑰,哈希函數將數據轉換為固定長度的哈希值,密碼推導函數通過迭代和加鹽增加密碼破解難度。uBH28資訊網——每日最新資訊28at.com

上述加密方式,從上往下,安全性依次增高。uBH28資訊網——每日最新資訊28at.com

這一點在這里只做簡要說明,有需要的朋友,請見第三部分對加密方式的詳細總結。uBH28資訊網——每日最新資訊28at.com

搞清楚這些,然后下面,就是如何使用的問題了。uBH28資訊網——每日最新資訊28at.com

為提高大家的使用效率,這里大澈只提供較常用的情況(第一種),以及較安全的密碼加密方式(BCrypt)的使用。uBH28資訊網——每日最新資訊28at.com

其它加密方式的使用,與此大同小異。uBH28資訊網——每日最新資訊28at.com

(2)編寫前端代碼

模板代碼:uBH28資訊網——每日最新資訊28at.com

<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

引入依賴:uBH28資訊網——每日最新資訊28at.com

npm i bcryptjs

uBH28資訊網——每日最新資訊28at.com

邏輯代碼:uBH28資訊網——每日最新資訊28at.com

<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>

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

這里做一下說明:uBH28資訊網——每日最新資訊28at.com

  • 為方便舉例,cost鹽值這里使用了固定值,但在項目中一般都會使用隨機字符串作為鹽值。前端生成鹽值,在登錄和注冊時會和加密的密碼一同傳遞給后端,后端接收后,會使用對應鹽值對密碼做二次加密,以及將鹽值存到數據庫中。
  • 為方面舉例,后端接口的編寫全部都寫在了Controller層,還有一些其他必要的鑒權驗證也都省略了。
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");}}}

3、問題詳解

(1)關于加密方式的詳細總結

uBH28資訊網——每日最新資訊28at.com

AES:uBH28資訊網——每日最新資訊28at.com

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

RSA:uBH28資訊網——每日最新資訊28at.com

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

MD5:uBH28資訊網——每日最新資訊28at.com

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

SHA:uBH28資訊網——每日最新資訊28at.com

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

BCrypt:uBH28資訊網——每日最新資訊28at.com

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

PBKDF2:uBH28資訊網——每日最新資訊28at.com

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

SCrypt:uBH28資訊網——每日最新資訊28at.com

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

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

很枯燥的一段學術語言,大家隨便看看即可,哈哈哈。uBH28資訊網——每日最新資訊28at.com

這里也是為什么使用MD5加密時,常常會進行加鹽處理的原因了。uBH28資訊網——每日最新資訊28at.com

在密碼學中,不可逆(irreversible)表示無法從哈希值還原出原始數據。uBH28資訊網——每日最新資訊28at.com

當數據經過哈希函數處理后,生成的哈希值是固定長度的一串字符。不可逆意味著無法通過逆向計算或解密操作來獲取原始數據。即使輸入數據的細微改變也會導致生成完全不同的哈希值。uBH28資訊網——每日最新資訊28at.com

這種不可逆性是哈希函數的重要特性之一,用于保證數據的完整性和驗證數據的一致性。通過對原始數據進行哈希處理,并將哈希值與預期的哈希值進行比對,可以快速檢查數據是否被篡改或損壞。如果哈希值相同,則可以確定數據完整性沒有受到破壞;如果哈希值不同,則說明數據已被修改,或者數據傳輸過程中出現了錯誤。uBH28資訊網——每日最新資訊28at.com

需要注意的是,雖然哈希函數是不可逆的,但是存在哈希碰撞的概率,即不同的輸入數據可能會產生相同的哈希值。然而,好的哈希函數應該具有極低的碰撞概率,以確保數據完整性和安全性。uBH28資訊網——每日最新資訊28at.com

(3)Base64是加密方式嗎

Base64編碼只是一種編碼傳輸方式,不是加密算法。uBH28資訊網——每日最新資訊28at.com

它將二進制數據轉換為可打印的ASCII字符,常用于在文本協議中傳輸或存儲二進制數據,例如在電子郵件中傳輸附件、在網頁中嵌入圖像等。uBH28資訊網——每日最新資訊28at.com

我們常常會將Base64誤解為它是一種加密方式,其實不然,Base64和我們常用的JWT一樣,都是一種數據編碼傳輸方式,只不過Base64常用于在文本環境中傳輸圖片、文件。uBH28資訊網——每日最新資訊28at.com

以下是常用應用場景的詳細說明:uBH28資訊網——每日最新資訊28at.com

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

雖然Base64有以上作用,但它會導致數據膨脹,增加數據的大小。uBH28資訊網——每日最新資訊28at.com

在傳輸大量二進制數據或對傳輸效率有較高要求的情況下,如傳輸大視頻、大圖片、大文件等,不易使用。uBH28資訊網——每日最新資訊28at.com

如果需要在文本環境中傳輸大文件,可以考慮使用其他更合適的技術,例如使用壓縮算法對文件進行壓縮,或者使用分布式文件系統或云存儲服務,如Minio、OSS,來處理大文件的傳輸和存儲。uBH28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-56603-0.htmlVue3問題:如何實現密碼加密登錄?前后端!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 反向 Debug 了解一下?揭秘 Java DEBUG 的基本原理

下一篇: 通過API網關緩解OWASP十大安全威脅

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 洞口县| 资源县| 尤溪县| 兴山县| 正镶白旗| 临朐县| 鹿邑县| 曲松县| 扶风县| 阳西县| 木里| 台南县| 昂仁县| 电白县| 四平市| 环江| 汤阴县| 永济市| 炎陵县| 伊金霍洛旗| 万盛区| 车致| 麻城市| 安阳县| 无棣县| 静海县| 上饶市| 平顶山市| 肥乡县| 玛曲县| 江源县| 镇平县| 白沙| 赤水市| 黎平县| 正阳县| 桃园县| 称多县| 鄂尔多斯市| 木兰县| 车险|