国密加密SM4在Angular项目中的应用

近期项目提了个需求，需要用国密加密SM4算法对系统中的敏感数据进行加密，比如用户的登录密码，首先查询资料了解一下国密加密, 然后在github中搜索相关的库，最后选择sm-crypto来实现该功能。

1.在angular项目中安装依赖包；
angular 中默认使用的是ES模块化，而不是CommonJS模块化，因此不能直接使用教程中的require语法引入库,需额外安装@types/sm-crypto依赖

npm install --save  sm-crypto 
npm install --save @types/sm-crypto 

2.查看源码;
了解sm4函数的传参和逻辑

3.在需要加密的组件中引入sm-crypto

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { sm4 } from 'sm-crypto';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  public  loginForm: FormGroup;
  // 密钥一般由后端返回
  private SM4Key = '0123456789abcdeffedcba9876543210';
  constructor(
    private fb: FormBuilder
  ) {}

  ngOnInit(): void {
    this.loginForm = this.fb.group({
      username: ['', [Validators.required]],
      password: ['', [Validators.required]],
    });
  }

  public login() {
    // 对密码进行加密，加密模式和 padding 都可以跟后端约定好
    // encrypt 函数默认的是 cbc 模式，padding 默认是 pkcs#7 
    const password = sm4.encrypt(this.loginForm.value.password, this.SM4Key);
   }
}