Firebase-Authentifizierung erfolgreich, aber gibt einen Nullbenutzer (Web) zurück

Ich habe Probleme, Benutzer mit Firebase mit meiner Webanwendung zu authentifizieren. Immer, wenn ich eine Anmeldung versuche, firebase.auth(). SignInWithEmailAndPassword (email, pass); Die Funktion wird aufgerufen, die Anforderung ist erfolgreich und der AuthStateChanged-Listener wird ausgelöst. Innerhalb des Listeners gibt fireBaseUser jedoch immer null zurück.Firebase-Authentifizierung erfolgreich, aber gibt einen Nullbenutzer (Web) zurück

Ich habe versucht, die Webanwendung von einem persönlichen Server zu hosten und den Domänenzugriff auf meine Firebase DB zu erlauben.

Ich habe auch eine Android-Anwendung, die einwandfrei funktioniert mit der gleichen DB.

Hier ist mein Code:

(function() { 

    // Initialize Firebase 
     var config = { 
     //CONFIG INFORMATION HERE 
     }; 
     firebase.initializeApp(config); 

     // Get elements 

     const txtEmail = document.getElementById('username'); 
     const txtPassword = document.getElementById('password'); 
     const loginButton = document.getElementById('loginButton'); 

     loginButton.addEventListener('click', e => { 

     const email = txtEmail.value; 
     const pass = txtPassword.value; 
     const auth = firebase.auth(); 

     const promise = auth.signInWithEmailAndPassword(email, pass); 
     promise.catch(e => console.log(e.message)); 
     }); 

     firebase.auth().onAuthStateChanged(firebaseUser => { 
     if(firebaseUser){ 
      console.log(firebaseUser); 
     } 
     else{ 
      console.log('not logged in'); 
     } 
     }) 

}());

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Athlete Buddy Login</title> 
     <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
     <link rel="stylesheet" type="text/css" href="allStyleSheet.css"> 
     <link rel="stylesheet" type="text/css" href="login.css"> 
     <link rel="icon" type="image/gif" href="pictures/ABLogo.png"> 
     <script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script> 

</head> 
<body> 
<nav> 
    <a href="#">Home</a> 
    <a href="#">Login</a> 
    <a href="#">Features</a> 
</nav> 

<img src="pictures/loginArt.png" id="loginTitle"> 

<div id="loginFormDiv"> 
    <form id="loginForm"> 
     Username: <input id="username" class="field" type="text" name="Username"> <br><br> 
     Password: <input id="password" class="field" type="Password" name="Password"> <br><br> 
     <input id="loginButton" type="submit" value="Login"> 
     <a id="createAccountButton" href="#">Create Account</a> 
     <a id="forgotPassword" href="http://www.youtube.com/watch?v=dQw4w9WgXcQ">forgot password?</a> 
    </form> 
</div> 

<script src="login.js"></script> 

</body> 
</html>

Quelle

2017-02-12 Kyle Behiels

Es scheint unwahrscheinlich, dass Auth scheitern würde, ohne die 'Fang Auslösung()'. Kannst du eine Reproduktion davon in einer JSBIN erstellen, damit ich es dir anschauen kann? –

https://jsbin.com/sonenup/1 –

Ich habe noch nie jsbin verwendet, es ist wahrscheinlich, dass ich das falsch gemacht habe Login Credentials: [email protected] Passwort: testing123 –

Sie sind nicht etwas von Ihrem Button-Klick-Handler zurückkehrt, noch ist es zu verhindern Standard Verhalten. Dies bedeutet, dass der Button das Formular übermittelt, was zu einer Seitenaktualisierung führt.

Die Lösung ist einfach:

loginButton.addEventListener('click', e => { 
    e.preventDefault(); 

    const email = txtEmail.value; 
    const pass = txtPassword.value; 
    const auth = firebase.auth(); 

    const promise = auth.signInWithEmailAndPassword(email, pass); 
    promise.then(u => console.log(u)); 
    promise.catch(e => console.log(e.message)); 

    return false; 
    });

ich auch einen zusätzlichen then() Handler hinzugefügt, die es leichter zu sehen, macht, dass es funktioniert. Aber Sie sollten den Authentifizierungsstatus in onAuthStateChanged so behandeln, wie Sie es bereits getan haben.

Sehen Sie diese jsbin: https://output.jsbin.com/waxixe/1

Quelle

2017-02-13 00:00:35

Sie sind der Mann. Das hat es behoben! –

Firebase-Authentifizierung erfolgreich, aber gibt einen Nullbenutzer (Web) zurück

Antwort

Verwandte Themen