反应加密密码

Question

我有以下组件可以在我的 firestore 数据库中传递数据。目前密码未加密，并且对数据库用户可见。因此我想加密它。但是，我得到错误

TypeError: Cannot read property 'encrypt' of undefined.

这是我将数据放入数据库的组件：

import React, {useState} from "react";
import fire from './fire.js';
import {userAuth} from './Main';
import '../style/inputPasswords.css';
import {encrypt} from './encryption';

const database = fire.firestore();

const InputPasswords = () => {

    const [title, setTitle] = useState("");
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();

        let encryptedPassword = encrypt(password);

        database.collection("password-"+userAuth).add({
            title: title,
            username: username,
            password: encryptedPassword
        })
        .then(() => {
            window.location.reload();
        })
        .catch((error) => {
            console.error(error);
        })

        setTitle("");
        setUsername("");
        setPassword("");
    }

    return (
        <form className="form" onSubmit={handleSubmit}>
            <label>title</label>
            <input className="input" id="title" placeholder="Title" value={title} autoComplete="off"
            onChange={(e) => setTitle(e.target.value)}/> 

           <label>Username</label>
           <input className="input" id="username" placeholder="Username" value={username} autoComplete="off"
           onChange={(e) => setUsername(e.target.value)}/> 

           <label>Password</label>
           <input className="input" id="password" placeholder="Password" type="password" value={password} autoComplete="off"
           onChange={(e) => setPassword(e.target.value)}/>

           <button type="submit">Add</button>
        </form>
    )
}

export default InputPasswords

这是加密代码：

import crypto from "crypto";
const secret = "testtesttesttesttesttesttesttest";

const encrypt = (password) => {
    return crypto.AES.encrypt(password, secret).toString();
};

const decrypt = (encryption) => {
   let bytes = crypto.AES.decrypt(encryption, secret);
   let originalText = bytes.toString(crypto.enc.Utf8);

   return originalText;
};

export {encrypt, decrypt};

我不确定如何解决这个问题。有谁知道如何解决这个问题？因为没有加密代码运行没有任何问题

Answer 1

我编辑了加密函数并将其移动到组件中，因此密码被加密了

  const handleSubmit = (e) => {
        e.preventDefault();
        const secret = "testtesttesttesttesttesttesttest";

        const iv = Buffer.from(crypto.randomBytes(16));
        const cipher = crypto.createCipheriv('aes-256-ctr', Buffer.from(secret), iv);

        const encryptedPassword = Buffer.concat([cipher.update(password), cipher.final()]);

        //let encryptedPassword = crypto.AES.encrypt("password", secret).toString();;

        database.collection("password-"+userAuth).add({
            title: title,
            username: username,
            password: encryptedPassword.toString('hex')
        })
        .then(() => {
            window.location.reload();
        })
        .catch((error) => {
            console.error(error);
        })

        setTitle("");
        setUsername("");
        setPassword("");
    }

反应加密密码

React encrypt password

javascript

encryption

reactjs