18.1 国密算法概述

国密即国家密码局认定的国产密码算法。主要有SM1，SM2，SM3，SM4。

18.1.1 SM1算法

SM1 为对称加密。其加密强度与AES相当。该算法不公开，调用该算法时，需要通过加密芯片的接口进行调用。

18.1.2 SM2算法

SM2为非对称加密的公钥密码算法，是我国自主设计的椭圆曲线公钥密码算法，该算法基于256位比特（32字节）ECC，安全强度比RSA 2048位高，签名速度与秘钥生成速度都快于RSA。该算法已公开。

在实际使用非对称加密时，一般是后端生成密钥对，将公钥交给前端，前端用公钥加密数据，后端用私钥对数据解密。在有些项目中，没有使用HTTPS的时候，登录的口令（用户名/密码），需要进行加密传输的需求，这时候我们就需要采用非对称加密来实现。

18.1.3 SM3算法

SM3为消息摘要算法，可用于数字签名、消息认证、验证数据完整性等，可以用MD5 或 SHA-1 算法作为对比理解，但SM3安全度更高，校验结果为256位比特（32字节）。该算法已公开。

18.1.4 SM4算法

SM4是传统的对称加密算法，类似于 DES 或 AES。它的密钥长度和分组长度均为128位，若消息长度过长，需要进行分组，在同一密钥控制下逐组进行加密，若消息长度不足，则要进行填充。

18.2 前端国密算法库

我们在前端选择sm-crypto项目实现国密算法。该项目的地址为https://github.com/JuneAndGreen/sm-crypto。

18.2.1 安装

  1. $ tyarn add sm-crypto
  2. 或
  3. $ cnpm install --save sm-crypto

18.2.2 SM2加密解密

本节是使用sm-crypto算法库实现SM2算法加密解密的示例代码。

  • 获取密钥对 ```javascript const sm2 = require(‘sm-crypto’).sm2

let keypair = sm2.generateKeyPairHex()

publicKey = keypair.publicKey // 公钥 privateKey = keypair.privateKey // 私钥

  2. - 加密解密
  3. ```javascript
  4. const sm2 = require('sm-crypto').sm2
  5. const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1
  7. // 加密结果
  8. let encryptData = sm2.doEncrypt(msgString, publicKey, cipherMode) 
  9. // 解密结果
  10. let decryptData = sm2.doDecrypt(encryptData, privateKey, cipherMode)
  • 签名验签

    ps：理论上来说，只做纯签名是最快的。

  1. const sm2 = require('sm-crypto').sm2
  3. // 纯签名
  4. let sigValueHex = sm2.doSignature(msg, privateKey) // 签名
  5. let verifyResult = sm2.doVerifySignature(msg, sigValueHex, publicKey) // 验签结果
  7. // 纯签名 + 生成椭圆曲线点
  8. let sigValueHex2 = sm2.doSignature(msg, privateKey, {
  9.   // 传入事先已生成好的椭圆曲线点，可加快签名速度
  10.   pointPool: [sm2.getPoint(), sm2.getPoint(), sm2.getPoint(), sm2.getPoint()], 
  11. }) // 签名
  12. let verifyResult2 = sm2.doVerifySignature(msg, sigValueHex2, publicKey) // 验签结果
  14. // 纯签名 + 生成椭圆曲线点 + der编解码
  15. let sigValueHex3 = sm2.doSignature(msg, privateKey, {
  16.   der: true,
  17. }) // 签名
  18. let verifyResult3 = sm2.doVerifySignature(msg, sigValueHex3, publicKey, {
  19.     der: true,
  20. }) // 验签结果
  22. // 纯签名 + 生成椭圆曲线点 + sm3杂凑
  23. let sigValueHex4 = sm2.doSignature(msg, privateKey, {
  24.   hash: true,
  25. }) // 签名
  26. let verifyResult4 = sm2.doVerifySignature(msg, sigValueHex4, publicKey, {
  27.   hash: true,
  28. }) // 验签结果
  30. // 纯签名 + 生成椭圆曲线点 + sm3杂凑（不做公钥推导）
  31. let sigValueHex5 = sm2.doSignature(msg, privateKey, {
  32.   hash: true,
  33.   //传入公钥的话，可以去掉sm3杂凑中推导公钥的过程，
  34.   //速度会比纯签名 + 生成椭圆曲线点 + sm3杂凑快
  35.   publicKey, 
  36. })
  37. let verifyResult5 = sm2.doVerifySignature(msg, sigValueHex5, publicKey, {
  38.   hash: true,
  39.   publicKey,
  40. })
  42. // 纯签名 + 生成椭圆曲线点 + sm3杂凑 + 不做公钥推 + 添加 userId（长度小于 8192）
  43. // 默认 userId 值为 1234567812345678
  44. let sigValueHex6 = sm2.doSignature(msgString, privateKey, {
  45.   hash: true,
  46.   publicKey,
  47.   userId: 'testUserId',
  48. })
  49. let verifyResult6 = sm2.doVerifySignature(msgString, sigValueHex6, publicKey, {
  50.   hash: true,
  51.   userId: 'testUserId',
  52. })
  • 获取椭圆曲线点 ```javascript const sm2 = require(‘sm-crypto’).sm2

let poin = sm2.getPoint() // 获取一个椭圆曲线点，可在sm2签名时传入

  1. <a name="o1ai7"></a>
  2. ### 18.2.3 SM3加密
  3. 本节是使用`sm-crypto`算法库实现SM3算法加密的示例代码（摘要算法是单向的）。
  4. ```javascript
  5. const sm3 = require('sm-crypto').sm3
  7. let hashData = sm3('abc') // 杂凑

18.2.4 SM4加密解密

本节是使用sm-crypto算法库实现SM4算法加密解密的示例代码。

  • 加密 ```javascript const sm4 = require(‘sm-crypto’).sm4 // 可以为 utf8 串或字节数组 const msg = ‘hello world! 我是 juneandgreen.’ // 可以为 16 进制串或字节数组，要求为 128 比特 const key = ‘0123456789abcdeffedcba9876543210’

// 加密，默认输出 16 进制字符串，默认使用 pkcs#5 填充 let encryptData = sm4.encrypt(msg, key) // 加密，不使用 padding let encryptData = sm4.encrypt(msg, key, {padding: ‘none’}) // 加密，不使用 padding，输出为字节数组 let encryptData = sm4.encrypt(msg, key, {padding: ‘none’, output: ‘array’}) 

  2. - 解密
  3. ```javascript
  4. const sm4 = require('sm-crypto').sm4
  5. // 可以为 16 进制串或字节数组
  6. const encryptData = '0e395deb10f6e8a17e17823e1fd9bd98a1bff1df508b5b8a1efb79ec633d1bb129432ac1b74972dbe97bab04f024e89c' 
  7. // 可以为 16 进制串或字节数组，要求为 128 比特
  8. const key = '0123456789abcdeffedcba9876543210' 
  10. // 解密，默认输出 utf8 字符串，默认使用 pkcs#5 填充
  11. let decryptData = sm4.decrypt(encryptData, key) 
  12. // 解密，不使用 padding
  13. let decryptData = sm4.decrypt(encryptData, key, {padding: 'none'}) 
  14. // 解密，不使用 padding，输出为字节数组
  15. let decryptData = sm4.decrypt(encryptData, key, {padding: 'none', output: 'array'})

18.3 在前端应用国密算法的实例

18.3.1 配置路由

config/routes.ts

  1.   {
  2.     name: '加密解密',
  3.     icon: 'lock',
  4.     path: '/crypto',
  5.     component: './Crypto',
  6.   },

18.3.2 前端代码

建立新的目录和文件src/pages/Crypto/index.tsx

  1. import React from 'react';
  2. import { PageContainer } from '@ant-design/pro-layout';
  3. import { request } from 'umi';
  4. import { Form, notification } from 'antd';
  5. import ProCard from '@ant-design/pro-card';
  6. import ProForm, {
  7.   ProFormProps,
  8.   ProFormText,
  9.   ProFormRadio,
  10.   ProFormTextArea,
  11. } from '@ant-design/pro-form';
  13. //之前用sm2.generateKeyPairHex()计算密钥对后的公钥
  14. const publicKey = "04ac0d181497f663c38ecc246183085a272f28c2842aa739fe087cd607d9b32d3dc3f897f45baf4c3196e670437e4af00b935cd263370f028563ff830229007a18"
  15. //可以为 16 进制串或字节数组，要求为 128 比特
  16. const key = '0123456789abcdeffedcba9876543210'
  18. async function sendEncryptData(algorithm:number, encryptData:string) {
  19.   try {
  20.     const result = await request('/api/decryptData', {
  21.       method: 'POST',
  22.       data: {
  23.         algorithm,
  24.         encryptData,
  25.       }
  26.     })
  27.     if(result.success) {
  28.       const options = {
  29.         message: '解密结果',
  30.         description: result.decryptData,
  31.       }
  33.       if(result.decryptSuccess)
  34.         notification.info(options)
  35.       else
  36.         notification.error(options)
  37.     }
  38.   } catch(e) {
  39.   }
  40. }
  42. const cryptoPage: React.FC = () => {
  43.   const [form] = Form.useForm();
  44.   const FormProps: ProFormProps = {
  45.     form,
  46.     layout: "horizontal",
  47.     initialValues: {
  48.       algorithm: 3,
  49.       message: 'password',
  50.     },
  51.     submitter: {
  52.       searchConfig: {
  53.         submitText: '加密后发送',
  54.       },
  55.     },
  56.     onValuesChange: (changedValus) => {
  57.       if(changedValus.algorithm === 3)
  58.         form.setFieldsValue({
  59.           message: 'password'
  60.         })
  61.       else if(changedValus.algorithm != undefined)
  62.         form.setFieldsValue({
  63.           message: ''
  64.         })
  65.     },
  66.     onFinish: async (formData: any) => {
  67.       let encryptData = ''
  68.       const { algorithm, message } = formData
  70.       switch(algorithm) {
  71.         case 2:
  72.           //非对称加密
  73.           const sm2 = require('sm-crypto').sm2
  74.           const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1
  75.           encryptData = sm2.doEncrypt(message, publicKey, cipherMode)
  76.           break;
  77.         case 4:
  78.           //对称加密
  79.           const sm4 = require('sm-crypto').sm4
  80.           //加密，默认输出 16 进制字符串，默认使用 pkcs#5 填充
  81.           encryptData = sm4.encrypt(message, key) 
  82.           break;
  83.         default:
  84.           // 杂凑
  85.           const sm3 = require('sm-crypto').sm3
  86.           encryptData = sm3(message)
  87.       }
  89.       form.setFieldsValue({
  90.         encryptResult: encryptData
  91.       })
  92.       sendEncryptData(algorithm, encryptData)
  93.     },
  94.   }
  96.   return (
  97.     <PageContainer header={{breadcrumb: {},}} title="国密加密解密">
  98.       <ProCard>
  99.         <ProForm {...FormProps}>
  100.           <ProFormRadio.Group name="algorithm" 
  101.             label="算法类型" 
  102.             options={[
  103.               { value: 2, label: 'SM2 非对称加密' },
  104.               { value: 3, label: 'SM3 摘要算法' },
  105.               { value: 4, label: 'SM4 对称加密' },
  106.             ]} />
  107.           <ProFormText name="message" 
  108.             label="明文内容" 
  109.             fieldProps ={{ autoComplete:"off" }}/>
  110.           <ProFormTextArea name="encryptResult" 
  111.             label="加密结果" disabled={true} />
  112.         </ProForm>
  113.       </ProCard>
  114.     </PageContainer>
  115.   )
  116. }
  118. export default cryptoPage;

image.png

18.3.3 配套的Mock代码

mock/crypto.ts

  1. import { Request, Response } from 'express';
  3. function decryptData(req: Request, res: Response, u: string) {
  4.   const key = '0123456789abcdeffedcba9876543210'
  5.   //const keypair = sm2.generateKeyPairHex()
  6.   const privateKey = "72b7015c42fc937d6a7197a5595c13ed683e87d32ea6180514740d6263b3c88d"
  7.   const { algorithm=3, encryptData=''} = {...req.body}
  8.   const result = {
  9.     success: true,
  10.     decryptSuccess: true,
  11.     decryptData: '',
  12.   }
  14.   switch(algorithm) {
  15.     case 2:
  16.       const sm2 = require('sm-crypto').sm2
  17.       const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1
  18.       result.decryptData = sm2.doDecrypt(encryptData, privateKey, cipherMode) 
  19.       break;
  20.     case 4:
  21.       const sm4 = require('sm-crypto').sm4
  22.       result.decryptData = sm4.decrypt(encryptData, key)
  23.       break;
  24.     default:
  25.       const sm3 = require('sm-crypto').sm3
  26.       if(encryptData == sm3('password'))
  27.         result.decryptData = '哈希计算结果一致'
  28.       else {
  29.         result.decryptSuccess = false
  30.         result.decryptData = '哈希计算结果不一致' 
  31.       }
  32.   }
  34.   return res.json(result);
  35. }
  37. export default {
  38.   'POST /api/decryptData': decryptData,
  39. };

18.4 使用SM2和SM3保护用户密码

18.4.1 处理逻辑

我们可以组合使用SM2和SM3保护用户密码，以实现不在后端保存明文密码和不通过网络传递明文密码的两个目标：

  1. 后端保存用户密码经SM3算法计算后的哈希值
  2. 前端使用SM2算法的公钥加密用户密码后传输
  3. 后端使用SM2算法的私钥解密收到的用户密码
  4. 后端使用SM3算法计算用户密码的哈希值
  5. 后端判断新计算的哈希值与之前保存的结果是否一致

    18.4.2 在前端加密用户密码

    在pages/user/Login/index.tsx中修改登录部分的代码 ```diff
  • const loginResult = await login({ …values, type: loginType });
  • const publicKey = “04ac0d181497f663c38ecc246183085a272f28c2842aa739fe087cd607d9b32d3dc3f897f45baf4c3196e670437e4af00b935cd263370f028563ff830229007a18”
  • let { password, …rest } = values +
  • if(password != undefined) {
  • const sm2 = require(‘sm-crypto’).sm2
  • const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1
  • password = sm2.doEncrypt(password, publicKey, cipherMode)
  • }
  • const loginResult = await login({ …rest, password, type: loginType }); ```

    18.4.3 Mock中解密和计算哈希

    在mock/user.ts中修改登录响应函数（请自行仔细比较代码的变化）
  1. const privateKey = "72b7015c42fc937d6a7197a5595c13ed683e87d32ea6180514740d6263b3c88d"
  2. //字符串admin经过SM3进行哈希计算后的结果
  3. const adminHash = "dc1fd00e3eeeb940ff46f457bf97d66ba7fcc36e0b20802383de142860e76ae6"
  4. //字符串user经过SM3进行哈希计算后的结果
  5. const userHash = "92e7fbdcca8b9f36be0638e48e77cbeeb49ef15886b6cd12d46e09d74a232a81"
  7. async function login(req: Request, res: Response) {
  8.   let { password, username, captcha, type } = req.body;
  9.   const result:TYPE.QueryResult & {type:string} = {
  10.     success: true,
  11.     type,
  12.     data: {}
  13.   }
  15.   console.log("body = ", req.body)
  16.   await waitTime(2000);
  18.   if(type === 'account') {
  19.     if(password != undefined ) {
  20.       //解密获得加密前的明文密码
  21.       const sm2 = require('sm-crypto').sm2
  22.       const cipherMode = 1 // 1 - C1C3C2，0 - C1C2C3，默认为1
  23.       password = sm2.doDecrypt(password, privateKey, cipherMode) // 解密结果
  25.       //计算前端密码的哈希值
  26.       const sm3 = require('sm-crypto').sm3
  27.       password = sm3(password)
  28.     }
  30.     //将前端密码的哈希值与后端保存的对比
  31.     if (username === 'admin' && password === adminHash ) {
  32.       result.data['token'] = makeToken(username)
  33.     }
  34.     if (username === 'user' && password === userHash ) {
  35.       result.data['token'] = makeToken(username)
  36.     }
  37.   } else {
  38.     if(currentCaptcha != captcha) {
  39.       result.success = false;
  40.       result.errorMessage = '验证码错误'
  41.     } else
  42.       result.data['token'] = makeToken()
  43.   }
  45.   return res.json(result);
  46. }

18.5 参考信息

版权说明：本文由北京朗思云网科技股份有限公司原创，向互联网开放全部内容但保留所有权力。