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 方法。