在 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. node-pre-gyp
2. Node.js 的原生抽象

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

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

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

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

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

要摆脱此警告，您应该转到项目中的此文件位置， D:\<> ode_modules cryptjs\dist crypt.js，行号：70。

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

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

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

希望你能理解。

如有任何疑问请联系我。

Answer 3

您可以从终端安装 * npm install bcryptjs *。这样你就可以得到 bcryptjs 的库了。
下一步是将旧的（ import * as bcrypt from 'bcrypt'; ）更改为新的：
从 'bcryptjs' 导入 * 作为 bcrypt；
使用相同的方法，它没有给我带来任何问题。
示例：

    if ((user == users[i].username) && (bcrypt.compareSync(pass, users[i].password))) ok = true;

Answer 4

你可以使用sha.js：剩下的就看你了:)

npm install --save sha.js

import * as shajs from 'sha.js';

shajs('sha256').update({stringToBeHashed}).digest('hex')

Answer 5

是的，您可以使用 npm install bcryptjs --save 而不是 npm install bcrypt --save

bcryptjs 没有给出错误，所以你可以在 Angular 中使用它

Answer 6

Yo he probado lo que han commentado y me continua bado este error

类型上不存在属性“genSaltSync”

alguien tiene alguna 选项可导入“import * as bcrypt from 'bcryptjs';”

感谢您的阿尤达