Firebase身份驗證成功，但返回空用戶（Web）

我在使用Firebase與我的Web應用程序驗證用戶身份時遇到問題。每當我嘗試登錄firebase.auth（）。signInWithEmailAndPassword（email，pass）;函數被調用，請求成功並觸發authStateChanged偵聽器。但是，在偵聽器內部firebaseUser總是返回null。Firebase身份驗證成功，但返回空用戶（Web）

我已經嘗試從個人服務器託管Web應用程序，並允許域訪問我的Firebase數據庫。

我也有一個android應用程序，完美地運行相同的數據庫。

這裏是我的代碼：

(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'); 
     } 
     }) 

}());

登錄HTML：

<!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>

來源

2017-02-12 Kyle Behiels

這似乎不大可能，權威性會失敗，而不觸發'趕上（）'。你可以在jsbin中設置它的複製，所以我可以看看嗎？ –

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

我以前從來沒有用過jsbin，很可能是我做錯了登錄憑證：[email protected]密碼：testing123 –

你不回來從你的按鈕單擊處理任何事情，也不阻止它的默認行爲。這意味着按鈕提交表單，這會導致頁面刷新。

的解決方案很簡單：

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; 
    });

我還添加了一個額外的then()處理程序，這使得它更容易看到它的工作。但是你真的應該像處理已經做的那樣處理onAuthStateChanged中的身份驗證狀態。

看到這個jsbin：https://output.jsbin.com/waxixe/1

來源

2017-02-13 00:00:35

你是男人。這解決了它！ –

Firebase身份驗證成功，但返回空用戶（Web）

回答

相關問題