在Angular 7中实现bcrypt

Question

在Angular 7中实现bcrypt

angularangular7bcrypt

10

我想在Angular7中使用bcrypt将加密的密码存储在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中的方法？

- Pranav S

bcrypt方法是异步的，您需要传递回调函数或解决承诺。 - jonrsharpe

1

你为什么要在客户端进行加密？ - Jonas Praem

@jonrsharpe，你能给我一个例子吗？我刚接触Angular。 - Pranav S

这与Angular没有什么关系，bcrypt文档展示了如何与他们的API交互。 - jonrsharpe

@JonasPraem 我正在学习Angular，我的目标是在将密码发送到API（Python）之前对其进行加密，然后将加密后的密码存储到数据库中。 - Pranav S

显示剩余5条评论

5个回答

1

在Angular应用中使用bcrypt的方法。

首先，仅仅通过“npm install bcrypt”安装bcrypt并不能使它在Angular应用中工作。因为bcrypt本身有两个依赖项，分别是：

node-pre-gyp
Native Abstractions for Node.js

如果你安装了这两个依赖项，那么你的应用程序可能会与bcrypt一起工作。

我在Angular应用中使用bcrypt的方式是：使用“npm install bcryptjs --save”来安装bcrypt-js。

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

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

由于我们正在使用浏览器，所以Angular的Node.js没有一个名为“crypto”的模块，因为bcrypt需要一个模块来使用此crypto模块创建安全的随机数，所以你将在应用程序中收到警告“未找到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/。

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

我希望你能理解。

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

- Amarjit Kumar

2- Native Abstractions for Node.js 是什么？ - Sh eldeeb

0

是的，你可以使用 npm install bcryptjs --save 代替 npm install bcrypt --save

bcryptjs 不会出现错误，所以你可以在 Angular 中使用它。

- Madhan

0

你可以使用sha.js：其余的就看你自己了 :)

npm install --save sha.js

import * as shajs from 'sha.js';

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

- Nadeeshan Herath

0

你可以在终端中安装* npm install bcryptjs *来获取bcryptjs库。
下一步是将旧的（import * as bcrypt from 'bcrypt';）更改为新的：
import * as bcrypt from 'bcryptjs';
使用相同的方法，我没有遇到任何问题。
例如：

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

- Azueon

有一个原则叫做KISS，保持简单。这个“if”语句太复杂了，必须尽可能简化。 - Sham Fiorin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lorenago · Accepted Answer

您可以安装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
  }

希望这对某些人有所帮助。