极客观点
项目管理
HarmonyOS
const form = {
firstname: "",
lastname: "",
email: "",
password: "",
gender: "",
dob: "",
username: ""
};
export default class Login extends React.Component {
constructor (props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {
}
}
handleSubmit (event) {
event.preventDefault();
api.signin(this.state)
}
handleChange (event, type) {
form[type] = event.target.value;
this.setState({
form
})
}
render() {
return (
<div>
<nav className="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a className="navbar-brand" href="#">ChatBox</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarsExampleDefault">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Link</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Disabled</a>
</li>
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown">Dropdown</a>
<div className="dropdown-menu" aria-labelledby="dropdown01">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<a className="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<main role="main" className="container">
<div className="starter-template">
<h1>Register for ChatBox</h1>
<form >
<div className="d-flex justify-content-center bd-highlight mb-3">
<div className="p-2">
<label htmlFor="firstname">First Name</label>
<input type="text" className="form-control" id="firstname" placeholder="First Name" onChange={
(e)=>{ this.handleChange(e, 'firstname')}
}/>
</div>
<div className="p-2">
<label htmlFor="lastname">Last Name</label>
<input type="text" className="form-control" id="lastname" placeholder="Last Name" onChange={
(e)=>{ this.handleChange(e, 'lastname')}
} />
</div>
</div>
<div className="form-group col-md-6">
<label htmlFor="inputEmail4">Email</label>
<input type="email" className="form-control" id="inputEmail4" placeholder="Email" onChange={
(e)=>{ this.handleChange(e, 'email')}
}/>
</div>
<div className="form-group col-md-6">
<label htmlFor="username">Username</label>
<input type="text" className="form-control" id="username" placeholder="Username" onChange={
(e)=>{ this.handleChange(e, 'username')}
}/>
</div>
<div className="form-group col-md-6">
<label htmlFor="inputPassword4">Password</label>
<input type="password" className="form-control" id="inputPassword4" placeholder="Password" onChange={
(e)=>{ this.handleChange(e, 'password')}
}/>
</div>
<div className="form-group col-md-6">
<label htmlFor="gender">Gender</label>
<select id="gender" className="form-control" onChange={ (e)=>{ this.handleChange(e, 'gender')} }>
<option >Choose...</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div className="form-group col-md-6 " >
<label htmlFor="date">D.O.B</label>
<input type="date" className="form-control" id="date" placeholder="date" onChange={ (e)=>{ this.handleChange(e, 'dob')} }/>
</div>
<div className="form-group col-md-2">
<input type="submit" onClick={this.handleSubmit} className="form-control bg-info text-white" id="submit" placeholder="Password" />
</div>
</form>
</div>
</main>
</div>
)
}
}
将表单数据存储在这样的状态中是一种好习惯还是有更好的方法？
和输入的密码可以从 devtools 中看到纯文本。如何避免这种情况我的意思是任何加密密码并将其发送到后端的方法。
我对此很陌生。如果有人检查这是否是编写代码的好习惯，将会很有帮助。
原文由 Naveen 发布，翻译遵循 CC BY-SA 4.0 许可协议
如前所述，您不能阻止用户在他的浏览器中查看密码（此外，他是用户，所以他已经知道密码）。存储密码是有风险的，因为它会将其暴露给 本地文件系统攻击（如果您为每个用户使用不同的密钥，则加密 可能 对这种攻击很有用）。
如果您不信任 SSL/TLS （例如，公司用户可能被迫使用不安全的 HTTP 连接到某些 HTTPS 代理），则可能需要加密密码。但是在那种情况下，您可以通过发送 向服务器证明客户端拥有密码而根本不发送密码（即使是加密的，加密密钥也必须通过不受信任的网络与客户端共享，这真是个坏主意）密码的哈希加上一些非秘密的伪随机内容（也发送伪随机内容）。
也就是说，您不应该在客户端以任何形式存储用户的密码（在进行身份验证时，您仍然可以发送从密码派生的哈希值，而不是密码本身，以防 HTTPS 受到威胁）。
存储服务器在初始身份验证后生成的令牌（例如 OIDC 访问令牌）。令牌过期（通常从一个小时到几天不等），可以在给用户带来最小不便的情况下被撤销（他不必创建新密码）并且不足以更改用户的密码或电子邮件（通常用户将必须为此输入旧密码）并执行其他关键帐户操作，因此即使使用被盗令牌造成某些损坏，用户至少可以恢复帐户。