0

我正在尝试构建自己的锻炼跟踪工具。我已经用 bootstrap studio 构建了我的前端。我正在弄清楚如何使用 firebase 及其身份验证工具。它可以工作，但只能在纯 html 文件中。我用 BSStudio 创建的那个不想工作。我希望有人可以帮助我。

首先，我为每个页面使用了一个 js 文件，但现在我只从一个文件中处理它。

它称为 backend.js。：

 firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
        // User is signed in.
        alert("logged in")
        document.getElementById("user_div").style.display = "block";
        document.getElementById("login_div").style.display = "none";
        document.getElementById("logoutsucceed").style.display = "none";
        document.getElementById("logoutfailed").style.display = "block";
        var user = firebase.auth().currentUser;

        if (user != null) {

            var email_id = user.email;
            document.getElementById("user_para").innerHTML = "Welcome User : " + email_id;

        }

    } else {
        // No user is signed in.
        alert("logged out")
        document.getElementById("user_div").style.display = "none";
        document.getElementById("login_div").style.display = "block";
        document.getElementById("logoutsucceed").style.display = "block";
        document.getElementById("logoutfailed").style.display = "none";

    }
});
document.getElementById('btlogin').onclick = function () {
    login();
};
document.getElementById('btlogout').onclick = function () {
    logout();
};

function login() {
    alert("try to login")
    var userEmail = document.getElementById("email_field").value;
    var userPass = document.getElementById("password_field").value;

    firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;

        alert("Error : " + errorMessage);

        // ...
    });

}

function logout() {
    alert("logged out")
    firebase.auth().signOut();
    href = "index.html"
}

function register() {
    alert("register command")
}

这是我的工作页面：

 <html>
<head>
    <title>Firebase Login</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
</head>

<body>

    <div id="login_div" class="main-div">
        <h3>Firebase Web login Example</h3>
        <input type="email" placeholder="Email..." id="email_field" />
        <input type="password" placeholder="Password..." id="password_field" />

        <button id="btlogin">Login to Account</button>
    </div>
    <button onclick="window.location.href = 'homepage.html';">Hier klicken</button>
    <div>

    </div>
    <div id="user_div" class="loggedin-div">
        <h3>Welcome User</h3>
        <p id="user_para">Welcome to Firebase web login Example. You're currently logged in.</p>
        <button id="btlogout">Logout</button>
    </div>



    <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
    <script>
        // Initialize Firebase
    var config = {
      [config from firebase]
    };
    firebase.initializeApp(config);
    </script>
    <script src="assets/js/backend.js">
    </script>

</body>

</html>

我的 bsstudio 创建了页面（不起作用）。我有 100% 放置相同的 firebase 配置，所以这不是问题：

    <!DOCTYPE html>
<html>

<head>
    login()
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Login - FitBy</title>
    <meta name="description" content="A gym website by Kevin Kumar. Providing various gym tools from workout tracking to informative blogs.">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Actor">
    <link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/fonts/ionicons.min.css">
    <link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css">
    <link rel="stylesheet" href="assets/css/beautiful-danger-alert.css">
    <link rel="stylesheet" href="assets/css/beautiful-success-alert.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css">
    <link rel="stylesheet" href="assets/css/Profile-Card.css">
    <link rel="stylesheet" href="assets/css/smoothproducts.css">
    <link rel="stylesheet" href="assets/css/untitled.css">
</head>

<body>
    <nav class="navbar navbar-light navbar-expand-lg fixed-top bg-white clean-navbar" style="margin-bottom: 0;">
        <div class="container"><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1" style="float: right;"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="text-left align-self-start order-1" style="position: absolute;float: left;margin-bottom: 0px;"></div>
            <div class="collapse navbar-collapse" id="navcol-1"><span class="navbar-text" style="min-width: 220px;"><a class="navbar-brand logo" href="#" style="margin-right: 0;">FitBy</a><a class="navbar-brand logo" href="#"
                        style="transform: scale(-1,1);margin-right: 0;margin-left: 0px;padding: 0;font-family: Actor, sans-serif;font-size: 30px;">K</a><a class="navbar-brand logo" href="#"
                        style="margin-right: 0;margin-left: -2px;font-family: Actor, sans-serif;font-size: 30px;">K</a><a class="navbar-brand logo" href="#" style="margin-left: 2;padding: 0;margin-right: 0;">nowledge</a></span>
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item" role="presentation"><a class="nav-link" href="index.html">Home</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="/features.html">Features</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="/forum.html">Forum</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="/blog-post-list.html">Blog</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="/about-us.html">About Us</a></li>
                    <li class="nav-item" role="presentation"><a class="nav-link" href="/contact-us.html">Contact Us</a></li>
                    <li class="nav-item dropdown show"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="true" href="#">my account</a>
                        <div class="dropdown-menu show" role="menu">
                            <div class="col"><img id="userprofileimg" src="assets/img/scenery/image1.jpg" style="margin: 0;padding: 0px;background-position: 100%;margin-left: auto;margin-right: auto;"></div>
                            <h6 class="dropdown-header" role="presentation">Overview</h6><a class="dropdown-item" role="presentation" href="/userpage.html">My Information</a><a class="dropdown-item #lblogout" role="presentation"
                                href="/login.html">Login</a><a class="dropdown-item" role="presentation" id="lbregister" href="registration.html">Register</a><a class="dropdown-item" role="presentation" id="lbLogout" href="logout.html">Logout</a>
                            <h6 class="dropdown-header" role="presentation">Tracking</h6><a class="dropdown-item" role="presentation" href="tracking-dashboard.html">Tracking Dashboard</a><a class="dropdown-item" role="presentation" href="#">Create
                                Workout</a><a class="dropdown-item" role="presentation" href="#">Excercises</a>
                            <h6 class="dropdown-header" role="presentation">Blog</h6><a class="dropdown-item" role="presentation" href="#">My Posts</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <main class="page login-page">
        <section class="clean-block clean-form dark">
            <div class="container">
                <div class="block-heading">
                    <h2 class="text-info">Log In</h2>
                    <p>Welcome!</p>
                </div>
                <div id="login_div">
                    <form>
                        <div class="form-group"><label for="email">Email</label><input class="form-control item" type="email" id="email"></div>
                        <div class="form-group"><label for="password">Password</label><input class="form-control" type="password" id="password"></div>
                        <div class="form-group">
                            <div class="form-check"><input class="form-check-input" type="checkbox" id="checkbox"><label class="form-check-label" for="checkbox">Remember me</label></div>
                        </div><button class="btn btn-primary btn-block" id="btlogin" type="button">Log In</button>
                    </form>
                </div>
            </div>
            <div id="user_div">
                <div class="alert alert-success beautiful" role="alert" id="succeed"><Strong>Success!</Strong> You are logged in! To add more details just open your Overview (link)</div>
            </div>
        </section>
    </main>
    <footer class="page-footer dark">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">
                    <h5>Get started</h5>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="registration.html">Sign up</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <h5>About us</h5>
                    <ul>
                        <li><a href="#">Company Information</a></li>
                        <li><a href="#">Contact us</a></li>
                        <li><a href="#">Reviews</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <h5>Support</h5>
                    <ul>
                        <li><a href="/faq.html">FAQ</a></li>
                        <li><a href="/contact-us.html">Help desk</a></li>
                        <li><a href="#">Forums</a></li>
                    </ul>
                </div>
                <div class="col-sm-3">
                    <h5>Legal</h5>
                    <ul>
                        <li><a href="#">Terms of Service</a></li>
                        <li><a href="#">Terms of Use</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer-copyright">
            <p>© 2020 Copyright Text</p>
        </div>
    </footer>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/chart.min.js"></script>
    <script src="assets/js/bs-init.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
    <script src="assets/js/smoothproducts.min.js"></script>
    <script src="assets/js/theme.js"></script>
    <script src="assets/js/backend.js"></script>
</body>

</html>
4

1 回答 1

0

输入字段 - 电子邮件和密码，在 HTML 和 bsstudio 中具有不同的 id。在 backend.js 中更改var userEmail = document.getElementById("email").value并var userPass = document.getElementById("password").value;使用 bsstudio 运行。理想情况下它应该工作。如果它没有发布您的输出（即使它给出错误）。

于 2020-07-09T14:22:55.610 回答