在 Angular 7 中实现 bcrypt

Question

我正在尝试使用 bcrypt 和 Angular7 在 MySQL 中存储加密密码。

我曾经npm install bcrypt安装 bcrypt 并像这样导入它 import * as bcrypt from 'bcrypt';。

到目前为止，一切都编译正常；当我添加时它没有这样做bcrypt.hash()

login.component.ts 文件的完整代码如下：

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})

export class LoginComponent implements OnInit {

loginForm : FormGroup;
success = false;
loginFailed = false;

constructor(private formBuilder : FormBuilder) { }

ngOnInit() : void {

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

DoLogin()
{
    console.log(this.loginForm.value);

    pass = bcrypt.hash('Pass@123', 10); // App is not compliling when I add this line //
}

如何调用 bcrypt 中的方法？

Answer 1

您可以安装 bcryptjs ( npm install bcryptjs) 并使用以下代码：

import * as bcrypt from 'bcryptjs';

const salt = bcrypt.genSaltSync(10);
pass = bcrypt.hashSync(this.loginForm.value.password, salt);

您的代码必须如下所示：

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})

export class LoginComponent implements OnInit {

loginForm : FormGroup;
success = false;
loginFailed = false;

constructor(private formBuilder : FormBuilder) { }

ngOnInit() : void {

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

DoLogin()
{
    console.log(this.loginForm.value);

    const salt = bcrypt.genSaltSync(10);
    pass = bcrypt.hashSync('Pass@123', 10);
}

之后，如果出现Module not found: Error: Can't resolve 'crypto'...错误，则必须将此代码添加到 packaje.json 文件中：

"browser": {
    "fs": false,
    "path": false,
    "os": false,
    "crypto": false,
    "stream": false,
    "http": false,
    "tls": false,
    "zlib": false,
    "https": false,
    "net": false
  }

希望它对某人有所帮助。

Answer 2

在 Angular 应用程序中使用 bcrypt 的方式。

首先，单独使用“npm install bcrypt”为 Angular 应用程序安装 bcrypt 是行不通的。因为 bcrypt 它本身有 2 个依赖项，例如，

1. 节点前 gyp
2. Node.js 的本机抽象

如果您安装了这两个，那么您的应用程序就可以与 bcrypt 一起使用。

我在 Angular 应用程序中使用 bcrypt 的方式。我已经使用“npm install bcryptjs --save”安装了 bcrypt-js。

NODE.js 在node.js上，内置的加密模块的randomBytes接口用于获取安全随机数。

浏览器 在浏览器中，bcrypt.js 依赖 Web Crypto API 的 getRandomValues 接口来获取安全随机数。如果没有可用的加密安全随机源，您可以通过 bcrypt.setRandomFallback 指定一个。

正如我们在浏览器中使用的那样，Angulars node.js 没有名为“crypto”的模块，因为 bcrypt 需要一个模块来使用此加密模块创建安全随机数，因此您将在应用程序“crypto”中收到警告未找到模块。

要摆脱此警告，您应该转到项目中的此文件位置，D:\<>\node_modules\bcryptjs\dist\bcrypt.js，第 70 行。

要么对此进行评论，要么将该 try 块放置在第二个 try 块下方。

在该代码中发生的情况是，首先 bcrypt 尝试从“crypt”模块生成随机数，如果不是，那么它将使用 Web api 生成安全随机数，这是 url：https ://www.w3.org/TR/2017/REC-WebCryptoAPI-20170126/。

或者您可以编写自己的逻辑来提供随机数，但这不够安全。

我希望你明白。

如果您有任何疑问，请联系我。