Question

我打算进行Firebase网络身份验证。我添加了所需的代码，用于检查用户是否已签名，需要用于登录的代码以及用于检查错误的代码。但是他们都没有工作。请检查一下：

index.html的 -

<!DOCTYPE html>
<html>
    <head>
        <title>
            Firebase Sign In
        </title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div id="login_div" class="main-div">
            <h3>
                Firebase Login Sample
            </h3>
            <input type="email" placeholder="Email...." id="email_feild">
            <input type="password" placeholder="Password...." id="password_feild">
            <button onclick="login()">
                Login to Account
            </button>
        </div>

        <div id="user_div" class="LoggedIn-div">
            <h3>
                Welcome User
            </h3>
            <p>
                Welcome to Firebase web login Page. You are currently logged in.
            </p>
            <button>
                Logout
            </button>
        </div>

<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAL8dSTuXb92DWu0l78dtV4m4fC8psKeV4",
    authDomain: "groupinger-users.firebaseapp.com",
    databaseURL: "https://groupinger-users.firebaseio.com",
    projectId: "groupinger-users",
    storageBucket: "groupinger-users.appspot.com",
    messagingSenderId: "432661298034"
  };
  firebase.initializeApp(config);
</script>
<script src="app.js"></script>
    </body>
</html>

app.js：

firebase.auth().onAuthStateChanged(function (user){
    if (user) {
    // User is signed in
  document.getElementById('user_div').style.display = "block";
  document.getElementById('login_div').style.display = 'none';
} else {
    // No user is signed in
  document.getElementById('user_div').style.display = 'none';
  document.getElementById('login_div').style.display = 'block';
}
});
function login(){
    var userEmail = document.getElementById('email_feild').value;
    var userPass = document.getElementById('password_feild').value;

firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
window.alert("Error:" + errorMessage);
  // ...
});
}

styles.css的：

body{
    background-color:#fff;
    padding:0px;
    margin:0px;
    font-family:sans-serif;
    height:100%;
    width:100%;
}
input,button{
    font-family:sans-serif;
}
input, button{
    font-weight:700;
}
//.main-div{display:none;}
.main-div, .LoggedIn-div{
    width:22.5%;
    margin:0px auto;
    margin-top:20px;
    padding:20px;
    border:1px solid black;
}
.main-div input{
    display:block;
    border:1px solid #ccc;
    border-radius:5px;
    background-color:#fff;
    padding:15px;
    outline:none;
    margin-bottom:20px;
}
.main-div input:focus{
    border:1px solid #999;
}
.main-div button, .LoggedIn-div button{
    background-color:#5d8ffc;
    color:#fff;
    border:0;
    display:block;
    border-radius:5px;
    padding:15px;
    outline:none;
    display:block;
    width:100%;
    transition:0.3s;
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
}
.main-div button:hover, .LoggedIn-div button:hover{
    background-color:#fff;
    color:#5d8ffc;
    border:1px solid #5d8ffc;
}

没有用的东西是

如果用户已登录，则必须隐藏第一个<div>，如果用户未登录，则必须隐藏第二个<div>。但实际上，正在显示两个em。
如果访问者输入 123@gmail.com 作为电子邮件，密码作为密码，则必须登录。但登录功能无效。
如果任何JavaScript函数如登录功能等不起作用，那么网页应该向我们显示有关错误的警报。但警报没有弹出。请检查此代码。提前致谢。

Answer 1

如何将其添加到您的html中以进行Firebase身份验证

<script src="/__/firebase/7.17.1/firebase-auth.js"></script>

Firebase网络身份验证无效（Email＆amp; Pass）

1 个答案: