方法signInWithEmailAndPassword（）無響應-Firebase Web

Question

我正在嘗試創建一個小程序，該程序通過createUserWithEmailAndPassword()來注冊用戶，該程序的工作原理類似於createUserWithEmailAndPassword()按鈕。 但是，當我嘗試signInWithEmailAndPassword() ，該程序對錯誤的電子郵件/密碼，正確的電子郵件/密碼等無響應，然后僅重新加載頁面。 登錄程序僅在檢測到電子郵件格式錯誤時才響應。

注意： createUserWithEmailAndPassword()和signInWithEmailAndPassword()在不同的Javascript文件中使用。 另外，firebase連接良好，並且啟用了身份驗證。

沒有錯誤消息。 登錄后，我的目標是轉到另一個頁面（index.html）。

謝謝！

以下是我針對此方法的代碼！

const loginEmail = document.getElementById("loginEmail");
const loginPassword = document.getElementById("loginPassword");

function loginToSearch() {
    const email = loginEmail.value;
    const password = loginPassword.value;

    firebase.auth().signInWithEmailAndPassword(email, password)
        .then(function(firebaseUser) {
            // Success
            window.alert("LOGGED IN");
            window.location = "index.html";
        })
        .catch(function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            window.alert(errorMessage);
        });
}

調用此方法的代碼：

<form class="main-form">
    <h4>Login:</h4>
    <br/>
    <div id="login_div" class="main-div">
        <div class="form-group">
            <label for="loginEmail">Email</label>
            <input type="email" name="Email" id="loginEmail" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="loginPassword">Password</label>
            <input type="password" name="Password" id="loginPassword" class="form-control" required>
        </div>
    </div>
    <button class="btn btn-primary" id="loginBtn" onclick="loginToSearch()">Login!</button>
</form>

AuthState的實時偵聽器：

firebase.auth().onAuthStateChanged(user => {
    if (user) {
        console.log("Logged In!");
        console.log(user);
    } else {
        console.log('Not Logged In!');
    }
});

非常感謝您的幫助！

Answer 1

我看不到Firebase代碼有任何問題，但是我確實看到您的HTML代碼有問題...

form末尾有一個button ，單擊該按鈕將導致提交表單。 這就是導致您的頁面重新加載的原因。 要解決此問題，請將click事件包含在按鈕的onclick處理程序中：

<button class="btn btn-primary" id="loginBtn" onclick="loginToSearch(e)">Login!</button>

然后在您的JavaScript中：

function loginToSearch(e) {
    e.preventDefault();   // <-- prevent whatever default behavior would occur
                          //     in this case, it prevents the form submission

    const email = loginEmail.value;
    const password = loginPassword.value;

    // etc...

我懷疑如果解決此問題，您的登錄代碼將起作用-實際上，我認為它已經在起作用-只是在您有機會看到頁面之前進行頁面重新加載。