Firebase認証は成功しましたが、nullユーザ（Web）を返します

WebアプリケーションでFirebaseを使用しているユーザを認証する際に問題があります。ログインを試みるたびにfirebase.auth（）。signInWithEmailAndPassword（email、pass）;関数が呼び出されると、要求は成功し、authStateChangedリスナーがトリガされます。ただし、リスナーの内部では、firebaseUserは常にnullを返します。Firebase認証は成功しましたが、nullユーザ（Web）を返します

私は、パーソナルサーバーからWebアプリケーションをホストし、自分のfirebase DBへのドメインアクセスを許可しようとしました。

私は同じDBで完璧に動作するアンドロイドアプリケーションも持っています。ここで

は私のコードです：

(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] password：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認証は成功しましたが、nullユーザ（Web）を返します

答えて

関連する問題