Question

您好我正在尝试为我的应用实施firebase身份验证。但我似乎没有工作。当我提交表格或点击Facebook登录时，它什么都不做。我收到这个错误：

未捕获错误：您提供的错误不包含堆栈跟踪。

提前感谢您帮助我。

从'firebase'

导入firebase

const loginStyles = {
  width: "90%",
  maxWidth: "380px",
  margin: "20px auto",
  border: "1px solid #ddd",
  borderRadius: "5px",
  padding: "10px"
}

const provider = new firebase.auth.FacebookAuthProvider();


class Login extends Component {


  constructor(props){
    super(props);
    this.authWithFacebook= this.authWithFacebook.bind(this);
    this.authWithEmailPassword= this.authWithEmailPassword.bind(this);
    this.state = {
      redirect: false
    }
  }
  authWithFacebook(){
    firebase.auth().signInWithPopup(provider)
      .then((result, error) => {
        if(error){
          console.log(error);
          this.toaster.show({intend: Intent.DANGER, message: "kann nicht mit Facebook einloggen"})
;
      }else{
          this.setState({
            redirect: true
          })
      }
    })
  };

  authWithEmailPassword(event){
    event.preventDefault();
    const email = this.emailInput.value;
    const password = this.passwordInput.value;
    firebase.auth().fetchProvidersForEmail(email)
      .then((providers)=>{
        if(providers.length === 0){
          //Benutzer Account erstellen
          return firebase.auth.createUserWithEmailAndPassword(email, password)

        } else if (providers.indexOf("password") === -1 ){
          //Facebook wird schon benutzt
          this.loginForm.reset()
          this.toaster.show({intend: Intent.WARNING, message: "versuche es mit einem abderen Login"})
        } else {
          // den Benutzer Einloggen
          return firebase.auth().signInWithEmailAndPassword(email, password)
        }
      })
      .then((user => {
        if(user && user.email){
        this.loginForm.reset();
        this.setState({
          redirect: true
        })
      }}))
      .catch((error) => {
        this.toaster.show({intend: Intent.DANGER, message: error.message})
      })
  }



    render(){
      if (this.state.redirect === true){
        return <Redirect to='/' />
      }
      return (

      <div style={loginStyles}>
        <Toaster ref={(element) => {this.toaster = element}} />
          <div >
            <Col  xs={12} md={12}>
              <Button style={{width: "100%", marginTop: "10px"}} bsStyle="primary" onClick={()=> {this.authWithFacebook() }}>
                Log-In mit Facebook
              </Button>
            </Col>
          </div>
          <Col xs={12} md={12}>
            <hr/>
          </Col>
          <Form onSubmit={(event)=> {this.authWithEmailPassword(event)}} ref={(form) =>{this.loginForm = form}}>
            <FormGroup style={{marginBottom: "20px"}} controlId="formHorizontalEmail">
                <Col  xs={12} md={12}>
                  <FormControl name="email" inputRef={(ref) => { this.emailInput = ref; }} type="email" placeholder="Email" />
                </Col>
              </FormGroup>

              <FormGroup controlId="formHorizontalPassword">
                <Col  xs={12} md={12}>
                  <FormControl name="password" inputRef={(ref) => { this.passwordInput = ref; }} type="password" placeholder="Password" />
                </Col>
              </FormGroup>



              <FormGroup style={{marginTop  : "20px"}} >
                <Col  sm={12}>
                  <Checkbox>Remember me</Checkbox>
                </Col>
              </FormGroup>

              <FormGroup >
                <Col  sm={12}>
                  <Button type="submit">
                    Einloggen
                  </Button>
                </Col>
              </FormGroup>
          </Form>
      </div>
    )
  }
}
;

export default Login;

Answer 1

要进行弹出式登录，请访问Facebook for Developers网站，获取应用程序ID和应用程序密钥。如果您不想弹出检查以下代码：

firebase.auth().signInWithRedirect(provider);
firebase.auth().getRedirectResult().then(function(result) { 
if (result.credential) {
    // This gives you a Facebook Access Token. You can use it to access the Facebook API.
    var token = result.credential.accessToken;
    // ...
  }
  // The signed-in user info.
  var user = result.user;
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});

Answer 2

这是不正确的：

firebase.auth().signInWithPopup(provider)
  .then((result, error) => {

应该是：

firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // Success.
  }, (error) => {
    // Error.
  });

Firebase Auth＆amp; Firebase Auth Facebook无法正常工作

2 个答案: