通过网址传递的 React/Firebase 身份验证变量

Question

我正在使用Firebase作为身份验证/数据库使用React构建一个Web应用程序，我注意到我的浏览器历史记录有一个URL包含纯文本(http://localhost:3000/login?email=big%40me.com&password=bigger(的用户名和密码。这是我在将字符串存储为状态然后将它们传递给 Firebase 身份验证函数时犯的错误，还是 Firebase 身份验证过程中的缺陷？有没有办法缓解这种情况？

法典：

import React from 'react';
import Input from '@material-ui/core/Input';
import Button from '@material-ui/core/Button';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import {auth} from './firebase';
import logo from '../images/signature.jpg';
const styles = {
card: {
minWidth: 275,
maxWidth: 350,
},
custForm: {
clear: 'both',
},
logo: {
align: 'center',
height: 200, 
width: 'auto', 
margin: -30, 
paddingRight: 28
},
};
class Auth extends React.Component {
constructor(props){
super(props);
this.state = {
email: '',
pass: '',
err: false
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e){
const name = e.target.name;
const value = e.target.value;
this.setState({
[name]: value
});
}
handleSubmit(e){
e.preventDefault();
auth.signInWithEmailAndPassword(this.state.email,this.state.pass)
.then(result => {
this.props.onLogin(result);
this.props.history.push('/home');
}).catch(e => {
console.log(e);
this.setState({
err: true,
email: '',
pass: ''
})}
);
}
render(){  
const {classes} = this.props;
return (
<div align='center' style={{marginTop: 20}}>
<Grid 
container
direction='column'
spacing={8}
justify='center'
>
<img src={logo} className={classes.logo} />
<Typography variant='title' style={{marginBottom: 20}} >Subcontractor Reporting Portal</Typography>
<Grid item className={classes.card} >
<form 
onSubmit={this.handleSubmit} 
className={classes.custForm}
>
<Input 
onChange={this.handleChange}
fullWidth
autoFocus
type='text'
name='email'
placeholder='email'
value={this.state.email}
/>
<Input
onChange={this.handleChange}
fullWidth
name='pass'
type='password'
placeholder='password'
value={this.state.pass}
/>
<Button type='submit'>Login</Button>
</form>
{this.state.err && <p>A wrong email or password was entered</p>}
</Grid>
</Grid>
</div>
);
}
}
export default withStyles(styles)(Auth);

Answer 1

您可以使用以下链接进行 Firebase 身份验证，而无需在网址中发送用户名和密码。

https://firebase.google.com/docs/reference/rest/auth/#section-sign-in-email-password

端点

https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=[API_KEY]

API_KEY是您在 Firebase 中项目API_KEY。所有详细信息都在该链接中。 这将是通过 Firebase 实现身份验证的正确方法，因为它使用令牌，并且这些令牌可以存储在您的本地存储中，即使在应用程序刷新后也能保持登录状态。