reactjs - 如何使用 React MongoDB 和 Express 正确加密和解​​密密码

Question

目前，我正在本地计算机上的开发环境中工作，我使用 MongoDB 以纯文本形式存储密码。我使用 express-jwt 和 jsonwebtoken 来传递用户数据和身份验证。我研究了 bcryptjs 和 bcrypt，我想实现最适合 React 和 Express 的方法，用于将哈希密码从客户端传递到数据库。我找到了服务器端的资源，但没有找到客户端的资源。

我的问题是，当加密密码从客户端传递过来时，在我的服务器上正确保存加密密码的方法是什么？如何加密客户端密码然后验证服务器端？

我读过一些文章说由于 ssl 不需要加密客户端，但其他人说绝对需要加密客户端。正确的方法是什么？如何在我的 React 应用程序上实现它？

Answer 1

使用 Bcryptjs、Express 和 MongoDB:

1. 客户端无需加密，您可以使用 post 请求(通常通过表单)将密码以纯文本形式传递到服务器。

2. 假设您有一个与此类似的“用户”架构:

      const userSchema = new mongoose.Schema({
       email:{type:String,required:true,unique:true},
       password:{type:String,required:true}
      },{collection:'users'}
      const User= mongoose.model("User",userSchema);
      )
   

3. 在服务器中注册/注册时，您将在处理请求时对用户的密码进行哈希处理，如下所示:

app.post('/signup',async (req,res)=>{
    // geting our data from frontend
    const {email,password:plainTextPassword}=req.body;
    // encrypting our password to store in database
    const password = await bcrypt.hash(plainTextPassword,salt);
    try {
        // storing our user data into database
        const response = await User.create({
            email,
            password
        })
        return res.redirect('/');
    } catch (error) {
        console.log(JSON.stringify(error));
        if(error.code === 11000){
            return res.send({status:'error',error:'email already exists'})
        }
        throw error
    }
})

4.根据登录请求(也将通过客户端表单发布)，您将使用 bcrpyt.compare() 函数比较密码，如果成功，则将 JWT 分配给用户，如下所示方法假设 token 将存储在 Cookie 中。

const verifyUserLogin = async (email,password)=>{
    try {
        const user = await User.findOne({email}).lean()
        if(!user){
            return {status:'error',error:'user not found'}
        }
        if(await bcrypt.compare(password,user.password)){
            // creating a JWT token
            token = jwt.sign({id:user._id,username:user.email,type:'user'},JWT_SECRET,{ expiresIn: '2h'})
            return {status:'ok',data:token}
        }
        return {status:'error',error:'invalid password'}
    } catch (error) {
        console.log(error);
        return {status:'error',error:'timed out'}
    }
}

// login 
app.post('/login',async(req,res)=>{
    const {email,password}=req.body;
    // we made a function to verify our user login
    const response = await verifyUserLogin(email,password);
    if(response.status==='ok'){
        // storing our JWT web token as a cookie in our browser
        res.cookie('token',token,{ maxAge: 2 * 60 * 60 * 1000, httpOnly: true });  // maxAge: 2 hours
        res.redirect('/');
    }else{
        res.json(response);
    }
})

我没有涉及前端，因为它只包含react中的基本POST请求形式，不需要在客户端进行任何特殊的方法或处理。 希望有帮助。

编辑，哈希客户端: 对此存在争议，在某些协议(protocol)中，甚至需要在客户端对密码进行哈希处理，简而言之，因为 SSL 已经加密了从客户端移动到服务器的所有内容，在客户端进行哈希处理是毫无意义的，也不是今天被广泛接受，甚至@大公司。最重要的是，增加的安全性是可以忽略不计的，并且不值得麻烦并将哈希逻辑暴露给客户端