firebase 身份验证与 email 和密码不起作用

Question

我编写了一个具有登录表单的 web 应用程序，但它不起作用并且它不返回任何错误。 这里的 main.js function 和调用它的 HTML 代码。

function signinUser() {
    var email = document.getElementById("inputEmail").value;
    var password = document.getElementById("inputPassword").value;

    firebase.auth().signInWithEmailAndPassword(email, password).then((userCredential) => {
        var user = userCredential.user;

        console.log(user);
    }).catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;

        if (errorCode === 'auth/wrong-password')
            alert("Password errata!");

        console.log("Error code: " + errorCode);
        console.log("Error message: " + errorMessage);
    });
}

这是我登录页面上的 HTML 代码：

<form id="login" class="form-signin position-absolute top-50 start-50 translate-middle">
    <img class="mb-4" src="img/logo.png" alt="" width="72" height="72">
    <h1 class="h3 mb-3 fw-normal">Login</h1>
    <label for="inputEmail" class="visually-hidden">Email address</label>
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <label for="inputPassword" class="visually-hidden">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me"> Remember me
        </label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="submit" onclick="signinUser();">Sign in</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2021</p>
</form>

Answer 1

在您的表单中，您将按钮声明为submit类型的按钮：

<button class="w-100 btn btn-lg btn-primary" type="submit" onclick="signinUser();">Sign in</button>

这导致您的表单在异步 Firebase signInWithEmailAndPassword()方法完成之前提交。

将按钮更改为type="button"将解决问题（参见W3 规范）。 表单将不会被提交，但这根本不是问题：您不希望提交表单，您只希望使用从表单中获取的正确值（即email和password ）调用 Firebasse 方法。