国密算法浏览器端实战：SM2/SM3/SM4前端实现的踩坑全记录

import { sm2 } from 'asmCrypto.js/dist/es2015/sm2.js';

// 生成密钥对
const keyPair = sm2.generateKeyPair();
const privateKey = keyPair.privateKey;
const publicKey = keyPair.publicKey;

// 签名
const message = 'sign this message';
const signature = sm2.sign(message, privateKey);

// 验签
const isValid = sm2.verify(message, signature, publicKey);
console.log('Signature valid:', isValid);  // true

import Module from './tongsuo.js';

const tongsuo = await Module({
  onRuntimeInitialized: () => {
    console.log('Tongsuo WASM initialized');
  }
});

// SM3 哈希
const msg = new Uint8Array([0x68, 0x65, 0x6c, 0x6c, 0x6f]);  // "hello"
const hash = tongsuo.Memory.alloc(32);
tongsuo.SM3(msg, msg.length, hash);
console.log('SM3:', tongsuo.Memory.readHex(hash, 32));

// SM4 加密（CBC 模式）
const key = tongsuo.Memory.alloc(16);
const iv = tongsuo.Memory.alloc(16);
const plaintext = new Uint8Array(16);  // 128-bit block
const ciphertext = tongsuo.Memory.alloc(32);
tongsuo.SM4_cbc_encrypt(plaintext, plaintext.length, key, iv, ciphertext);

<template>
  <div class="login">
    <input v-model="username" placeholder="用户名" />
    <button @click="handleLogin" :disabled="loading">
      {{ loading ? '登录中...' : '登录' }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { sm2 } from 'asmcrypto.js/dist/es2015/sm2.js';

const username = ref('');
const loading = ref(false);

// SM2 密钥对缓存（页面刷新后丢失，生产环境用 IndexedDB 持久化）
let keyPair = null;

async function generateKeyPair() {
  if (!keyPair) {
    keyPair = sm2.generateKeyPair();
  }
  return keyPair;
}

async function handleLogin() {
  loading.value = true;
  
  try {
    // 1. 获取或生成密钥对
    const { privateKey, publicKey } = await generateKeyPair();
    
    // 2. 上传公钥，获取挑战值
    const pubKeyHex = publicKey.toString('hex');
    const challengeResp = await fetch('/api/login/challenge', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username: username.value, publicKey: pubKeyHex })
    });
    const { challenge } = await challengeResp.json();
    
    // 3. 用私钥签名挑战值
    const signature = sm2.sign(challenge, privateKey);
    
    // 4. 发送签名给服务器验证
    const loginResp = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        username: username.value,
        publicKey: pubKeyHex,
        signature: signature.toString('hex')
      })
    });
    
    const { token } = await loginResp.json();
    localStorage.setItem('token', token);
    
  } catch (err) {
    console.error('登录失败:', err);
  } finally {
    loading.value = false;
  }
}
</script>

from gmssl import sm2, func

def verify_sm2_signature(public_key_hex: str, message: str, signature_hex: str) -> bool:
    """
    验签逻辑：
    1. 解析公钥（65字节，04前缀）
    2. 解析签名（64字节，R||S）
    3. 调用 gmssl 验签 API
    """
    # 公钥：去掉 04 前缀
    if public_key_hex.startswith('04'):
        public_key_hex = public_key_hex[2:]
    
    # 签名：R||S 格式
    sig_bytes = bytes.fromhex(signature_hex)
    if len(sig_bytes) != 64:
        raise ValueError(f"Invalid signature length: {len(sig_bytes)}")
    
    # gmssl 验签（内部自动计算 ZA 和 SM3 哈希）
    sm2_cipher = sm2.CryptSM2(
        public_key_hex,
        "FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFFFFFC2F"  # SM2 p
    )
    
    return sm2_cipher.verify(sig_bytes, message.encode('utf-8'))