【开发问题】vue的前端和java的后台,用sm4,实现前台加密,后台解密

文章介绍了在Vue项目中使用`sm-crypto`库进行SM4加密和解密的方法,以及在Java中借助Hutool和BouncyCastleProvider实现SM4加密/解密的代码示例,包括依赖管理和加密算法配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue

引入的包

npm install sm-crypto

代码加密解密

加密:

key :代表着密钥,必须是16 字节的十六进制密钥
password :加密前的密码
sm4Password :代表sm4加密后的密文

const sm4 = require('sm-crypto').sm4
const key = '0123456789abcdeffedcba9876543210' // 16 字节的十六进制密钥
const sm4Password = sm4.encrypt(password, key) 

在这里插入图片描述
解密:

key :代表着密钥,必须是16 字节的十六进制密钥
sm4Password:解密前的密文
password:解密后的密码

const sm4 = require('sm-crypto').sm4
const key = '0123456789abcdeffedcba9876543210' // 16 字节的十六进制密钥
const password= sm4.decrypt(sm4Password , key) 

java

maven

<!--sm4-->
            <dependency>
                <groupId>cn.hutool</groupId>
                <artifactId>hutool-all</artifactId>
                <version>5.8.22</version>
            </dependency>

            <dependency>
                <groupId>org.bouncycastle</groupId>
                <artifactId>bcprov-jdk15on</artifactId>
                <version>1.70</version> <!-- 使用最新版本 -->
            </dependency>

代码

加密和解密:


import cn.hutool.crypto.symmetric.SymmetricCrypto;
import org.bouncycastle.jce.provider.BouncyCastleProvider;
import org.bouncycastle.util.encoders.Hex;

import java.security.Security;


public class SM4DecryptionExample {

    static {
        Security.addProvider(new BouncyCastleProvider());
    }
    private static final String ENCODING = "UTF-8";
    public static final String ALGORITHM_NAME = "SM4";
    // 加密算法/分组加密模式/分组填充方式
    // PKCS5Padding-以8个字节为一组进行分组加密
    // 定义分组加密模式使用:PKCS5Padding
    public static final String ALGORITHM_NAME_ECB_PADDING = "SM4/ECB/PKCS5Padding";
    // 128-32位16进制;256-64位16进制
    public static final int DEFAULT_KEY_SIZE = 128;

    public static void main(String arg[]) throws Exception {

        String  paramStr = "pass$123";
        String key  = "0123456789abcdeffedcba9876543210";
        String arfter = encrypt(key,paramStr);
        String brfore = decrypt(key,arfter);

        System.out.println("明文:---------------------"+paramStr);
        System.out.println("加密后密文:---------------------"+arfter);
        System.out.println("解密后明文:---------------------"+brfore);

    }


    /**
     * 加密
     *
     * @param key 密钥
     * @param data 加密前的明文
     * @return  String 返回密文
     * @author  wx
     * @date  2023-12-08
     */

    public static String encrypt(String key, String data) {
        byte[] sm4KeyBytes = Hex.decode(key);
        SymmetricCrypto sm4 = new SymmetricCrypto("SM4/ECB/PKCS5Padding", sm4KeyBytes);
        return sm4.encryptHex(data).toUpperCase();
    }


    /**
     *
     * 解密
     * @param key 密钥
     * @param data 加密后的密文
     * @return  String 返回明文
     * @author  wx
     * @date  2023-12-08
     */

    public static String decrypt(String key,String data) {
        try{
            byte[] sm4KeyBytes = Hex.decode(key);
            SymmetricCrypto sm4 = new SymmetricCrypto("SM4/ECB/PKCS5Padding", sm4KeyBytes);
            return sm4.decryptStr(data);
        }catch (Exception e){
            return data;
        }
    }
}




运行结果

在这里插入图片描述

<think>好的,我现在要回答用户关于如何在前端实现SM4加密问题。首先,我需要回忆一下之前学过的国密算法相关知识,特别是SM4的部分。用户提到了几个引用,其中引用1是关于SM4的示例,引用23是关于SM2前端实现的。虽然用户主要问的是SM4,但引用23可能提供一些前端实现的思路,比如使用npm包或者具体的代码结构。 首先,SM4是一种分组密码算法,AES类似,分组长度是128位,密钥也是128位。前端实现的话,通常需要找到一个可靠的JavaScript库。根据引用23,用户之前可能已经接触过sm-crypto这个库,但sm-crypto主要支持SM2SM3,可能不包括SM4。这时候我需要确认是否有其他库可用,或者是否有其他方法。 接下来,可能需要搜索一下前端常用的SM4实现库。例如,是否存在类似于sm-crypto的库支持SM4?或者是否可以使用nodejs-sm4或者其他npm包。例如,有一个npm包叫sm-crypto,但根据文档,它主要处理SM2SM3,可能不包含SM4。这时候可能需要另一个库,比如@dtinsight/sm-crypto或者gm-crypt。或者用户可能需要自己实现,但这样不太实际,因为加密算法需要安全可靠的实现。 假设用户需要使用现有的库,可能需要引入支持SM4的库。例如,gm-crypt这个库可能同时支持SM2、SM3、SM4。或者另一个可能性是使用nodejs的crypto模块,但前端无法直接使用nodejs的模块,因此需要浏览器可用的库。 根据引用1中的示例,是C#的代码,可能无法直接用于前端。因此,可能需要寻找JavaScript的SM4实现。比如,通过npm安装gm-crypt,然后在Vue项目中引入。例如: 安装gm-crypt:npm install gm-crypt 然后在代码中引入,并进行加密解密操作。例如: import {SM4} from 'gm-crypt' 然后设置密钥,进行加密。需要注意密钥模式(如ECB或CBC),填充方式(如PKCS#5)等参数。 用户可能需要一个具体的示例,比如在Vue组件中如何调用。例如,在data中定义密钥明文,然后调用加密方法生成密文。需要确保密钥是16进制字符串,长度为32字符(128位)。比如密钥可能是'0123456789abcdeffedcba9876543210',然后使用ECB模式加密。 然后,可能需要处理加密后的结果,可能以16进制或base64输出。同时,解密的过程类似,使用相同的密钥参数。 需要检查是否有常见的错误,比如密钥长度不正确,或者模式选择的问题。另外,需要注意前端加密通常需要后端的实现保持一致,比如相同的密钥、模式、填充方式等,否则无法正确解密。 总结步骤应该是:安装库,引入库,设置密钥参数,调用加密方法,处理结果。同时给出一个完整的Vue组件示例,包括加密解密的方法。 另外,可能需要提醒用户注意密钥的安全性,因为前端加密的密钥容易被获取,所以SM4通常用于数据传输加密,而不是存储加密。或者需要结合其他安全措施,比如HTTPS,密钥交换使用SM2等。 现在,需要将这些思考整理成一个清晰的步骤,并提供代码示例,确保LaTeX格式正确,同时生成相关问题。</think>### 前端实现SM4加密的方法示例 #### 1. 安装依赖库 推荐使用支持国密算法的`gm-crypt`库: ```bash npm install gm-crypt --save ``` #### 2. 代码实现(以Vue 3为例) ```javascript import { SM4 } from 'gm-crypt'; // 初始化SM4实例,配置加密参数 const sm4Config = { key: '0123456789abcdeffedcba9876543210', // 128位密钥(32字符16进制) mode: 'ecb', // 加密模式,可选ecb/cbc padding: 'pkcs#5', // 填充方式 cipherType: 'base64' // 输出格式(base64/hex) }; // 加密函数 function encryptSM4(plainText) { const sm4 = new SM4(sm4Config); return sm4.encrypt(plainText); } // 解密函数 function decryptSM4(cipherText) { const sm4 = new SM4(sm4Config); return sm4.decrypt(cipherText); } // 示例用法 const originalText = "Hello SM4!"; const encrypted = encryptSM4(originalText); // 输出:R3lDZk1UTXdNVEZ6TnpJPQ== const decrypted = decryptSM4(encrypted); // 输出:Hello SM4! ``` #### 3. 参数说明 - **密钥**:必须为32字符的16进制字符串(128位),例如:$k \in \{0-9,a-f\}^{32}$[^1] - **加密模式**: - ECB:简单块加密,无偏移量 - CBC:需额外配置`iv`参数(16字节) - **填充方式**:PKCS#5/PKCS#7保证数据块对齐 - **输出格式**:Base64适合网络传输,Hex便于调试 #### 4. 注意事项 1. 密钥管理:前端加密密钥**不应硬编码**,建议通过SM2非对称加密传输[^2] 2. 模式选择:CBC模式比ECB更安全,但需同步初始化向量(IV) 3. 性能优化:长文本加密建议分块处理
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值