如何在Angular中使用BCrypt / Bcryptjs？

Question

import { Component, OnInit } from '@angular/core';
import { FormGroup, NgForm } from '@angular/forms';
import * as bcrypt from 'bcryptjs';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {

  constructor() { }


  val = {
    firstName: '',
    lastName: '',
    phoneNumber: '',
    username: '',
    password: ''
  }

  ngOnInit(): void {
  }

  isDisplay = false;
  toggleDisplay() {
    this.isDisplay = !this.isDisplay;
  }

  onSubmit(v: NgForm) {
    console.log(v.value, v.valid);
    console.log(this.val);

    // const salt = bcrypt.genSaltSync(10);
    // const pass = bcrypt.hashSync(this.val.password, salt);
    //delete const if not working
  }
}

我们被要求在大学的项目中使用BCrypt。我想知道如何console.log或检查密码，如果已经散列。

我已经安装了npm install bcryptjs和npm install @types/bcrypt

谢谢!

Answer 1

Angular是一个前端框架，因此可以被最终用户欺骗。你永远不应该相信用户的输入，所以Angular不是你检查密码哈希状态的地方。相反，您应该在服务器中执行此操作。bcryptjs library公开了compare()函数，该函数可用于将明文密码与散列密码进行比较。如果此函数返回true，则认为给定的密码是正确的。

示例：

const bcrypt = require('bcryptjs');
bcrypt.compare('<plain_password>', '<hashed_password>').then((isCorrect) => {
  console.log(isCorrect); // should be true for correct password, false otherwise
});