1. 项目概述为什么要在UniApp里搞国密SM2最近在做一个政务类的小程序项目甲方爸爸明确要求所有敏感数据传输必须使用国密算法。一开始我也头大毕竟前端加密这事儿平时用RSA、AES比较多国密SM2听起来就有点“体制内”的神秘感。但实际折腾下来发现在UniApp里集成SM2加密远没有想象中复杂核心代码甚至5分钟就能跑通。这不仅仅是满足合规要求从技术角度看SM2作为国家密码局认定的商用密码算法在安全性尤其是抗量子计算攻击潜力和性能上都有其优势特别适合对数据安全有高要求的国内应用场景。这个“5分钟搞定”的目标不是让你囫囵吞枣而是指在已有UniApp项目的基础上快速引入一个可靠、易用的SM2加密能力。你需要准备的是一个正常的UniApp项目Vue 2/3均可然后跟着我把密钥对生成、数据加密、数据解密这几个核心环节走一遍。无论是登录密码的加密传输还是表单敏感信息的保护这套方案都能直接套用。下面我就把从选型、集成到实战踩坑的完整过程拆解给你。2. 核心工具选型为什么是sm-crypto前端实现国密算法无外乎几个路子自己手搓难度极大、找现成的WebAssemblyWASM库、或者用纯JavaScript实现的库。对于UniApp这种多端框架兼容性是首要考虑。经过一番调研和实测我最终锁定了sm-crypto这个库。2.1 主流方案对比方案优点缺点适用场景sm-crypto(纯JS)零依赖体积小(~100KB)API简单兼容性好H5/小程序/App纯JS运算性能不如WASM极端大数据量加密有压力绝大多数UniApp场景加密文本、密码、关键参数等gm-crypt(WASM)性能强劲由C编译而来加密速度快需要处理.wasm文件加载在小程序端兼容性可能需额外配置体积稍大前端需要频繁加密解密大量数据如文件分片后端代理加密前端无负担算法统一在后端网络传输的明文数据仍有风险不符合“传输过程加密”的核心需求仅适用于对前端包体积有极端要求且可接受传输风险的非敏感场景注意有些项目可能会考虑用node-forge等库配合插件但在小程序环境里限制很多折腾成本高不推荐。为什么最终选择sm-crypto核心就三点省心、够用、全端兼容。我们项目里需要加密的都是登录凭证、身份证号、手机号这类文本数据长度有限sm-crypto的JS性能完全足够。更重要的是它不需要你额外配置vue.config.js或者处理wasm文件的加载路径直接npm安装按需引入就能用这对于需要快速上线的项目来说是最大的优势。2.2sm-crypto库浅析sm-crypto实现了SM2、SM3、SM4等国密算法。我们主要用它的SM2模块。它提供两套密钥体系基于BigInteger的内部处理和基于十六进制Hex字符串的外部接口。为了便于和后端对接后端通常接收Hex或Base64格式的密钥我们全程使用Hex字符串接口这样密钥和密文都可以用字符串形式传输非常方便。安装命令再简单不过npm install sm-crypto --save或者如果你用的HBuilder X创建的项目在项目根目录打开终端运行上面这行命令就行。3. 实战五部曲从零到一集成SM2理论说完直接上干货。下面这五个步骤你按顺序操作保证能跑起来。3.1 第一步创建与引入加密工具类良好的代码组织是成功的一半。我习惯在utils目录下创建一个独立的加密工具文件这样业务代码里调用起来清晰以后维护也方便。在/utils目录下新建文件sm2Crypto.js。写入以下基础代码// /utils/sm2Crypto.js import { sm2 } from sm-crypto; // 这里先定义空对象密钥对将在下一步生成后替换 const publicKey ; // 公钥用于加密 const privateKey ; // 私钥用于解密**务必保密仅前端解密时使用** /** * SM2加密使用公钥 * param {string} plainText - 待加密的明文 * param {string} cipherMode - 加密模式默认1 (C1C3C2格式)可选0 (C1C2C3) * returns {string} 加密后的16进制字符串密文 */ export function encryptSM2(plainText, cipherMode 1) { if (!publicKey) { console.error(SM2公钥未配置); return null; } // 注意sm2.doEncrypt默认输出16进制字符串与公钥格式匹配 return sm2.doEncrypt(plainText, publicKey, cipherMode); } /** * SM2解密使用私钥 * param {string} cipherTextHex - 16进制格式的密文 * param {string} cipherMode - 解密模式需与加密时一致 * returns {string} 解密后的明文 */ export function decryptSM2(cipherTextHex, cipherMode 1) { if (!privateKey) { console.error(SM2私钥未配置); return null; } return sm2.doDecrypt(cipherTextHex, privateKey, cipherMode); // 输出解密后的字符串 } // 可选导出密钥对生成函数用于临时测试或动态密钥场景 export function generateKeyPairHex() { const keyPair sm2.generateKeyPairHex(); return { publicKey: keyPair.publicKey, // 04开头的130位16进制串 privateKey: keyPair.privateKey // 64位16进制串 }; } export default { encryptSM2, decryptSM2, generateKeyPairHex };这个工具类提供了加密、解密和生成密钥对三个核心方法。现在公钥和私钥是空的我们马上来生成它。3.2 第二步生成SM2密钥对并妥善保管SM2是非对称加密加密和解密用的是不同的钥匙。公钥可以公开用来加密数据私钥必须严格保密用来解密。绝对不要把私钥硬编码在提交到代码仓库的前端代码里这是严重的安全漏洞。我们的策略是公钥放在前端配置中用于加密私钥则通过安全的方式提供给前端解密使用通常仅限于非常特殊的本地解密场景更多时候解密应由后端负责。对于前端加密、后端解密的典型场景我们只需生成一对密钥将公钥给前端私钥交给后端保存。如何生成你可以用我们工具类里的generateKeyPairHex函数写一段临时代码跑一下。我通常在项目里新建一个临时页面或直接在浏览器控制台里测试// 临时测试代码在控制台运行或写在某个临时vue页面的mounted里 import { generateKeyPairHex } from /utils/sm2Crypto.js; const keyPair generateKeyPairHex(); console.log( 请妥善保存以下密钥对 ); console.log(公钥 (publicKey):, keyPair.publicKey); console.log(私钥 (privateKey):, keyPair.privateKey); console.log();运行后控制台会打印出类似下面的信息公钥 (publicKey): 04bb34...很长的一串130位16进制数以04开头 私钥 (privateKey): 5a1d6...64位16进制数关键操作复制公钥将输出的公钥字符串复制并粘贴到/utils/sm2Crypto.js文件中赋值给const publicKey变量。备份私钥将私钥字符串安全地交给后端同事。他们需要将其配置在服务器的安全环境中用于解密前端传过来的数据。前端代码里不要保留私钥除非你有绝对安全的存储方案如App端使用安全存储SDK。实操心得密钥对一旦生成并投入使用就不要轻易更换。更换意味着之前用旧公钥加密的数据必须用旧私钥才能解密。所以最好在项目初期就确定好并做好备份。3.3 第三步在业务页面中调用加密假设我们有一个登录页面需要加密用户的密码后再发送给后端。看看在Vue页面里多简单。template view classcontent input v-modelusername placeholder请输入用户名 / input v-modelpassword typepassword placeholder请输入密码 / button clickhandleLogin登录/button /view /template script // 1. 引入我们写好的工具函数 import { encryptSM2 } from /utils/sm2Crypto.js; export default { data() { return { username: , password: }; }, methods: { async handleLogin() { if (!this.password) { uni.showToast({ title: 密码不能为空, icon: none }); return; } // 2. 加密密码 let encryptedPwd ; try { encryptedPwd encryptSM2(this.password); if (!encryptedPwd) { throw new Error(加密失败公钥可能未配置); } console.log(加密后密文Hex:, encryptedPwd); } catch (error) { console.error(加密过程出错:, error); uni.showToast({ title: 加密失败请稍后重试, icon: none }); return; } // 3. 将加密后的密文发送给后端 // 这里使用uni.request实际项目你可能用封装好的http模块 uni.request({ url: https://your-api-domain.com/login, method: POST, data: { username: this.username, password: encryptedPwd // 注意这里传的是加密后的密文字符串 }, success: (res) { // 处理登录成功逻辑 console.log(登录响应:, res.data); }, fail: (err) { console.error(登录请求失败:, err); } }); } } }; /script看核心加密逻辑就一行encryptSM2(this.password)。加密后得到的encryptedPwd是一个长长的十六进制字符串这就是安全的密文即使在网络传输中被截获没有对应的私钥也无法破解。3.4 第四步处理后端返回的加密数据解密有些场景下后端可能会返回一些用前端公钥加密过的敏感信息虽然较少见或者你需要在前端验证某些加密数据。这时就需要用到解密功能。再次强调前端解密需谨慎确保私钥的存储安全。假设我们工具类里的privateKey已经通过某种安全方式注入例如在App启动时从安全服务器动态获取并存入内存不落盘我们可以这样解密script import { decryptSM2 } from /utils/sm2Crypto.js; export default { methods: { async handleEncryptedDataFromBackend(encryptedDataHex) { try { const decryptedText decryptSM2(encryptedDataHex); console.log(解密后的内容:, decryptedText); // ... 使用解密后的数据 } catch (error) { console.error(解密失败:, error); // 可能是密文格式错误、私钥不匹配或模式不对 } } } }; /script注意事项前端解密的场景非常有限。更常见的流程是后端用他自己的密钥对加密数据给前端前端只负责展示。将解密私钥放在前端即使动态获取也增加了风险。务必与后端架构师确认数据流的安全设计。3.5 第五步多端兼容性测试与打包UniApp项目最终可能要发布到H5、微信小程序、App等多个平台。加密功能在所有平台都必须正常工作。H5平台直接在浏览器运行测试一般没问题。注意检查控制台是否有sm-crypto相关的报错。微信小程序这是最容易出问题的地方。运行到微信开发者工具。可能遇到的坑小程序环境对crypto相关的全局变量有限制但sm-crypto库已经处理了大部分兼容性问题。如果遇到Buffer is not defined之类的错误可能需要检查uni-app的编译配置。幸运的是在近期版本的uni-app和sm-crypto中我还没碰到这个问题。测试方法在小程序页面执行加密查看密文输出是否正常并尝试将密文发送给你的后端接口确认后端能成功解密。App平台真机调试。无论是Android还是iOS核心的JavaScript引擎都能正确执行加密代码。注意App端如果涉及更安全的密钥存储需要调用plus.storage或原生插件但那超出了本文“5分钟搞定”的范围。打包检查运行npm run build:mp-weixin或通过HBuilderX发行时观察编译日志是否有关于sm-crypto的警告。只要没报错打包后的产物就应该包含加密库。4. 深入原理与性能优化如果你只想实现功能第三部分已经足够了。但如果你想用得更好、更稳下面这些原理和优化点值得了解。4.1 SM2加密模式C1C3C2 vs C1C2C3在加密函数encryptSM2中有一个cipherMode参数默认为1。这指的是国密标准中规定的两种密文结构顺序模式1 (cipherMode 1)输出密文顺序为C1 | C3 | C2。这是目前最常用、也是sm-crypto默认的模式。模式0 (cipherMode 0)输出密文顺序为C1 | C2 | C3。这里的C1是椭圆曲线上的一个点代表临时公钥C2是加密后的密文C3是SM3算法生成的摘要值用于校验。关键点加密和解密必须使用相同的模式如果你的后端使用的是JavaBouncyCastle库、Go或PHP等语言你需要确认后端库默认支持哪种模式。sm-crypto默认是模式1。如果后端解密失败首先检查双方的模式是否一致。这是联调时最高频的坑。4.2 加密内容长度限制与处理SM2算法本身对加密的明文长度有限制。具体限制与选择的椭圆曲线参数有关。对于常见的sm2p256v1曲线当使用sm-crypto的doEncrypt方法时它能处理的明文长度是有限的。经过测试直接加密过长的字符串例如一篇长文章可能会失败。解决方案是对长内容采用“SM2加密对称密钥对称密钥加密内容”的混合加密体系。前端随机生成一个AES密钥key。用SM2公钥加密这个AES密钥得到encryptedKey。用这个AES密钥加密实际的长文本数据得到encryptedData。将encryptedKey和encryptedData一起发送给后端。后端用SM2私钥解密encryptedKey得到AES密钥再用AES密钥解密encryptedData。这样既利用了SM2的非对称安全性又解决了长度限制和性能问题。不过这需要前后端同时支持AES加解密复杂度提升。对于登录密码、身份证号等短文本直接SM2加密完全足够。4.3 性能实测与优化建议在微信开发者工具和真机上我对加密一个约20字符的密码进行了简单测试耗时单次加密操作在1-3毫秒之间对用户体验无任何影响。内存无显著内存增长。优化建议避免频繁生成密钥对密钥对生成操作比加密解密更耗资源。应在应用初始化时生成一次或使用固定密钥而不是每次加密都生成。大文件分片加密如果真有在前端加密大文件的需求如图片、文档务必采用上述混合加密方案并对文件进行分片处理避免阻塞主线程。Web Worker对于计算密集型操作如批量加密可以考虑使用Web Worker将加密任务放到后台线程防止页面卡顿。不过在小程序环境中使用Worker有限制需查阅最新文档。5. 联调与线上问题排查实录功能集成好了和后台联调才是“魔鬼”开始的阶段。下面是我踩过的一些坑和解决方案。5.1 常见联调问题速查表问题现象可能原因排查步骤与解决方案后端解密失败报“无效密文”、“解密错误”1.加密模式不匹配(最常见)2. 公钥格式错误或前后端不一致3. 密文在传输过程中被编码处理如被URL encode1.确认模式前端encryptSM2的cipherMode与后端解密使用的模式必须一致。先用默认值1联调。2.核对公钥确保前端使用的公钥是完整的、以04开头的130位Hex字符串且与后端生成的公钥对匹配。3.检查传输确保uni.request发送的data中的密文字符串是“原样”发送没有多余的转义。可以打印出发送前的密文和接收到的密文进行比对。前端加密报错如“公钥格式错误”1. 公钥变量未正确赋值或为空2. 公钥字符串格式不正确长度不对、包含非法字符1. 检查sm2Crypto.js中publicKey常量是否已正确粘贴。2. 确认公钥是sm2.generateKeyPairHex()生成的publicKey属性值通常是04开头。小程序端加密功能正常但App端报错或无效1. App端JavaScript引擎差异2. 三方库在App端兼容性问题较少见1. 尝试在main.js或App.vue的早期生命周期中引入并执行一次简单的加密测试基础功能。2. 检查是否使用了App端不支持的API本例中sm-crypto是纯JS通常没问题。3. 真机调试查看Console日志。加密后数据长度异常正常现象。SM2加密后密文会比原文长很多因为包含了曲线点C1和摘要C3。向产品经理或测试同学解释这是非对称加密的特性密文变长是安全的体现不是bug。在Vue3的script setup语法糖中引入报错构建工具对ES模块的解析问题尝试更换引入方式import smCrypto from sm-crypto;然后使用smCrypto.sm2。或者检查uni-app编译配置。5.2 加密数据上送前的最后检查在点击“登录”或“提交”按钮前你可以通过以下代码片段快速验证加密链路是否通畅// 在你的页面方法中添加一个测试函数 testSM2Flow() { const testText HelloSM2123; console.log(测试明文:, testText); const encrypted this.$sm2.encrypt(testText); // 假设你全局注入了$sm2 console.log(加密结果Hex:, encrypted); // 如果你配置了私钥仅用于调试 // const decrypted this.$sm2.decrypt(encrypted); // console.log(解密结果:, decrypted); // console.assert(testText decrypted, 加密解密环路测试失败); // 更安全的做法将加密后的密文发送给一个专门的后端测试接口 uni.request({ url: https://your-api.com/test-decrypt, method: POST, data: { cipherText: encrypted }, success: (res) { if(res.data.decryptedText testText) { console.log(✅ 前后端加解密联调成功); } else { console.error(❌ 后端解密结果与原文不符, res.data); } } }); }这个测试能一次性验证前端加密库是否工作、公钥是否正确、网络传输是否导致数据变化、后端解密逻辑是否匹配。5.3 线上安全增强建议“5分钟搞定”是让你快速跑通流程。实际上线还需要考虑更多公钥动态化不要硬编码公钥。可以在App启动或页面加载时从后端接口获取一个“时效性公钥”。这样即使公钥泄露也可以定期更换降低风险。防重放攻击加密传输解决了窃听问题但防止请求被重复提交重放攻击还需要其他手段。常见的做法是在加密数据中加入时间戳timestamp和随机数nonce后端校验请求的时效性和唯一性。完整性校验SM2加密本身包含了C3摘要能校验数据完整性。但在业务层面可以考虑对整体请求包再计算一次HMAC-SM3签名由后端验证实现“加密签名”的双重保护。混淆与压缩对于特别敏感的数据可以在SM2加密前先对明文进行简单的自定义混淆或压缩增加一层安全性但这不属于密码学范畴不能替代加密。6. 总结与扩展方向走到这里你已经成功在UniApp项目中集成了国密SM2加密并且了解了背后的原理和避坑指南。回顾一下核心选用sm-crypto库、生成并配置密钥对、封装工具类、在业务中调用加密方法、注意加解密模式匹配。这个方案的优势在于轻量、全端兼容、开箱即用能满足绝大多数需要对敏感数据进行非对称加密传输的场景。无论是政务、金融、还是对数据安全有要求的商业应用都能快速满足合规性需求。后续可以探索的扩展方向集成SM3/SM4sm-crypto同样提供了SM3杂凑算法类似MD5/SHA-256和SM4对称加密算法类似AES。你可以根据需求构建更完整的国密算法套件。例如用SM3做数据摘要用SM4加密大量数据。结合uni-app插件市场搜索“国密”、“SM2”可能会有封装得更完善的uni-app插件提供更便捷的API或更好的多端适配可以评估后选用。原生插件开发如果对性能和安全性有极致要求可以考虑开发原生插件在iOS/Android底层调用硬件加密模块来执行SM2运算但这需要原生开发能力。最后一点个人体会技术选型没有银弹。sm-crypto的纯JS方案在方便性和兼容性上做到了最佳平衡对于UniApp开发者来说是首选。当你和后台联调遇到问题时第一个要怀疑的就是加密模式和密钥是否配对这两个点能解决90%的联调故障。希望这篇从实战中总结的指南能帮你真正高效、稳妥地搞定UniApp中的国密加密需求。
1. 项目概述为什么要在UniApp里搞国密SM2最近在做一个政务类的小程序项目甲方爸爸明确要求所有敏感数据传输必须使用国密算法。一开始我也头大毕竟前端加密这事儿平时用RSA、AES比较多国密SM2听起来就有点“体制内”的神秘感。但实际折腾下来发现在UniApp里集成SM2加密远没有想象中复杂核心代码甚至5分钟就能跑通。这不仅仅是满足合规要求从技术角度看SM2作为国家密码局认定的商用密码算法在安全性尤其是抗量子计算攻击潜力和性能上都有其优势特别适合对数据安全有高要求的国内应用场景。这个“5分钟搞定”的目标不是让你囫囵吞枣而是指在已有UniApp项目的基础上快速引入一个可靠、易用的SM2加密能力。你需要准备的是一个正常的UniApp项目Vue 2/3均可然后跟着我把密钥对生成、数据加密、数据解密这几个核心环节走一遍。无论是登录密码的加密传输还是表单敏感信息的保护这套方案都能直接套用。下面我就把从选型、集成到实战踩坑的完整过程拆解给你。2. 核心工具选型为什么是sm-crypto前端实现国密算法无外乎几个路子自己手搓难度极大、找现成的WebAssemblyWASM库、或者用纯JavaScript实现的库。对于UniApp这种多端框架兼容性是首要考虑。经过一番调研和实测我最终锁定了sm-crypto这个库。2.1 主流方案对比方案优点缺点适用场景sm-crypto(纯JS)零依赖体积小(~100KB)API简单兼容性好H5/小程序/App纯JS运算性能不如WASM极端大数据量加密有压力绝大多数UniApp场景加密文本、密码、关键参数等gm-crypt(WASM)性能强劲由C编译而来加密速度快需要处理.wasm文件加载在小程序端兼容性可能需额外配置体积稍大前端需要频繁加密解密大量数据如文件分片后端代理加密前端无负担算法统一在后端网络传输的明文数据仍有风险不符合“传输过程加密”的核心需求仅适用于对前端包体积有极端要求且可接受传输风险的非敏感场景注意有些项目可能会考虑用node-forge等库配合插件但在小程序环境里限制很多折腾成本高不推荐。为什么最终选择sm-crypto核心就三点省心、够用、全端兼容。我们项目里需要加密的都是登录凭证、身份证号、手机号这类文本数据长度有限sm-crypto的JS性能完全足够。更重要的是它不需要你额外配置vue.config.js或者处理wasm文件的加载路径直接npm安装按需引入就能用这对于需要快速上线的项目来说是最大的优势。2.2sm-crypto库浅析sm-crypto实现了SM2、SM3、SM4等国密算法。我们主要用它的SM2模块。它提供两套密钥体系基于BigInteger的内部处理和基于十六进制Hex字符串的外部接口。为了便于和后端对接后端通常接收Hex或Base64格式的密钥我们全程使用Hex字符串接口这样密钥和密文都可以用字符串形式传输非常方便。安装命令再简单不过npm install sm-crypto --save或者如果你用的HBuilder X创建的项目在项目根目录打开终端运行上面这行命令就行。3. 实战五部曲从零到一集成SM2理论说完直接上干货。下面这五个步骤你按顺序操作保证能跑起来。3.1 第一步创建与引入加密工具类良好的代码组织是成功的一半。我习惯在utils目录下创建一个独立的加密工具文件这样业务代码里调用起来清晰以后维护也方便。在/utils目录下新建文件sm2Crypto.js。写入以下基础代码// /utils/sm2Crypto.js import { sm2 } from sm-crypto; // 这里先定义空对象密钥对将在下一步生成后替换 const publicKey ; // 公钥用于加密 const privateKey ; // 私钥用于解密**务必保密仅前端解密时使用** /** * SM2加密使用公钥 * param {string} plainText - 待加密的明文 * param {string} cipherMode - 加密模式默认1 (C1C3C2格式)可选0 (C1C2C3) * returns {string} 加密后的16进制字符串密文 */ export function encryptSM2(plainText, cipherMode 1) { if (!publicKey) { console.error(SM2公钥未配置); return null; } // 注意sm2.doEncrypt默认输出16进制字符串与公钥格式匹配 return sm2.doEncrypt(plainText, publicKey, cipherMode); } /** * SM2解密使用私钥 * param {string} cipherTextHex - 16进制格式的密文 * param {string} cipherMode - 解密模式需与加密时一致 * returns {string} 解密后的明文 */ export function decryptSM2(cipherTextHex, cipherMode 1) { if (!privateKey) { console.error(SM2私钥未配置); return null; } return sm2.doDecrypt(cipherTextHex, privateKey, cipherMode); // 输出解密后的字符串 } // 可选导出密钥对生成函数用于临时测试或动态密钥场景 export function generateKeyPairHex() { const keyPair sm2.generateKeyPairHex(); return { publicKey: keyPair.publicKey, // 04开头的130位16进制串 privateKey: keyPair.privateKey // 64位16进制串 }; } export default { encryptSM2, decryptSM2, generateKeyPairHex };这个工具类提供了加密、解密和生成密钥对三个核心方法。现在公钥和私钥是空的我们马上来生成它。3.2 第二步生成SM2密钥对并妥善保管SM2是非对称加密加密和解密用的是不同的钥匙。公钥可以公开用来加密数据私钥必须严格保密用来解密。绝对不要把私钥硬编码在提交到代码仓库的前端代码里这是严重的安全漏洞。我们的策略是公钥放在前端配置中用于加密私钥则通过安全的方式提供给前端解密使用通常仅限于非常特殊的本地解密场景更多时候解密应由后端负责。对于前端加密、后端解密的典型场景我们只需生成一对密钥将公钥给前端私钥交给后端保存。如何生成你可以用我们工具类里的generateKeyPairHex函数写一段临时代码跑一下。我通常在项目里新建一个临时页面或直接在浏览器控制台里测试// 临时测试代码在控制台运行或写在某个临时vue页面的mounted里 import { generateKeyPairHex } from /utils/sm2Crypto.js; const keyPair generateKeyPairHex(); console.log( 请妥善保存以下密钥对 ); console.log(公钥 (publicKey):, keyPair.publicKey); console.log(私钥 (privateKey):, keyPair.privateKey); console.log();运行后控制台会打印出类似下面的信息公钥 (publicKey): 04bb34...很长的一串130位16进制数以04开头 私钥 (privateKey): 5a1d6...64位16进制数关键操作复制公钥将输出的公钥字符串复制并粘贴到/utils/sm2Crypto.js文件中赋值给const publicKey变量。备份私钥将私钥字符串安全地交给后端同事。他们需要将其配置在服务器的安全环境中用于解密前端传过来的数据。前端代码里不要保留私钥除非你有绝对安全的存储方案如App端使用安全存储SDK。实操心得密钥对一旦生成并投入使用就不要轻易更换。更换意味着之前用旧公钥加密的数据必须用旧私钥才能解密。所以最好在项目初期就确定好并做好备份。3.3 第三步在业务页面中调用加密假设我们有一个登录页面需要加密用户的密码后再发送给后端。看看在Vue页面里多简单。template view classcontent input v-modelusername placeholder请输入用户名 / input v-modelpassword typepassword placeholder请输入密码 / button clickhandleLogin登录/button /view /template script // 1. 引入我们写好的工具函数 import { encryptSM2 } from /utils/sm2Crypto.js; export default { data() { return { username: , password: }; }, methods: { async handleLogin() { if (!this.password) { uni.showToast({ title: 密码不能为空, icon: none }); return; } // 2. 加密密码 let encryptedPwd ; try { encryptedPwd encryptSM2(this.password); if (!encryptedPwd) { throw new Error(加密失败公钥可能未配置); } console.log(加密后密文Hex:, encryptedPwd); } catch (error) { console.error(加密过程出错:, error); uni.showToast({ title: 加密失败请稍后重试, icon: none }); return; } // 3. 将加密后的密文发送给后端 // 这里使用uni.request实际项目你可能用封装好的http模块 uni.request({ url: https://your-api-domain.com/login, method: POST, data: { username: this.username, password: encryptedPwd // 注意这里传的是加密后的密文字符串 }, success: (res) { // 处理登录成功逻辑 console.log(登录响应:, res.data); }, fail: (err) { console.error(登录请求失败:, err); } }); } } }; /script看核心加密逻辑就一行encryptSM2(this.password)。加密后得到的encryptedPwd是一个长长的十六进制字符串这就是安全的密文即使在网络传输中被截获没有对应的私钥也无法破解。3.4 第四步处理后端返回的加密数据解密有些场景下后端可能会返回一些用前端公钥加密过的敏感信息虽然较少见或者你需要在前端验证某些加密数据。这时就需要用到解密功能。再次强调前端解密需谨慎确保私钥的存储安全。假设我们工具类里的privateKey已经通过某种安全方式注入例如在App启动时从安全服务器动态获取并存入内存不落盘我们可以这样解密script import { decryptSM2 } from /utils/sm2Crypto.js; export default { methods: { async handleEncryptedDataFromBackend(encryptedDataHex) { try { const decryptedText decryptSM2(encryptedDataHex); console.log(解密后的内容:, decryptedText); // ... 使用解密后的数据 } catch (error) { console.error(解密失败:, error); // 可能是密文格式错误、私钥不匹配或模式不对 } } } }; /script注意事项前端解密的场景非常有限。更常见的流程是后端用他自己的密钥对加密数据给前端前端只负责展示。将解密私钥放在前端即使动态获取也增加了风险。务必与后端架构师确认数据流的安全设计。3.5 第五步多端兼容性测试与打包UniApp项目最终可能要发布到H5、微信小程序、App等多个平台。加密功能在所有平台都必须正常工作。H5平台直接在浏览器运行测试一般没问题。注意检查控制台是否有sm-crypto相关的报错。微信小程序这是最容易出问题的地方。运行到微信开发者工具。可能遇到的坑小程序环境对crypto相关的全局变量有限制但sm-crypto库已经处理了大部分兼容性问题。如果遇到Buffer is not defined之类的错误可能需要检查uni-app的编译配置。幸运的是在近期版本的uni-app和sm-crypto中我还没碰到这个问题。测试方法在小程序页面执行加密查看密文输出是否正常并尝试将密文发送给你的后端接口确认后端能成功解密。App平台真机调试。无论是Android还是iOS核心的JavaScript引擎都能正确执行加密代码。注意App端如果涉及更安全的密钥存储需要调用plus.storage或原生插件但那超出了本文“5分钟搞定”的范围。打包检查运行npm run build:mp-weixin或通过HBuilderX发行时观察编译日志是否有关于sm-crypto的警告。只要没报错打包后的产物就应该包含加密库。4. 深入原理与性能优化如果你只想实现功能第三部分已经足够了。但如果你想用得更好、更稳下面这些原理和优化点值得了解。4.1 SM2加密模式C1C3C2 vs C1C2C3在加密函数encryptSM2中有一个cipherMode参数默认为1。这指的是国密标准中规定的两种密文结构顺序模式1 (cipherMode 1)输出密文顺序为C1 | C3 | C2。这是目前最常用、也是sm-crypto默认的模式。模式0 (cipherMode 0)输出密文顺序为C1 | C2 | C3。这里的C1是椭圆曲线上的一个点代表临时公钥C2是加密后的密文C3是SM3算法生成的摘要值用于校验。关键点加密和解密必须使用相同的模式如果你的后端使用的是JavaBouncyCastle库、Go或PHP等语言你需要确认后端库默认支持哪种模式。sm-crypto默认是模式1。如果后端解密失败首先检查双方的模式是否一致。这是联调时最高频的坑。4.2 加密内容长度限制与处理SM2算法本身对加密的明文长度有限制。具体限制与选择的椭圆曲线参数有关。对于常见的sm2p256v1曲线当使用sm-crypto的doEncrypt方法时它能处理的明文长度是有限的。经过测试直接加密过长的字符串例如一篇长文章可能会失败。解决方案是对长内容采用“SM2加密对称密钥对称密钥加密内容”的混合加密体系。前端随机生成一个AES密钥key。用SM2公钥加密这个AES密钥得到encryptedKey。用这个AES密钥加密实际的长文本数据得到encryptedData。将encryptedKey和encryptedData一起发送给后端。后端用SM2私钥解密encryptedKey得到AES密钥再用AES密钥解密encryptedData。这样既利用了SM2的非对称安全性又解决了长度限制和性能问题。不过这需要前后端同时支持AES加解密复杂度提升。对于登录密码、身份证号等短文本直接SM2加密完全足够。4.3 性能实测与优化建议在微信开发者工具和真机上我对加密一个约20字符的密码进行了简单测试耗时单次加密操作在1-3毫秒之间对用户体验无任何影响。内存无显著内存增长。优化建议避免频繁生成密钥对密钥对生成操作比加密解密更耗资源。应在应用初始化时生成一次或使用固定密钥而不是每次加密都生成。大文件分片加密如果真有在前端加密大文件的需求如图片、文档务必采用上述混合加密方案并对文件进行分片处理避免阻塞主线程。Web Worker对于计算密集型操作如批量加密可以考虑使用Web Worker将加密任务放到后台线程防止页面卡顿。不过在小程序环境中使用Worker有限制需查阅最新文档。5. 联调与线上问题排查实录功能集成好了和后台联调才是“魔鬼”开始的阶段。下面是我踩过的一些坑和解决方案。5.1 常见联调问题速查表问题现象可能原因排查步骤与解决方案后端解密失败报“无效密文”、“解密错误”1.加密模式不匹配(最常见)2. 公钥格式错误或前后端不一致3. 密文在传输过程中被编码处理如被URL encode1.确认模式前端encryptSM2的cipherMode与后端解密使用的模式必须一致。先用默认值1联调。2.核对公钥确保前端使用的公钥是完整的、以04开头的130位Hex字符串且与后端生成的公钥对匹配。3.检查传输确保uni.request发送的data中的密文字符串是“原样”发送没有多余的转义。可以打印出发送前的密文和接收到的密文进行比对。前端加密报错如“公钥格式错误”1. 公钥变量未正确赋值或为空2. 公钥字符串格式不正确长度不对、包含非法字符1. 检查sm2Crypto.js中publicKey常量是否已正确粘贴。2. 确认公钥是sm2.generateKeyPairHex()生成的publicKey属性值通常是04开头。小程序端加密功能正常但App端报错或无效1. App端JavaScript引擎差异2. 三方库在App端兼容性问题较少见1. 尝试在main.js或App.vue的早期生命周期中引入并执行一次简单的加密测试基础功能。2. 检查是否使用了App端不支持的API本例中sm-crypto是纯JS通常没问题。3. 真机调试查看Console日志。加密后数据长度异常正常现象。SM2加密后密文会比原文长很多因为包含了曲线点C1和摘要C3。向产品经理或测试同学解释这是非对称加密的特性密文变长是安全的体现不是bug。在Vue3的script setup语法糖中引入报错构建工具对ES模块的解析问题尝试更换引入方式import smCrypto from sm-crypto;然后使用smCrypto.sm2。或者检查uni-app编译配置。5.2 加密数据上送前的最后检查在点击“登录”或“提交”按钮前你可以通过以下代码片段快速验证加密链路是否通畅// 在你的页面方法中添加一个测试函数 testSM2Flow() { const testText HelloSM2123; console.log(测试明文:, testText); const encrypted this.$sm2.encrypt(testText); // 假设你全局注入了$sm2 console.log(加密结果Hex:, encrypted); // 如果你配置了私钥仅用于调试 // const decrypted this.$sm2.decrypt(encrypted); // console.log(解密结果:, decrypted); // console.assert(testText decrypted, 加密解密环路测试失败); // 更安全的做法将加密后的密文发送给一个专门的后端测试接口 uni.request({ url: https://your-api.com/test-decrypt, method: POST, data: { cipherText: encrypted }, success: (res) { if(res.data.decryptedText testText) { console.log(✅ 前后端加解密联调成功); } else { console.error(❌ 后端解密结果与原文不符, res.data); } } }); }这个测试能一次性验证前端加密库是否工作、公钥是否正确、网络传输是否导致数据变化、后端解密逻辑是否匹配。5.3 线上安全增强建议“5分钟搞定”是让你快速跑通流程。实际上线还需要考虑更多公钥动态化不要硬编码公钥。可以在App启动或页面加载时从后端接口获取一个“时效性公钥”。这样即使公钥泄露也可以定期更换降低风险。防重放攻击加密传输解决了窃听问题但防止请求被重复提交重放攻击还需要其他手段。常见的做法是在加密数据中加入时间戳timestamp和随机数nonce后端校验请求的时效性和唯一性。完整性校验SM2加密本身包含了C3摘要能校验数据完整性。但在业务层面可以考虑对整体请求包再计算一次HMAC-SM3签名由后端验证实现“加密签名”的双重保护。混淆与压缩对于特别敏感的数据可以在SM2加密前先对明文进行简单的自定义混淆或压缩增加一层安全性但这不属于密码学范畴不能替代加密。6. 总结与扩展方向走到这里你已经成功在UniApp项目中集成了国密SM2加密并且了解了背后的原理和避坑指南。回顾一下核心选用sm-crypto库、生成并配置密钥对、封装工具类、在业务中调用加密方法、注意加解密模式匹配。这个方案的优势在于轻量、全端兼容、开箱即用能满足绝大多数需要对敏感数据进行非对称加密传输的场景。无论是政务、金融、还是对数据安全有要求的商业应用都能快速满足合规性需求。后续可以探索的扩展方向集成SM3/SM4sm-crypto同样提供了SM3杂凑算法类似MD5/SHA-256和SM4对称加密算法类似AES。你可以根据需求构建更完整的国密算法套件。例如用SM3做数据摘要用SM4加密大量数据。结合uni-app插件市场搜索“国密”、“SM2”可能会有封装得更完善的uni-app插件提供更便捷的API或更好的多端适配可以评估后选用。原生插件开发如果对性能和安全性有极致要求可以考虑开发原生插件在iOS/Android底层调用硬件加密模块来执行SM2运算但这需要原生开发能力。最后一点个人体会技术选型没有银弹。sm-crypto的纯JS方案在方便性和兼容性上做到了最佳平衡对于UniApp开发者来说是首选。当你和后台联调遇到问题时第一个要怀疑的就是加密模式和密钥是否配对这两个点能解决90%的联调故障。希望这篇从实战中总结的指南能帮你真正高效、稳妥地搞定UniApp中的国密加密需求。
![[C++]内存管理：串顺序存储的内存回收](http://pic.xiahunao.cn/yaotu/[C++]内存管理：串顺序存储的内存回收)
