简体   繁体   English

Firebase身份验证(电子邮件和密码)未进行身份验证

[英]Firebase auth (email and password) not authenticating

I'm not able to get the firebase auth working. 我无法让firebase auth工作。 User auth is enabled in the DB and login ID has been created. 在DB中启用了用户身份验证,并且已创建登录ID。 When is use the debug console of the browser, there is only 1 warning: 何时使用浏览器的调试控制台,只有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.

I'm not sure what I'm missing here. 我不确定我在这里缺少什么。 any help is greatly appreciated. 任何帮助是极大的赞赏。

 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> 

try this code! 试试这个代码!

the issue with with your button. 你的按钮的问题。

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

click is not a valid event, onclick is valid. click不是有效事件, onclick有效。 so your button will look like this: 所以你的按钮看起来像这样:

<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";
    }
  });
}

You are using the wrong script. 您使用的是错误的脚本。 You are using: 您正在使用:

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

But you need to use: 但你需要使用:

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

It's been pointed out in many forums that the /firebase one gives this error since you need the /firebase-app one. 在许多论坛中已经指出/ firebase之一给出了这个错误,因为你需要/ firebase-app。 Just getting the firebase one is probably importing way more then you actually need and it is bloating your app size 刚刚获得firebase可能导入的方式比您实际需要的多,并且它会使您的应用程序大小膨胀

Also for your authentication you probably also need: 您的身份验证也可能需要:

<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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM