devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

系列一、RuoYi前后端分离（登录密码加密）_若依密码加密方式

作者：我家小花儿 | 2024-05-17 03:06:03

赞

踩

若依密码加密方式

一、部署前后端服务

http://doc.ruoyi.vip/ruoyi-vue/

二、现象

        若依前后端环境分离版本，本地部署好前后端环境后，访问登录接口密码是明文的，这样显然是不安全的，如下图所示：

 三、解决方法

3.1、加密流程

①、后端生成随机公钥和私钥；

②、前端拿到公钥，集成jsencrypt实现密码加密；

③、前端传输加密后的秘密给后端；

④、后端通过私钥对加密后的秘钥进行解密，验证密码

3.2、若依加密方式

https://doc.ruoyi.vip/ruoyi-vue/document/cjjc.html#%E9%9B%86%E6%88%90jsencrypt%E5%AE%9E%E7%8E%B0%E5%AF%86%E7%A0%81%E5%8A%A0%E5%AF%86%E4%BC%A0%E8%BE%93%E6%96%B9%E5%BC%8F

3.3、后端代码修改

3.3.1、新建RSAUtil

  1. package com.ruoyi.business.utils;
  2.  
  3. import org.apache.commons.codec.binary.Base64;
  4. import org.springframework.context.annotation.Bean;
  5. import org.springframework.stereotype.Component;
  6.  
  7. import javax.crypto.Cipher;
  8. import java.security.*;
  9. import java.security.interfaces.RSAPrivateKey;
  10. import java.security.interfaces.RSAPublicKey;
  11. import java.security.spec.PKCS8EncodedKeySpec;
  12. import java.security.spec.X509EncodedKeySpec;
  13.  
  14. @Component
  15. public class RSAUtil {
  16.     // Rsa 私钥 也可固定秘钥对 若依原写法(不安全)
  17.     public static String privateKeys = "";
  18.     private static String publicKeyStr = "";
  19.     private static String privateKeyStr = "";
  20.     private static final RSAKeyPair rsaKeyPair = new RSAKeyPair();
  21.  
  22.     /**
  23.      * 私钥解密
  24.      *
  25.      * @param text 待解密的文本
  26.      * @return 解密后的文本
  27.      */
  28.     public static String decryptByPrivateKey(String text) throws Exception {
  29.         return decryptByPrivateKey(rsaKeyPair.getPrivateKey(), text);
  30.     }
  31.  
  32.     /**
  33.      * 公钥解密
  34.      *
  35.      * @param publicKeyString 公钥
  36.      * @param text            待解密的信息
  37.      * @return 解密后的文本
  38.      */
  39.     public static String decryptByPublicKey(String publicKeyString, String text) throws Exception {
  40.         X509EncodedKeySpec x509EncodedKeySpec = new X509EncodedKeySpec(Base64.decodeBase64(publicKeyString));
  41.         KeyFactory keyFactory = KeyFactory.getInstance("RSA");
  42.         PublicKey publicKey = keyFactory.generatePublic(x509EncodedKeySpec);
  43.         Cipher cipher = Cipher.getInstance("RSA");
  44.         cipher.init(Cipher.DECRYPT_MODE, publicKey);
  45.         byte[] result = cipher.doFinal(Base64.decodeBase64(text));
  46.         return new String(result);
  47.     }
  48.  
  49.     /**
  50.      * 私钥加密
  51.      *
  52.      * @param privateKeyString 私钥
  53.      * @param text             待加密的信息
  54.      * @return 加密后的文本
  55.      */
  56.     public static String encryptByPrivateKey(String privateKeyString, String text) throws Exception {
  57.         PKCS8EncodedKeySpec pkcs8EncodedKeySpec = new PKCS8EncodedKeySpec(Base64.decodeBase64(privateKeyString));
  58.         KeyFactory keyFactory = KeyFactory.getInstance("RSA");
  59.         PrivateKey privateKey = keyFactory.generatePrivate(pkcs8EncodedKeySpec);
  60.         Cipher cipher = Cipher.getInstance("RSA");
  61.         cipher.init(Cipher.ENCRYPT_MODE, privateKey);
  62.         byte[] result = cipher.doFinal(text.getBytes());
  63.         return Base64.encodeBase64String(result);
  64.     }
  65.  
  66.     /**
  67.      * 私钥解密
  68.      *
  69.      * @param privateKeyString 私钥
  70.      * @param text             待解密的文本
  71.      * @return 解密后的文本
  72.      */
  73.     public static String decryptByPrivateKey(String privateKeyString, String text) throws Exception {
  74.         PKCS8EncodedKeySpec pkcs8EncodedKeySpec5 = new PKCS8EncodedKeySpec(Base64.decodeBase64(privateKeyString));
  75.         KeyFactory keyFactory = KeyFactory.getInstance("RSA");
  76.         PrivateKey privateKey = keyFactory.generatePrivate(pkcs8EncodedKeySpec5);
  77.         Cipher cipher = Cipher.getInstance("RSA");
  78.         cipher.init(Cipher.DECRYPT_MODE, privateKey);
  79.         byte[] result = cipher.doFinal(Base64.decodeBase64(text));
  80.         return new String(result);
  81.     }
  82.  
  83.     /**
  84.      * 公钥加密
  85.      *
  86.      * @param publicKeyString 公钥
  87.      * @param text            待加密的文本
  88.      * @return 加密后的文本
  89.      */
  90.     public static String encryptByPublicKey(String publicKeyString, String text) throws Exception {
  91.         X509EncodedKeySpec x509EncodedKeySpec2 = new X509EncodedKeySpec(Base64.decodeBase64(publicKeyString));
  92.         KeyFactory keyFactory = KeyFactory.getInstance("RSA");
  93.         PublicKey publicKey = keyFactory.generatePublic(x509EncodedKeySpec2);
  94.         Cipher cipher = Cipher.getInstance("RSA");
  95.         cipher.init(Cipher.ENCRYPT_MODE, publicKey);
  96.         byte[] result = cipher.doFinal(text.getBytes());
  97.         return Base64.encodeBase64String(result);
  98.     }
  99.  
  100.     /**
  101.      * 构建RSA密钥对
  102.      *
  103.      * @return 生成后的公私钥信息
  104.      */
  105.     @Bean
  106.     public void generateKeyPair() throws NoSuchAlgorithmException, NoSuchProviderException {
  107.         KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA");
  108.         keyPairGenerator.initialize(1024);
  109.         KeyPair keyPair = keyPairGenerator.generateKeyPair();
  110.         RSAPublicKey rsaPublicKey = (RSAPublicKey) keyPair.getPublic();
  111.         RSAPrivateKey rsaPrivateKey = (RSAPrivateKey) keyPair.getPrivate();
  112.         String publicKeyString = Base64.encodeBase64String(rsaPublicKey.getEncoded());
  113.         String privateKeyString = Base64.encodeBase64String(rsaPrivateKey.getEncoded());
  114.         rsaKeyPair.setPrivateKey(privateKeyString);
  115.         rsaKeyPair.setPublicKey(publicKeyString);
  116.         publicKeyStr = publicKeyString;
  117.         privateKeyStr = privateKeyString;
  118.     }
  119.  
  120.  
  121.     public static String getPublicKey() {
  122.         return publicKeyStr;
  123.     }
  124.  
  125.     public static String getPrivateKey() {
  126.         return privateKeyStr;
  127.     }
  128.  
  129.     public static RSAKeyPair rsaKeyPair() {
  130.         return rsaKeyPair;
  131.     }
  132.  
  133.     /**
  134.      * RSA密钥对对象
  135.      */
  136.     public static class RSAKeyPair {
  137.         private String publicKey;
  138.         private String privateKey;
  139.  
  140.         public void setPublicKey(String publicKey) {
  141.             this.publicKey = publicKey;
  142.         }
  143.  
  144.         public void setPrivateKey(String privateKey) {
  145.             this.privateKey = privateKey;
  146.         }
  147.  
  148.         public RSAKeyPair() {
  149.  
  150.         }
  151.  
  152.         public RSAKeyPair(String publicKey, String privateKey) {
  153.             this.publicKey = publicKey;
  154.             this.privateKey = privateKey;
  155.         }
  156.  
  157.         public String getPublicKey() {
  158.             return publicKey;
  159.         }
  160.  
  161.         public String getPrivateKey() {
  162.             return privateKey;
  163.         }
  164.     }
  165. }

说明：

        RSAUtil中添加了@Component注解，generateKeyPair()构建秘钥对添加了@Bean注解，在项目启动时通过@Bean的方式将普通类实例化到Spring容器中，所以当系统启动后，每次调用接口得到的公钥&私钥是一样的，服务重启后，公钥&私钥重新生成。

3.3.2、SysLoginController提供获取公钥接口

  1. /**
  2.  * 获取公钥：前端用来密码加密
  3.  * @return
  4.  */
  5. @GetMapping("/getPublicKey")
  6. public RSAUtil.RSAKeyPair getPublicKey() {
  7.     return RSAUtil.rsaKeyPair();
  8. }

3.3.3、SecurityConfig配置白名单

.antMatchers("/getPublicKey").permitAll()

3.3.4、Postman调用接口获取publicKey 

 3.3.5、SysLoginService.java#login

  1. /**
  2.      * 登录验证
  3.      * 
  4.      * @param username 用户名
  5.      * @param password 密码
  6.      * @param code 验证码
  7.      * @param uuid 唯一标识
  8.      * @return 结果
  9.      */
  10.     public String login(String username, String password, String code, String uuid)
  11.     {
  12.         // 验证码校验
  13. //        validateCaptcha(username, code, uuid);
  14.         // 登录前置校验
  15.         loginPreCheck(username, password);
  16.         // 用户验证
  17.         Authentication authentication = null;
  18.         try
  19.         {
  20.             UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(username,RSAUtil.decryptByPrivateKey(password));
  21.             AuthenticationContextHolder.setContext(authenticationToken);
  22.             // 该方法会去调用UserDetailsServiceImpl.loadUserByUsername
  23.              authentication = authenticationManager.authenticate(authenticationToken);
  24.         }
  25.         catch (Exception e)
  26.         {
  27.             if (e instanceof BadCredentialsException)
  28.             {
  29.                 AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, MessageUtils.message("user.password.not.match")));
  30.                 throw new UserPasswordNotMatchException();
  31.             }
  32.             else
  33.             {
  34.                 AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_FAIL, e.getMessage()));
  35.                 throw new ServiceException(e.getMessage());
  36.             }
  37.         }
  38.         finally
  39.         {
  40.             AuthenticationContextHolder.clearContext();
  41.         }
  42.         AsyncManager.me().execute(AsyncFactory.recordLogininfor(username, Constants.LOGIN_SUCCESS, MessageUtils.message("user.login.success")));
  43.         LoginUser loginUser = (LoginUser) authentication.getPrincipal();
  44.         recordLoginInfo(loginUser.getUserId());
  45.         // 生成token
  46.         return tokenService.createToken(loginUser);
  47.     }

 3.3.6、SysProfileController重置密码接口修改

  1. @Log(title = "个人信息", businessType = BusinessType.UPDATE)
  2. @PutMapping("/updatePwd")
  3. public AjaxResult updatePwd(String oldPassword, String newPassword) throws Exception {
  4. 	LoginUser loginUser = tokenService.getLoginUser(ServletUtils.getRequest());
  5. 	String userName = loginUser.getUsername();
  6. 	//加密后的
  7. 	String password = loginUser.getPassword();
  8. 	//解密
  9. 	oldPassword = RSAUtil.decryptByPrivateKey(oldPassword);
  10. 	newPassword = RSAUtil.decryptByPrivateKey(newPassword);
  11. 	//拿原密码和加密后的解密
  12. 	if (!SecurityUtils.matchesPassword(oldPassword, password)) {
  13. 		return AjaxResult.error("修改密码失败，旧密码错误");
  14. 	}
  15. 	if (SecurityUtils.matchesPassword(newPassword, password)) {
  16. 		return AjaxResult.error("新密码不能与旧密码相同");
  17. 	}
  18. 	if (userService.resetUserPwd(userName, SecurityUtils.encryptPassword(newPassword)) > 0) {
  19. 		// 更新缓存用户密码
  20. 		loginUser.getUser().setPassword(SecurityUtils.encryptPassword(newPassword));
  21. 		tokenService.setLoginUser(loginUser);
  22. 		return AjaxResult.success();
  23. 	}
  24. 	return AjaxResult.error("修改密码异常，请联系管理员");
  25. }

==========================O(∩_∩)O 后端修改over O(∩_∩)O==========================

3.4、前端代码修改

3.4.1、login.js添加获取公钥的接口

  1. import request from '@/utils/request'
  2.  
  3. // 获取公钥
  4. export function getPublicKey() {
  5.   return request({
  6.     url: '/getPublicKey',
  7.     method: 'get',
  8.   })
  9. }
  10.  
  11. // 登录方法
  12. export function login(username, password, code, uuid) {
  13.   const data = {
  14.     username,
  15.     password,
  16.     code,
  17.     uuid
  18.   }
  19.   return request({
  20.     url: '/login',
  21.     headers: {
  22.       isToken: false
  23.     },
  24.     method: 'post',
  25.     data: data
  26.   })
  27. }
  28.  
  29. // 注册方法
  30. export function register(data) {
  31.   return request({
  32.     url: '/register',
  33.     headers: {
  34.       isToken: false
  35.     },
  36.     method: 'post',
  37.     data: data
  38.   })
  39. }
  40.  
  41. // 获取用户详细信息
  42. export function getInfo() {
  43.   return request({
  44.     url: '/getInfo',
  45.     method: 'get'
  46.   })
  47. }
  48.  
  49. // 退出方法
  50. export function logout() {
  51.   return request({
  52.     url: '/logout',
  53.     method: 'post'
  54.   })
  55. }
  56.  
  57. // 获取验证码
  58. export function getCodeImg() {
  59.   return request({
  60.     url: '/captchaImage',
  61.     headers: {
  62.       isToken: false
  63.     },
  64.     method: 'get',
  65.     timeout: 20000
  66.   })
  67. }

3.4.2、user.js修改登录方法

  1. import { getToken, setToken, removeToken } from '@/utils/auth'
  2. import { login, logout, getInfo, getPublicKey } from '@/api/login'
  3. import {encrypt} from "../../utils/jsencrypt";
  4.  
  5. const user = {
  6.   state: {
  7.     token: getToken(),
  8.     name: '',
  9.     avatar: '',
  10.     roles: [],
  11.     permissions: []
  12.   },
  13.  
  14.   mutations: {
  15.     SET_TOKEN: (state, token) => {
  16.       state.token = token
  17.     },
  18.     SET_NAME: (state, name) => {
  19.       state.name = name
  20.     },
  21.     SET_AVATAR: (state, avatar) => {
  22.       state.avatar = avatar
  23.     },
  24.     SET_ROLES: (state, roles) => {
  25.       state.roles = roles
  26.     },
  27.     SET_PERMISSIONS: (state, permissions) => {
  28.       state.permissions = permissions
  29.     }
  30.   },
  31.  
  32.   actions: {
  33.     getPublicKey() {
  34.       return new Promise((resolve, reject) => {
  35.         getPublicKey()
  36.           .then(res => {
  37.             resolve(res)
  38.           })
  39.           .catch(error => {
  40.             reject(error)
  41.           })
  42.       })
  43.     },
  44.     // 登录
  45.     Login({ commit, dispatch }, userInfo) {
  46.       return new Promise((resolve, reject) => {
  47.         dispatch('getPublicKey').then(res => {
  48.           let publicKey = res.publicKey
  49.           const username = userInfo.username.trim()
  50.           //调用加密方法(传密码和公钥)
  51.           const password = encrypt(userInfo.password, publicKey)
  52.           const code = userInfo.code
  53.           const uuid = userInfo.uuid
  54.           login(username, password, code, uuid)
  55.             .then(res => {
  56.               setToken(res.token)
  57.               commit('SET_TOKEN', res.token)
  58.               resolve()
  59.             })
  60.             .catch(error => {
  61.               reject(error)
  62.             })
  63.         })
  64.       })
  65.     },
  66.  
  67.     // 获取用户信息
  68.     GetInfo({ commit, state }) {
  69.       return new Promise((resolve, reject) => {
  70.         getInfo().then(res => {
  71.           const user = res.user
  72.           const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : process.env.VUE_APP_BASE_API + user.avatar;
  73.           if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
  74.             commit('SET_ROLES', res.roles)
  75.             commit('SET_PERMISSIONS', res.permissions)
  76.           } else {
  77.             commit('SET_ROLES', ['ROLE_DEFAULT'])
  78.           }
  79.           commit('SET_NAME', user.userName)
  80.           commit('SET_AVATAR', avatar)
  81.           resolve(res)
  82.         }).catch(error => {
  83.           reject(error)
  84.         })
  85.       })
  86.     },
  87.  
  88.     // 退出系统
  89.     LogOut({ commit, state }) {
  90.       return new Promise((resolve, reject) => {
  91.         logout(state.token).then(() => {
  92.           commit('SET_TOKEN', '')
  93.           commit('SET_ROLES', [])
  94.           commit('SET_PERMISSIONS', [])
  95.           removeToken()
  96.           resolve()
  97.         }).catch(error => {
  98.           reject(error)
  99.         })
  100.       })
  101.     },
  102.  
  103.     // 前端 登出
  104.     FedLogOut({ commit }) {
  105.       return new Promise(resolve => {
  106.         commit('SET_TOKEN', '')
  107.         removeToken()
  108.         resolve()
  109.       })
  110.     }
  111.   }
  112. }
  113.  
  114. export default user

 

注意事项：注意上方的导包

 3.4.3、修改resetPwd.vue

  1. <template>
  2.   <el-form ref="form" :model="user" :rules="rules" label-width="80px">
  3.     <el-form-item label="旧密码" prop="oldPassword">
  4.       <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
  5.     </el-form-item>
  6.     <el-form-item label="新密码" prop="newPassword">
  7.       <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
  8.     </el-form-item>
  9.     <el-form-item label="确认密码" prop="confirmPassword">
  10.       <el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password/>
  11.     </el-form-item>
  12.     <el-form-item>
  13.       <el-button type="primary" size="mini" @click="submit">保存</el-button>
  14.       <el-button type="danger" size="mini" @click="close">关闭</el-button>
  15.     </el-form-item>
  16.   </el-form>
  17. </template>
  18.  
  19. <script>
  20. import { updateUserPwd } from "@/api/system/user";
  21. import { getPublicKey } from '@/api/login';
  22. import { encrypt } from '@/utils/jsencrypt';
  23.  
  24. export default {
  25.   data() {
  26.     const equalToPassword = (rule, value, callback) => {
  27.       if (this.user.newPassword !== value) {
  28.         callback(new Error("两次输入的密码不一致"));
  29.       } else {
  30.         callback();
  31.       }
  32.     };
  33.     return {
  34.       user: {
  35.         oldPassword: undefined,
  36.         newPassword: undefined,
  37.         confirmPassword: undefined
  38.       },
  39.       // 表单校验
  40.       rules: {
  41.         oldPassword: [
  42.           { required: true, message: "旧密码不能为空", trigger: "blur" }
  43.         ],
  44.         newPassword: [
  45.           { required: true, message: "新密码不能为空", trigger: "blur" },
  46.           { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
  47.         ],
  48.         confirmPassword: [
  49.           { required: true, message: "确认密码不能为空", trigger: "blur" },
  50.           { required: true, validator: equalToPassword, trigger: "blur" }
  51.         ]
  52.       }
  53.     };
  54.   },
  55.   methods: {
  56.     getPublicKey() {
  57.       return new Promise((resolve, reject) => {
  58.         getPublicKey()
  59.           .then(res => {
  60.             resolve(res)
  61.           })
  62.           .catch(error => {
  63.             reject(error)
  64.           })
  65.       })
  66.     },
  67.     submit() {
  68.       this.$refs["form"].validate(valid => {
  69.         if (valid) {
  70.           this.getPublicKey().then(res=>{
  71.             let publicKey = res.publicKey
  72.             console.log("res.publicKey",res.publicKey)
  73.             const oldPassword = encrypt(this.user.oldPassword, publicKey)
  74.             const newPassword = encrypt(this.user.newPassword, publicKey)
  75.             updateUserPwd(oldPassword, newPassword).then(
  76.               response => {
  77.                 this.msgSuccess("修改成功");
  78.               }
  79.             );
  80.           })
  81.  
  82.         }
  83.       });
  84.     },
  85.     close() {
  86.       this.$tab.closePage();
  87.     }
  88.   }
  89. };
  90. </script>

3.4.4、jsencrypt.js更改加密方法

  1. import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'
  2.  
  3. // 密钥对生成 http://web.chacuo.net/netrsakeypair
  4.  
  5. //这里注掉了原来固定的公私钥
  6. //const publicKey = ''
  7. //const privateKey = ''
  8.  
  9. // 加密
  10. export function encrypt(txt, publicKey) {
  11.   const encryptor = new JSEncrypt()
  12.   encryptor.setPublicKey(publicKey) // 设置公钥
  13.   return encryptor.encrypt(txt) // 对数据
  14. }
  15.  
  16. // 解密(暂无使用)
  17. export function decrypt(txt) {
  18.   const encryptor = new JSEncrypt()
  19.   encryptor.setPrivateKey(privateKey) // 设置私钥
  20.   return encryptor.decrypt(txt) // 对数据进行解密
  21. }

四、启动后端&前端服务，验证登录密码是否加密

五、参考

https://blog.csdn.net/weixin_56567361/article/details/124961493

 六、完整代码

  1. 链接：https://pan.baidu.com/s/1YKnAcixZGn5zeUkSti1DCA?pwd=yyds 
  2. 提取码：yyds

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/581654
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号