时间戳

首页 > 解决方案 > 通过 url 传递的 React/Firebase 身份验证变量

reactjs - 通过 url 传递的 React/Firebase 身份验证变量

问题描述

我正在使用 Firebase 作为身份验证/数据库构建一个带有 React 的 web 应用程序，我注意到我的浏览器历史记录有一个包含纯文本 ( http://localhost:3000/login?email=big%40me.com&password=bigger) 的用户名和密码的 URL。这是我在将字符串存储为状态然后将它们传递给 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);

标签： reactjsfirebasefirebase-authentication

解决方案

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

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 实现身份验证的正确方法，因为它使用令牌，并且这些令牌可以存储在您的本地存储中，即使在应用刷新后也可以让您保持登录状态。

推荐阅读