快捷導(dǎo)航

Vue3實(shí)現(xiàn)密碼加密登錄的示例代碼

更新時(shí)間：2024年02月03日 09:20:41 作者：程序員大澈

現(xiàn)在,很多登陸表單都會(huì)使用密碼加密,為登錄安全,登錄表單輸入密碼,會(huì)加密后傳入后臺(tái),本文就來介紹一下Vue3實(shí)現(xiàn)密碼加密登錄的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下

序言

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

如果您只需要解決問題，請(qǐng)閱讀第一、二部分即可。

1. 需求分析

在前端，用戶點(diǎn)擊登錄和注冊(cè)時(shí)，在登錄和注冊(cè)接口中不允許看到請(qǐng)求中真正的用戶密碼。

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

2. 實(shí)現(xiàn)步驟

2.1 實(shí)現(xiàn)前的說明

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

密碼加密實(shí)現(xiàn)情況：

前端進(jìn)行密碼加密，后端也進(jìn)行密碼加密
前端進(jìn)行密碼加密，后端不進(jìn)行密碼加密
前端不進(jìn)行密碼加密，后端進(jìn)行密碼加密

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

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

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

這一點(diǎn)說明到這里打住，不再贅述。

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

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

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

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

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

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

為提高大家的使用效率，這里大澈只提供較常用的情況(第一種)，以及較安全的密碼加密方式(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 進(jìn)行密碼加密
  import bcrypt from 'bcryptjs'; 

  const password = ref('')
  // 設(shè)置與后端相同的 cost 鹽值
  const cost = 10; 

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

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

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

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

2.3 編寫后端接口（了解即可）

這里做一下說明：

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

import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

@RestController
public class UserController {

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

    @Autowired
    private PasswordEncoder passwordEncoder;

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

        // 后端對(duì)密碼進(jìn)行加密
        String encryptedPassword = passwordEncoder.encode(password);
        // 存儲(chǔ)用戶信息及加密后的密碼、對(duì)應(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)進(jìn)行了密碼加密

        // 從數(shù)據(jù)庫中根據(jù)用戶名查詢用戶信息
        User user = userRepository.findByUsername(username);

        if (user == null) {
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid username or password");
        }

        // 后端驗(yàn)證密碼
        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. 問題詳解

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

AES：

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

RSA：

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

MD5：

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

SHA：

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

BCrypt：

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

PBKDF2：

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

SCrypt：

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

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

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

這里也是為什么使用MD5加密時(shí)，常常會(huì)進(jìn)行加鹽處理的原因了。

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

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

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

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

3.3 Base64是加密方式嗎

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

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

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

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

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

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

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

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