用户密码的加密解密操作（前端加密，后端解密）

用户密码的加密解密操作

• 作者是个小菜狗，行文过程基本都基于自己理解，没有深入查阅文献，如有错误，还请大神指出

背景：

公司做的是一个某某平台的系统，包括前台和后台，作者刚毕业，刚开始试用，带我的师傅让我实现密码的加密解密，说实话，都有封装好的api，直接调用什么的，真的没啥难度，后来被其他小事情耽搁了，回过头来，前辈已经做好了，就叫我好好看看，理解下，嗯嗯……其实我也能做好的。

1、流程

先说说加密的需要，http协议默认情况下是以明文进行传输的，即没有对网上传输的数据进行加密的，别人如果通过抓包工具抓取传输数据，是可以直接进行阅读的，这样关键信息，例如密码这种东西在传输时显得很危险，所以对密码进行加密很有必要。

没加密的请求数据

加密后的请求数据

由图可见，加密还是很必要的。

见过两种加密方案，一种是可逆的加密算法，另一种是不可逆的加密算法，像常见的DES是可逆的，即可以通过密钥进行加密和解密，MD5是不可逆的，只能通过再次加密才能判断明文是否相同。

因此，在对加密密码这件事情上，有两种流程

• 用户在前端输入密码，通过js代码对输入的密码进行不可逆加密，然后在后端将密文直接存进数据库。这样的话，就算别人拦截到你的数据包，看到的也只是加密后的密文。这也是为什么一些平台找回密码仅仅是输入新密码，因为他们也没办法获取旧密码
• 用户在前端输入密码，通过js代码对输入的密码进行可逆加密（需要前后端协调好秘钥），传到后端后，再对加密的密文进行解密，然后跟数据库的明文密码进行比较。这样，别人如果不知道秘钥的话，也基本上拦截不到密码。

2、实现

公司这边使用的是可逆的加密算法，也就是第二个方案，这种方案的好处，嘿嘿，大家都喜欢在不同的平台使用相同的密码，大家都懂的。

前端实现

公司在vue框架中使用的是crypto-js，但无论是什么框架，应该都差不多吧，面向百度编程，你需要的百度上基本都有。

• 引入依赖

vue中比较简单，直接使用 npm install crypto-js 进行安装

然后在使用的时候通过 import CryptoJS from ‘crypto-js’ 引入就可以

• 写js工具包

然后就可以写其的工具包了，例如公司里实现的js工具包，写工具包只是为了重用，还是建议经常写工具方法，这样直接把文件一复制就能直接调用。

创建一个js文件，键入：

import CryptoJS from 'crypto-js';
 
export default {
    //随机生成指定数量的16进制key
    generatekey(num) {
        let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let key = "";
        for (var i = 0; i < num; i++) {
            let randomPoz = Math.floor(Math.random() * library.length);
            key += library.substring(randomPoz, randomPoz + 1);
        }
        return key;
    },
    
    //加密
    encrypt(word, keyStr) {
        keyStr = keyStr ? keyStr : 'XXXXXXXXXXXXX'; //判断是否存在ksy，不存在就用定义好的key
        var key = CryptoJS.enc.Utf8.parse(keyStr);
        var srcs = CryptoJS.enc.Utf8.parse(word);
        var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
        return encrypted.toString();
    },
    //解密
    decrypt(word, keyStr) {
        keyStr = keyStr ? keyStr : 'XXXXXXXXXXXXX';
        var key = CryptoJS.enc.Utf8.parse(keyStr);
        var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
        return CryptoJS.enc.Utf8.stringify(decrypt).toString();
    }
}

• 调用工具包方法

在vue中，引用js工具包，如下：

import AES from '@/utils/crypto'

直接在方法中调用其方法：

var keys = 'XXXXXXXXXXXXX'
//如果是对象/数组的话，需要先JSON.stringify转换成字符串
let password = AES.encrypt(this.form.password, keys)

这样password就被加密了。

是不是很简单？是不是很easy？哈哈哈

后端实现

后端采用的是Spring Boot框架，基于Java实现

java后端使用的是javax.crypto包，所以不用引依赖。

直接编写加密解密工具类，java类代码如下：

package cn.com.wasec.gd_plice.utils;

import lombok.extern.slf4j.Slf4j;
import org.apache.commons.codec.binary.Base64;

import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import java.nio.charset.StandardCharsets;

/**
 * 登陆密码加密
 */
@Slf4j
public class AesUtil {

    private static final String ALGORITHMS = "AES/ECB/PKCS5Padding";

    /**
     * 加密
     *
     * @param content 内容
     * @param key     key
     * @return java.lang.String
     */
    public static String encrypt(String content, String key) {
        try {
            //获得密码的字节数组
            byte[] raw = key.getBytes();
            //根据密码生成AES密钥
            SecretKeySpec skey = new SecretKeySpec(raw, "AES");
            //根据指定算法ALGORITHM自成密码器
            Cipher cipher = Cipher.getInstance(ALGORITHMS);
            //初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥
            cipher.init(Cipher.ENCRYPT_MODE, skey);
            //获取加密内容的字节数组(设置为utf-8)不然内容中如果有中文和英文混合中文就会解密为乱码
            byte[] byteContent = content.getBytes(StandardCharsets.UTF_8);
            //密码器加密数据
            byte[] encodeContent = cipher.doFinal(byteContent);
            //将加密后的数据转换为字符串返回
            return Base64.encodeBase64String(encodeContent);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

    /**
     * 解密
     *
     * @param encryptStr 加密后的内容
     * @param decryptKey 解密key
     * @return java.lang.String
     */
    public static String decrypt(String encryptStr, String decryptKey) {
        try {
            //获得密码的字节数组
            byte[] raw = decryptKey.getBytes();
            //根据密码生成AES密钥
            SecretKeySpec skey = new SecretKeySpec(raw, "AES");
            //根据指定算法ALGORITHM自成密码器
            Cipher cipher = Cipher.getInstance(ALGORITHMS);
            //初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥
            cipher.init(Cipher.DECRYPT_MODE, skey);
            //把密文字符串转回密文字节数组
            byte[] encodeContent = Base64.decodeBase64(encryptStr);
            //密码器解密数据
            byte[] byteContent = cipher.doFinal(encodeContent);
            //将解密后的数据转换为字符串返回
            return new String(byteContent, StandardCharsets.UTF_8);
        } catch (Exception e) {
            log.error("String : {} aes decrypt error", encryptStr);
            return null;
        }
    }
}

直接调用静态方法

String passWord= AesUtil.decrypt(loginDTO.getPassword(),"XXXXXXXXXXXXXX");

至此，后端实现结束。

3、总结

总之，加密和解密在实际业务中还是很必要的，而选择哪样的方式加密自己斟酌。

另外，以上例子中其实存在些许问题，例如秘钥写死在前端代码中，这样其实别人是可以通过抓取你的js文件进行分析获取的，建议通过后端获取。

如果对安全要求更高的话，还是建议使用https吧