手机网站建设基本流程图,基础型网站,免费申请个人网站,徐州百姓网免费发布信息在实际项目中考虑到用户数据的安全性#xff0c;在用户登录时#xff0c;前端需要对用户密码加密#xff08;防止用户密码泄露#xff09;#xff0c;服务端收到登录请求时先对密码进行解密#xff0c;然后再进行用户验证登操作。本文使用 AES ECB 模式算法来实现前端机密…在实际项目中考虑到用户数据的安全性在用户登录时前端需要对用户密码加密防止用户密码泄露服务端收到登录请求时先对密码进行解密然后再进行用户验证登操作。本文使用 AES ECB 模式算法来实现前端机密后端解密基本流程。
基本流程
用户在登录页输入用户信息点击登录按钮时前端需要对用户密码进行加密再去请求登录接口进行登录如果用户选择记住密码注意cookie或localStorage中要保存加密后的密码以防止密码泄露当用户再次回到登录页时用户退出或令牌过期时从cookie或localStorage中拿到加密密码要先解密然后初始化到密码框中服务端收到登录请求先进行密码解密然后再去验证用户的有效性或者先根据用户名去获取用户信息然后对该用户密码加密再去跟前端传的密码比对以验证密码的有效性。
后端加密算法
pom.xml 引入
dependencygroupIdorg.bouncycastle/groupIdartifactIdbcprov-jdk15on/artifactIdversion1.56/version
/dependency!-- fastjson2 --
dependencygroupIdcom.alibaba.fastjson2/groupIdartifactIdfastjson2/artifactIdversion2.0.51/version
/dependencyAES 工具类
package com.angel.ocean.util;import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import com.alibaba.fastjson2.JSON;
import lombok.extern.slf4j.Slf4j;
import org.apache.tomcat.util.codec.binary.Base64;
import java.security.Security;
import java.util.Objects;Slf4j
public class AESUtil {// AES 秘钥private static final String key 5JKRGV0QO4WK1WCWVK55YEU0A1NPOXOP;private AESUtil() {}/*** AES 加密*/public static String encrypt(Object content) throws Exception {String data ;if(null content) {return null;}// 判断content是否为字符串if (content instanceof String) {data content.toString();} else {data JSON.toJSONString(content);}// 将加密过的byte[]数据转换成Base64编码字符串return base64ToString(aesECBEncrypt(data.getBytes(), key.getBytes()));}/*** AES解密*/public static Object decrypt(String content) {if(null content) {return null;}try {byte[] base64 stringToBase64(content);byte[] bytes aesECBDecrypt(base64, key.getBytes());String result new String(bytes);String data result.replaceAll(\, );// 判断解密出来的数据是字符串还是jsonif (data.startsWith({) data.endsWith(})) {return JSON.parse(data);} else {return data;}} catch (Exception e) {log.error(AESUtil.decrypt() error, {}, e.getMessage(), e);}return null;}private static byte[] aesECBEncrypt (byte[] content, byte[] keyBytes) {try {SecretKeySpec key new SecretKeySpec(keyBytes, AES);Security.addProvider(new org.bouncycastle.jce.provider.BouncyCastleProvider());Cipher cipher Cipher.getInstance(AES/ECB/PKCS7Padding);cipher.init(Cipher.ENCRYPT_MODE, key);return cipher.doFinal(content);} catch (Exception e) {log.error(AESUtil.aesECBEncrypt() error, {}, e.getMessage(), e);}return null;}private static byte[] aesECBDecrypt(byte[] content, byte[] keyBytes) {try {SecretKeySpec key new SecretKeySpec(keyBytes, AES);Security.addProvider(new org.bouncycastle.jce.provider.BouncyCastleProvider());Cipher cipher Cipher.getInstance(AES/ECB/PKCS7Padding);cipher.init(Cipher.DECRYPT_MODE, key);return cipher.doFinal(content);} catch (Exception e) {log.error(AESUtil.aesECBDecrypt() error, {}, e.getMessage(), e);}return null;}/*** 将字符串转换成Base64*/public static byte[] stringToBase64(String key) throws Exception {return Base64.decodeBase64(key.getBytes());}/*** 将Base64转换成字符串*/public static String base64ToString(byte[] key) throws Exception {return new Base64().encodeToString(key);}public static void main(String[] args) throws Exception {// 明文String data 123456;// 加密String encryptData encrypt(data);log.info(encryptData: {}, encryptData);// 解密String decryptData Objects.requireNonNull(decrypt(encryptData)).toString();log.info(decryptData: {}, decryptData);}
}main运行结果
Vue前端加密
安装crypto-js
npm install crypto-js引入crypto-js
import CryptoJS from crypto-jsAES 秘钥
const key 5JKRGV0QO4WK1WCWVK55YEU0A1NPOXOP加密解密方法
methods: {encrypt (data) {var secretKey CryptoJS.enc.Utf8.parse(key);var srcs CryptoJS.enc.Utf8.parse(data);var encrypted CryptoJS.AES.encrypt(srcs, secretKey, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});return encrypted.toString();},decrypt(data) {var secretKey CryptoJS.enc.Utf8.parse(key);var decrypt CryptoJS.AES.decrypt(data, secretKey, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});return CryptoJS.enc.Utf8.stringify(decrypt).toString();}
}密码123456加密后的密码截图
