Firebase身份验证和Facebook的Firebase身份验证不起作用

Question

Hello i'm trying to implement an firebase auth to my app. but i does not seem to work. When i Submit the Form or click the Facebook Login it does nothing. I get this error:

Uncaught Error: The error you provided does not contain a stack trace.

Thank you in advance for helping me.

import firebase from '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

For popup sign-in visit the Facebook for Developers site, get the App ID and an App Secret for your app. If you don't want popup Check the code below:

 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

This is incorrect:

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

It should be:

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