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”安装bcrypt无效。因为bcrypt它本身具有2个依赖项，

node-pre-gyp
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需要一个模块来使用此加密模块创建安全的随机数，因此您将在应用程序中收到警告找不到“加密”模块。

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

您对此发表评论或将其放置在第二个try块下方。

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

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

希望您能理解

如有任何疑问，请ping我。

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中使用它

在Angular 7中实现bcrypt

5 个答案:

您在Angular应用中使用bcrypt的方式。

如果同时安装这两个软件，则您的应用程序可以与bcrypt一起使用。