HarmonyOS系统应用--密码加密与认证和UI的组建

HarmonyOS系统应用–密码加密与认证MD5技术

---

一、MD5简介

MD5(32位)的加密是不可逆的，但是破解的网站通过数据的存储方式,根据密钥进行查询查询破解的数据。
在我们自己使用时，为了防止被破解通常会加入salt(盐)，并将此保存至数据库,根据salt(盐)再次生成MD5，此刻就生成了自己的加密方式。
MD5:一般在注册账号密码等隐私性的数据使用

二、引入依赖 ：@ohos/crypto-js

使用之前：先将依赖加入进来：
1.找到oh-package.json5的文件,考虑一下是否只在本模块使用，若只是本模块使用引入在entry中的oh-package.json5中
,否则在外面的文件中添加。

格式：(记得同步一下，添加完在本页面编辑框上面有提示)
{
  "name": "entry",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {
    "@ohos/crypto-js": "2.0.0"
  }
}

三、加密

/**思路：
1.根据密码、账号生成salt盐--记得将生成的MD5值存储下来
2.根据salt盐、密码再次生成MD5值
*/
 1.密码、账号生成salt:
  	private getSalt(name: string, password: string): string {
  	 	if (!name) return ''
  	 	//CryptoJS导包  ：import CryptoJS from '@ohos/crypto-js'
   		return CryptoJS.MD5(name + password).toString()
  	}
 2.根据1生成的盐和密码,生成密码:
 	private getPass(salt: string, pass: string): string {
   		 return CryptoJS.MD5(`***${salt}${pass}***`).toString() // ***为自己生成规则,不加盐目前是可以进行查询破译的，因此添加一层
 	 }

四、密码认证

// 为什么不是解密：加密是不可逆的
/**思路：
1.根据salt盐、登录密码生成MD5值
2.将生成的值和数据库保存的MD5值进行判断是否相等,为了数据安全将特殊数据进行脱敏
*/
	const pass= this.getPass(salt, '登录密码')
      if ( pass === '数据库加密密码' ) {
        // 脱敏
        // 返回数据 将salt 和 密码进行脱敏
      }

	//调用方法和1中生成密码保持一致
     private getPass(salt: string, pass: string): string {
     	//CryptoJS导包  ：import CryptoJS from '@ohos/crypto-js'
   		 return CryptoJS.MD5(`***${salt}${pass}***`).toString() // ***为自己生成规则,不加盐目前是可以进行查询破译的，因此添加一层
 	 }

五、UI页面文本输入密码校验

1: 定义文本接收变量  
  private pass: string = '' // 密码
  private rePass: string = '' // 确认密码
2: 创建文本框
  Row() {
        TextInputView({ placeholder: '请输入账号', inputType: InputType.Normal,
          onChangeCallBack: (value: string) => {
            this.user.setAccountName(value)
          } })
      }

      Row() {
        TextInputView({ placeholder: '请输入密码', inputType: InputType.Password,
          onChangeCallBack: (value: string) => {
            this.pass = value
          } })
      }

      Row() {
        TextInputView({ placeholder: '请确认密码', inputType: InputType.Password,
          onChangeCallBack: (value: string) => {
            this.rePass = value
          } })
      }

3: 点击确认校验，并数据符合时，进行赋值
// 校验账号正则表达式
    if (!(this.user.getAccountName() && /^[A-Za-z][0-9A-Za-z]{5,19}$/.test(this.user.getAccountName()))) {
      showToast("账号错误")
      return
    }
    if (!(this.pass && /^[0-9A-Za-z]{6,20}$/.test(this.pass))) {
      showToast('密码错误')
      return
    }
    if (!(this.pass === this.rePass)) {
      showToast('2次密码不同')
      return
    }
    this.user.setUserPass(this.rePass)
    // 判断状态
    // 回调给页面