javascript - 我不明白为什么 firebase.auth().signInWithEmailAndPassword(email, password) 不起作用

Question

我正在尝试使用 firebase 创建登录页面，对此我很陌生，并且一直在阅读 firebase 文档以找到解决问题的方法。

这是我使用 firebase auth SDK 中的 firebase.auth().signInWithEmailAndPassword() 方法的函数。

function toggleSignIn() {

    var email = document.getElementById('inputEmail').value;
    var password = document.getElementById('inputPass').value;

    if (email.length < 1) {
        alert('Please enter an email address.');
        return;
    }
    if (password.length < 1) {
        alert('Please enter a password.');
        return;
    }
    // Sign in with email and pass.
    firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode === 'auth/wrong-password') {
            alert('Wrong password.');
        } else {
            alert(errorMessage);
        }
        console.log(error);
    });

}

这将在蓝月亮中运行一次，但在那之后将停止运行。我在 HTML 页面上单击“登录按钮”，它只是清除了输入电子邮件和输入密码框。之后什么都没有发生，我检查了我的控制台窗口，没有用户登录。

这就是 HTML 的样子

 <div id="Login-google" class="input-group-google">
                <button id="Logout_buton" type="submit" class="submit-buton" onclick="toggleSignOut()"> Test Logout </button>
            </div>

            <form id="Login" class="input-group">
                <input id="inputEmail" type="text" class="input-field" placeholder="Email" required>
                <input id="inputPass" type="text" class="input-field" placeholder="Password" required>
                <input type="checkbox" class="check-box"> <span> Remember Password </span>
                <button id="Login_buton" type="submit" class="submit-buton" onclick="toggleSignIn()"> Test Login </button>
            </form>

对此的任何帮助将不胜感激，我对此很陌生，请放轻松。

标签： javascripthtmlfirebaseweb-applications

Answer 1

您正在提交表单，默认浏览器行为通过向给定 URL 发出 POST 请求来提交表单。如果您想阻止默认行为，您需要e.preventDefault()在您的提交方法中编写。这是更新的代码。

使用表单 onsubmit 事件提交表单

Javascript

function toggleSignIn(e) {
    e.preventDefault(); // prevent the default behaviour

    var email = document.getElementById('inputEmail').value;
    var password = document.getElementById('inputPass').value;

    if (email.length < 1) {
        alert('Please enter an email address.');
        return;
    }
    if (password.length < 1) {
        alert('Please enter a password.');
        return;
    }
    // Sign in with email and pass.
    firebase.auth().signInWithEmailAndPassword(email, password).then((response) => {
   console.log(response);
  // do something when sign in is successful
}).catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode === 'auth/wrong-password') {
            alert('Wrong password.');
        } else {
            alert(errorMessage);
        }
        console.log(error);
    });

}

HTML

 <div id="Login-google" class="input-group-google">
                <button id="Logout_buton" type="submit" class="submit-buton" onclick="toggleSignOut()"> Test Logout </button>
            </div>

            <form id="Login" class="input-group" onsubmit="return toggleSignIn(event)">
                <input id="inputEmail" type="text" class="input-field" placeholder="Email" required>
                <input id="inputPass" type="text" class="input-field" placeholder="Password" required>
                <input type="checkbox" class="check-box"> <span> Remember Password </span>
                <button id="Login_button" type="submit" class="submit-button"> Test Login </button>
            </form>
 </div>