Vue 前端部分
第一步：安装依赖
npm install gm-crypt
- 数据提交表单（用的是elementUI）
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<h3 class="title">信息管理服务系统</h3>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
@click.native.prevent="handleLogin">
<span v-if="!loading">登 录</span>
</el-button>
</el-form-item>
</el-form>
- 定义data部分
export default {
name: "Login",
data() {
return {
loginForm: {
username: "",
password: ""
}
}
}
第二步 配置SM4然后快乐加密
handleLogin() {
// 引用sm4包进行加密
const SM4 = require("gm-crypt").sm4;
let sm4Config = {
//配置sm4参数
key: "GJwsXX_BzW=gJWJW", //这里这个key值要与后端的一致，后端解密是根据这个key
mode: "cbc", // 加密的方式有两种，ecb和cbc两种，这里使用的是cbc，cbc模式还要加一个iv的参数，ecb不用
iv: "ZkR_SiNoSOFT=568", //iv是cbc模式的第二个参数，也需要跟后端配置的一致
cipherType: "base64" //
};
let sm4 = new SM4(sm4Config); //new一个sm4函数，将上面的sm4Config作为参数传递进去。
//将new出来的对象，直接调用依赖提供的加密方法就完事了
this.loginForm.password = sm4.encrypt(this.loginForm.password); //密码加密
this.$store.dispatch("Login", this.loginForm).then(() => {
this.$router.push({
path: this.redirect || "/"
}).catch(() => {});
}).catch(() => {
this.loading = false;
if (this.captchaOnOff) {
this.getCode();
}
});
});
}
后端部分
- 后端部分是用到了hutool的加密解密（Hutool-crypto）-国密算法工具
Hutool官网 - 需要注意的是，并不是直接使用hutool的SmUtil，而是new SM4里面的方法（多参数构造），有兴趣的可以进源码看看
- 引入pom文件
<!--hutool 工具包-->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.4.2</version>
</dependency>
<!--SM4加密所需要的依赖-->
<dependency>
<groupId>org.bouncycastle</groupId>
<artifactId>bcprov-jdk15on</artifactId>
<version>1.69</version>
</dependency>
- 创建自己的sm4Utils 工具类：
package com.ruoyi.common.utils.sm4;
import cn.hutool.core.codec.Base64;
import cn.hutool.core.util.CharsetUtil;
import cn.hutool.crypto.Mode;
import cn.hutool.crypto.Padding;
import cn.hutool.crypto.SmUtil;
import cn.hutool.crypto.symmetric.SM4;
import cn.hutool.crypto.symmetric.SymmetricCrypto;
import java.io.UnsupportedEncodingException;
/**
* sm4加密解密
* CBC模式
*
* @author wwl
*/
public class SM4Utils {
/**
* 和前端key一致(上面提到的需要一致的地方)
*/
private static String secretKey = "GJwsXX_BzW=gJWJW";
/**
* 和前端iv一致
*/
private static String iv = "ZkR_SiNoSOFT=568";
/**
* cbc解密
*
* @param cipherTxt
* @return
*/
public static String decrypt(String cipherTxt) {
String plainTxt = "";
try {
//这里是new的SM4类的方法，SmUtil里的方法满足不了需求
SymmetricCrypto sm4 = new SM4(Mode.CBC, Padding.PKCS5Padding,
secretKey.getBytes(CharsetUtil.CHARSET_UTF_8),
iv.getBytes(CharsetUtil.CHARSET_UTF_8));
byte[] cipherHex = Base64.decode(cipherTxt.trim());
plainTxt = sm4.decryptStr(cipherHex, CharsetUtil.CHARSET_UTF_8);
} catch (Exception e) {
e.printStackTrace();
}
return plainTxt;
}
/**
* cbc加密
*
* @param plainTxt
* @return
*/
public static String encrypt(String plainTxt) {
String cipherTxt = "";
SymmetricCrypto sm4 = new SM4(Mode.CBC, Padding.PKCS5Padding,
secretKey.getBytes(CharsetUtil.CHARSET_UTF_8),
iv.getBytes(CharsetUtil.CHARSET_UTF_8));
byte[] encrypHex = sm4.encrypt(plainTxt);
cipherTxt = Base64.encode(encrypHex);
return cipherTxt;
}
//这是一个粗糙的测试方法
public static void main(String[] args) throws UnsupportedEncodingException {
String content = "123456";
String encrypt = encrypt(content);
String decrypt = decrypt(encrypt);
System.out.println("加密：" + encrypt);
System.out.println("解密：" + decrypt);
}
}
最后 就可以前端加密传输，后端解密验证啦！
祝您用餐愉快！！！
