Firebase Web 身份验证不起作用 - 仅针对键入错误的电子邮件返回错误答案

【问题标题】：Firebase Web Authentication Not Working - Returning Error Only for Badly typed EmailFirebase Web 身份验证不起作用 - 仅针对键入错误的电子邮件返回错误
【发布时间】：2020-03-04 10:35:41
【问题描述】：

我在基于 web 的 firebase 身份验证中遇到问题。从firebase返回控制台没有错误，我故意尝试了错误密码和电子邮件ID的不同组合，但在控制台中登录没有错误。通过使用正确的登录用户名（电子邮件）和密码，没有显示任何内容，并且通过使用 chrome-dev-tools 步进代码，该功能没有执行。有人可以帮忙吗？提前致谢...

鉴于下面的 javaScript 代码和 HTML 代码，您能否验证代码确认我错过了什么？？

但是 android 应用程序中的所有内容都适用于同一个项目

在身份验证的域中添加了 localhost，我正在 localhost 中运行应用程序。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Login</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
    <script src = "js/firebase.js"></script>
    <script src="js/main.js"></script>
    <script src="js/userOperations.js"></script>
<!--===============================================================================================-->
</head>
<body>

    <div class="limiter">
        <div class="container-login100">
            <div class="wrap-login100">
                <form class="login100-form validate-form p-l-40 p-r-40 p-t-178">
                    <span class="login100-form-title">
                        <img src="./img/logo.png">
                    </span>

                    <div class="wrap-input100 validate-input m-b-16" data-validate="Please enter username">
                        <input class="input100" type="email" placeholder="Email" id = "username">
                        <span class="focus-input100"></span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-16" data-validate = "Please enter password">
                        <input class="input100" type="password" placeholder="Password" id = "password">
                        <span class="focus-input100"></span>
                    </div>


                    <div class="container-login100-form-btn ">
                        <button onclick="signIn()" class="login100-form-btn shadow">
                            LOGIN
                        </button>
                    </div>

                    <div class="text-right p-t-13 p-b-23">
                        <span class="txt1">
                            <a href="register_selection.html">
                            Register Now
                            </a>
                        </span>
                        <span class="txt2">
                            <a href="recover.html">
                            Forgot Password?
                            </a>
                        </span>

                    </div>

                    <div class="flex-col-c p-t-70 p-b-40">
                        <span class="txt4 p-b-9">
                            Copyright   &copy; 2019
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

firebase.js

<!-- language: lang-javascript -->

  // Your web app's Firebase configuration
  var firebaseConfig = {
// added the required codes here
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

  //Handle Account Status
firebase.auth().onAuthStateChanged(user => {
  if(user) {
    window.alert("logged in");
  }
});

  const auth = firebase.auth();
  function signIn(){
      var username = document.getElementById('username').value; 
      var password = document.getElementById('password').value;   
      console.log(username+password);

      firebase.auth().signInWithEmailAndPassword(username, password).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        console.log(errorCode+" "+errorMessage);
        // ...
      });

  }

【问题讨论】：

标签： javascript html firebase google-cloud-platform firebase-authentication

【解决方案1】：

使用try-catch 并查看

...

try {
    firebase.auth().signInWithEmailAndPassword(username, password);
}
catch(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    console.log(errorCode+" "+errorMessage);
    // ...
}

...

【讨论】：

您好，感谢您的快速回复，我试过了，但还是没有得到任何结果。

【解决方案2】：

signInWithEmailAndPassword() 返回一个 Promise，您应该为它处理两种可能的最终状态，resolve 和 .then()（在您的代码中缺失）或 reject 和 .catch()（您可以这样做）。

因此，您错过了通常会获取用户数据和/或重定向到另一个页面的 .then() 部分...

【讨论】：

您好，感谢您的回复。将代码更改为 ` firebase.auth().signInWithEmailAndPassword(username, password) .then(function(firebaseUser) { window.alert("logged in "); // Success }) .catch(function(error) { / / 错误处理 window.alert("got errr"); }); `

【解决方案3】：

感谢您的建议和解决方案，我通过将 HTML 文件中的 form class 更改为 div 解决了这个问题

【讨论】：