Question

我正在尝试创建一个小程序，该程序通过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代码有问题...

在button的末尾有一个form，单击该按钮导致提交表单。这就是导致您的页面重新加载的原因。要解决此问题，请将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...

我怀疑如果解决此问题，您的登录代码就可以工作-实际上，我认为它已经在工作-只是在您有机会看到页面之前重新加载页面。

方法signInWithEmailAndPassword（）无响应-Firebase Web

1 个答案: