Question

我无法使Firebase身份验证正常工作。在数据库中启用了用户身份验证，并且已经创建了登录ID。使用浏览器的调试控制台时，只有1条警告：

It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.

我不确定我在这里缺少什么。任何帮助都将不胜感激。

function login(){

    const userEmail = document.getElementById('userEmail');
    const userPassword = document.getElementById('userPassword');
    const loginBtn = document.getElementById('loginBtn');

    loginBtn.addEvenListener('click'), e => {
      const email = userEmail.value;
      const pass = userPassword.value;
}
  firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode === 'auth/wrong-password') {
          alert('Wrong password.');
        } else {
          alert(errorMessage);
        }
        console.log(error);
    });
    firebase.auth().onAuthStateChanged(user => {
          if (user) {
            window.location = 'secondpage.html';
          }
        });
  }

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<h1>TESTING</h1>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Name"
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="login_div" class="main-div">
<h3>Welcome</h3>
<input id="userEmail" type="email" placeholder="Email..." />
<input id="userPassword" type="password" placeholder="Password..." />

<button click="login()">Login to Account</button>
</div>

<script src="https://www.gstatic.com/firebasejs/5.11.0/firebase.js"></script>
   <script>
  // Initialize Firebase
    var config = {
    apiKey: "KEY",
    authDomain: "name.firebaseapp.com",
    databaseURL: "https://name.firebaseio.com",
    projectId: "testlist",
    storageBucket: "testlist.appspot.com",
    messagingSenderId: "111111111111"
    };
    firebase.initializeApp(config);
    </script>

    <script src="test.js"></script>
    </body>
  </html>

Answer 1

尝试此代码！

按钮问题。

<button click="login()">Login to Account</button>

click不是有效的事件，onclick是有效的。因此您的按钮将如下所示：

<button onclick="login()">Login to Account</button>

<html>
<head>
<title>TEST</title>
<h1>TESTING</h1>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Name"
<link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="login_div" class="main-div">
<h3>Welcome</h3>
<input id="userEmail" type="email" placeholder="Email..." />
<input id="userPassword" type="password" placeholder="Password..." />

<button onclick="login()">Login to Account</button>
</div>

<script src="https://www.gstatic.com/firebasejs/5.11.0/firebase.js"></script>
   <script>
//   Initialize Firebase
    var config = {
    apiKey: "KEY",
    authDomain: "name.firebaseapp.com",
    databaseURL: "https://name.firebaseio.com",
    projectId: "testlist",
    storageBucket: "testlist.appspot.com",
    messagingSenderId: "111111111111"
    };
    firebase.initializeApp(config);
  firebase.initializeApp(config);
    </script>

    <script src="test.js"></script>
    </body>
  </html>

<_TEST.js-> 


function login() {
  const userEmail = document.getElementById("userEmail");
  const userPassword = document.getElementById("userPassword");

  const email = userEmail.value;
  console.log("TCL: login -> email", email);
  const pass = userPassword.value;
  console.log("TCL: login -> pass", pass);

  firebase
    .auth()
    .signInWithEmailAndPassword(email, pass)
    .catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
      if (errorCode === "auth/wrong-password") {
        alert("Wrong password.");
      } else {
        alert(errorMessage);
      }
      console.log(error);
    });
  firebase.auth().onAuthStateChanged(user => {
    console.log("TCL: login -> user", user);
    if (user) {
       window.location = "secondpage.html";
    }
  });
}

Answer 2

您使用了错误的脚本。您正在使用：

<script src="https://www.gstatic.com/firebasejs/5.11.0/firebase.js"></script>

但是您需要使用：

<script src="https://www.gstatic.com/firebasejs/5.11.0/firebase-app.js"></script>

在许多论坛中已经指出/ firebase一个会出现此错误，因为您需要/ firebase-app一个。仅获得一个firebase可能会比您实际需要的导入更多，这会膨胀您的应用程序大小

对于身份验证，您可能还需要：

<script src="https://www.gstatic.com/firebasejs/5.11.0/firebase-auth.js"></script>


<script src="https://www.gstatic.com/firebasejs/5.11.0/firebase-database.js"></script>

Firebase身份验证（电子邮件和密码）未通过身份验证

2 个答案: