vue——前后端实现SM4加解密

前端-xyq / 2023-08-29 / 原文

参考：

1.VUE + Springboot + SM4前端加密后端解密

前端

1.引入gm-crypt

npm install gm-crypt

2.封装js

sm4Util.js

const SM4 = require('gm-crypt').sm4;
const pwdKey = 'xxx'; // 密钥 前后端一致即可,后端提供
let sm4Config = {
  key: pwdKey, // key值要与后端的一致，后端解密是根据这个key
  mode: 'cbc', // 加密的方式有两种，ecb和cbc两种，也是看后端如何定义的，cbc的话下面还要加一个iv的参数，ecb不用
  iv: pwdKey, // iv是cbc模式的第二个参数，也需要跟后端配置的一致 iv是initialization vector的意思，就是加密的初始化矢量，初始化加密函数的变量，也叫初始向量
  cipherType: 'base64',
};

/*
 * 加密工具函数
 * @param {String} text 待加密文本
 * @param key string 加密key(16位)
 * @param iv string 偏移向量(16位)
 */
export function SM4Encrypt(text, key = pwdKey, iv = pwdKey) {
  sm4Config.key = key;
  sm4Config.iv = iv;
  const sm4Util = new SM4(sm4Config); // new一个sm4函数，将sm4Config作为参数传递进去
  return sm4Util.encrypt(text, key);
}

/*
 * 解密工具函数
 * @param {String} text 待解密密文
 * @param key string 加密key(16位)
 * @param iv string 偏移向量(16位)
 */
export function SM4Decrypt(text, key = pwdKey, iv = pwdKey) {
  sm4Config.key = key;
  sm4Config.iv = iv;
  const sm4Util = new SM4(sm4Config); // new一个sm4函数，将sm4Config作为参数传递进去
  return sm4Util.decrypt(text, key);
}

3.使用

import { SM4Encrypt, SM4Decrypt } from '@/util/sm4Util.js';

...

const key = 'xxx'; // 密钥，由后端定义，可以从接口获取
const iv = 'xxx'; // 偏移向量，由后端定义，可以从接口获取
const enPw = SM4Encrypt(this.form.password, key, iv); // 加密
const dePw = SM4Decrypt (enPw, key, iv); // 解密

后端

　/**
   * 和前端key一致
   */
  private static String secretKey = "XXXXXXXXXXXXXXXX";

  /**
   * 和前端iv一致
   */
  private static String iv = "XXXXXXXXXXXXXXXX";

  /**
   * cbc加密
   */
  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;
  }

  /**
   * cbc解密
   */
  public static String decrypt(String cipherTxt) {
    String plainTxt = "";
    try {
      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) {
      // TODO Auto-generated catch block
      e.printStackTrace();
    }
    return plainTxt;
  }