2016-07-24 9 views
4

Ich versuche ein Registrierungssystem mit jquery und firebase zu erstellen und das Problem, mit dem ich Probleme habe, ist nicht zu wissen, was der 'call to firebase' zurückgibt. Lassen Sie mich Ihnen in meinem Code:Javascript und Firebase 3 - Benutzer mit E-Mail und Passwort erstellen

HTML (vereinfacht durch irrelevante Code zu entfernen):

<div id="registerForm"> 
    <input type="text" id="userEmail" placeholder="Email"> 
    <input type="password" id="userPass" placeholder="Password"> 
    <button type="button" id="register">Register</button> 
</div> 

JQuery (auch hier nur den Code relevant Firebase und Registrierung angezeigt):

<script src=" /* Jquery url */ "></script> 
<script src=" /* Firebase url */ "></script> 
<script> 

    // Initialize Firebase 
    var config = { 
     apiKey: "*my api key*", 
     authDomain: "*myProject*.firebaseapp.com", 
     databaseURL: "https://*myProject*.firebaseio.com", 
     storageBucket: "*myProject*.appspot.com", 
    }; 
    firebase.initializeApp(config); 
</script> 
<script> 
    $('#register').click(function() { 

     var email = $('#userEmail');  
     var pass = $('#userPass');  

     if(email.val() && pass.val()){ 
      // this is where I stop knowing how all this firebase stuff works 


      firebase.auth().createUserWithEmailAndPassword(email.val(), pass.val()).catch(function(error) { 
       var errorCode = error.code; 
       var errorMessage = error.message; 
       console.log(errorCode + ' - ' + errorMessage); 
      }); 

      // This is where it doesn't wanna work. Please check the first paragraph below 
      // for the explanation of how it doesn't work. 
      console.log('this message shouldn\'t show if there wasn\'t an error.'); //This fires before firebase.auth()... for some reason 
      if(error) { 
       console.log('there was an error'); 
      } else { 
       console.log('everything went fine'); 
      }     
     } else { 
      console.log('fill in both fields'); 
     } 
    }); 
</script> 

Ich möchte hier eine if-else-Anweisung, die überprüft, was die Firebase.auth-Methode zurückgegeben hat. Wenn es sich um einen Fehler handelt, wird ein Fehler angezeigt, wenn keine Erfolgsmeldung angezeigt wird und andere Benutzerdetails in einer userDetails-Db-Tabelle usw. gespeichert werden, aber der Code, den ich hier einstelle, scheint vor der firebase.auth-Methode ausgeführt zu werden. Ich denke, das Problem ist, dass ich nicht weiß, was die Rückgabevariable von Firebase heißt, damit ich etwas wie if tun kann (firebase.auth.success (oder was auch immer)) {} else {}.

Der obige Code funktioniert, als ob die Registrierung erfolgreich war, ein neuer Benutzer wird auf Firebase angezeigt und wenn es einen Fehler gab, kann ich drucken und den Fehler sehen. Das Problem ist einfach nicht zu wissen, wie man einen erfolgreichen/fehlgeschlagenen Aufruf von firebase behandelt, und die Tatsache, dass Code, der später geschrieben wird, anscheinend vor dem Aufruf von firebase ausgeführt wird.

Bitte ignorieren Sie alle Rechtschreib-/Syntaxfehler, die ich gemacht habe, da es Fehler gewesen wären, sie in SO zu kopieren und keine Fehler im eigentlichen Code.

Jede Hilfe wäre willkommen, danke!

Antwort

8

createUserWithEmailAndPassword ist ein Assync-Aufruf, es wurde zum Rückruf im Erfolgsfall oder .catch() gebaut, wenn ein Fehler aufgetreten ist. Ihr aktueller Code versucht zu validieren, wenn ein Fehler aufgetreten ist, aber der Firebase-Aufruf zum Erstellen des Benutzers ist noch nicht abgeschlossen, wenn Sie if(error) überprüfen.

Was sollten Sie suchen ist die folgende:

if(email.val() && pass.val()){ 

    firebase.auth().createUserWithEmailAndPassword(email.val(), pass.val()).then(function(user){ 
     console.log('everything went fine'); 
     console.log('user object:' + user); 
     //you can save the user data here. 
    }).catch(function(error) { 
     console.log('there was an error'); 
     var errorCode = error.code; 
     var errorMessage = error.message; 
     console.log(errorCode + ' - ' + errorMessage); 
    }); 

} else { 
    console.log('fill in both fields'); 
}